Text Highlight
A hand-placed highlighter band that sweeps in behind your text and tracks wrapping.
texthighlightmarkerannotationsvgtypographyheadline
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | The inline content to highlight. |
color | string | chili (brand) | Marker color. Defaults to the Wensity brand (chili). |
opacity | number | 0.4 | Opacity of the marker band. |
duration | number | 0.9 | Seconds for the sweep. |
delay | number | 0 | Seconds to wait before sweeping. |
trigger | "view" | "hover" | "mount" | "view" | When to draw. View draws once on-screen; hover draws and retracts. |
padding | number | 2 | Extra px around the text before the band is drawn. |
drawn | boolean | - | Force the draw state. When omitted the trigger drives it; reduced motion always draws instantly. |
as | keyof JSX.IntrinsicElements | "span" | Outer element tag. |