Text Highlighter
Hand-drawn highlighter marks swept across text, with underline, strike-through, box, and circle variants.
Sweeps a highlighter, underline, strike-through, box, or circle across inline text with a hand-drawn, canvas-like texture. It relies entirely on 2D geometric jitter and SVG path drawing, triggered on entering the viewport or on hover.
Loading preview…
npx shadcn@latest add https://webberui.com/r/text-highlighter.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
2
0.68
0.9
1
<TextHighlighter />
Installation
npx shadcn@latest add https://webberui.com/r/text-highlighter.jsonOr, once registries are configured in components.json, install it as @webberui/text-highlighter.
Usage
import { TextHighlighter } from "@/components/ui/text-highlighter";
<p>
The{" "}
<TextHighlighter color="#fde047">key point</TextHighlighter>{" "}
in this sentence gets swept by the highlighter.
</p>action switches between five marking styles: "highlight", "underline", "strike-through", "box", and "circle". Multiple passages can each set their own delay to reveal in sequence.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | The inline content to mark |
action | "highlight" | "underline" | "strike-through" | "box" | "circle" | "highlight" | The marking style |
color | string | "#fde047" | Ink color |
roughness | number | 2 | Hand-drawn jitter amplitude (px) |
thickness | number | 0.68 | Highlighter thickness as a proportion of the line height |
strokeWidth | number | automatic | Explicit stroke width (px); derived from action when omitted |
duration | number | 0.9 | Duration of the sweep animation (seconds) |
delay | number | 0 | Delay before the reveal starts (seconds) |
trigger | "inView" | "hover" | "inView" | When the animation is triggered |
once | boolean | true | Whether inView mode plays only once |
seed | number | 1 | Random seed, which fixes the hand-drawn path |
mixBlendMode | string | multiply for the highlighter | Blend mode |
Accessibility
- When the user has "reduce motion" enabled at the system level, the stroke skips the sweep animation and the final mark is shown directly
- The marking layer is an SVG carrying
aria-hidden, so the text itself stays natively readable and assistive technology is unaffected - The hand-drawn path is only drawn after client-side measurement, and SSR emits plain text only, avoiding hydration mismatches