Motion should never cost anyone access to the content, and every effect here proves it.
- Renders a real <mark> by default, so assistive tech knows the text is highlighted; use as="span" for decoration only.
- Text keeps its own colour; pick a marker colour that keeps contrast with it.
- Wrapped highlights get one stroke per line.
- prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) shows the full highlight immediately.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | The highlighted text. |
as | 'mark' | 'span' | 'mark' | mark announces a highlight to assistive tech. |
color | string | yellow, 45% | Marker colour. |
duration | number | 900 | Milliseconds for the stroke. |
delay | number | 0 | Milliseconds before drawing. |