Chosen words get a hand-drawn marker stroke that sweeps across them one after another.
Good copy is short, specific and a little bit surprising.
Writing notes, p. 12
npx shadcn@latest add https://hyperblur.dev/r/text-highlight-marker.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/text-highlight-marker.tsx.
import { TextHighlightMarker } from "@/components/hyperblur/text-highlight-marker"
<TextHighlightMarker text="Good copy is short and specific." marks={["short", "specific"]} />| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | required | Full text of the paragraph. |
| marks | string[] | [] | Words or phrases to highlight. Matching ignores case and every occurrence is marked. |
| colors | string[] | ["rgba(255, 214, 10, 0.5)", "rgba(255, 92, 168, 0.45)", "rgba(52, 211, 235, 0.42)"] | Marker colors, used in order and repeated. Semi-transparent colors keep the text readable. |
| coverage | number | 0.62 | Fraction of the line height the marker covers, measured from the bottom. |
| stagger | number | 0.5 | Delay between markers in seconds. |
| duration | number | 0.75 | Time each stroke takes to draw, in seconds. |
| delay | number | 0.1 | Delay before the first stroke, in seconds. |
| once | boolean | true | Draw only the first time the text enters the viewport. |
| loop | number | 0 | When above 0, erases and redraws the strokes this many seconds after they finish. |