Text Highlighter
Marker-pen sweep that draws in when the phrase scrolls into view.
- 0.8 KB gzipped
- Deps: motion/react
- Reduced-motion safe
- Base UI & Radix compatible
Preview
Every component ships its own receipts.
Installation
pnpm dlx shadcn@latest add https://paulkeys.org/r/text-highlighter.jsonAdds components/velora/text-highlighter.tsx, installs motion and merges the keyframes and tokens into your CSS.
Props
| Prop | Type | Default |
|---|---|---|
children* | React.ReactNode | — |
colorAny CSS colour; defaults to a translucent brand wash | string | "color-mix(in oklch, var(--brand) 30%, transparent)" |
durationSeconds for the sweep | number | 0.7 |
className | string | — |
Accessibility
- Reduced motion
- The marker wash appears instantly at full width once the phrase scrolls into view, with no sweep.
- Keyboard
- Decorative — nothing to operate.
- Screen readers
- The text is read normally; the highlight bar is aria-hidden and the emphasis is visual only (no <mark> or <strong> semantics).