Animated hand-drawn marks for inline text: marker wash, sketchy underline, or scribble circle. Configurable shape, color, iterations, padding, and active state.
Install with the CLI, or copy the component source into your project.
Add text-mark (npm)
npx --yes -p github:itsvigneshv/default-file-ui#main df-ui add text-mark
Marker wash behind the phrase. Uses the yellow highlighter token by default.
Turn practice into production.
Sketchy baseline under the glyphs. Raise iterations so each draw looks irregular.
Keep state in the URL.
Scribble oval around a keyword. Raise padding to scale the oval outward.
Run in the browser.
Highlight one value phrase and circle another in the same sentence. Keep effects on different words.
Every tool runs in the browser and keeps state in the URL.
Toggle active to show or hide the mark. Useful for scroll-linked intro emphasis.
Open a tool, make the thing, ship it.
Inline hand-drawn emphasis for a word or phrase. Choose a marker wash (highlight), a sketchy baseline (underline), or a scribble oval (circle). Drive visibility with active for scroll or focus. Prefer separate TextMark instances on different phrases when combining a wash and a circle.
Pick one kind for a single mark, or pass layers to stack marks on the same span.
| Prop | Type | Default | Notes |
|---|---|---|---|
| children | ReactNode | - | Text or inline content to annotate. |
| active | boolean | true | When true, draw the annotation. When false, hide it. Use this to sync marks with scroll steps or selection. |
| kind | "highlight" | "underline" | "circle" | "box" | "bracket" | "strike-through" | "crossed-off" | "highlight" | Annotation shape. highlight is a marker wash. underline is a sketchy baseline under the glyphs. circle is a scribble oval around the phrase. Ignored when layers is set. |
| layers | TextMarkLayer[] | - | Ordered stack of annotations on the same span. Prefer separate TextMark nodes on different phrases when a wash and a circle should not share the same words. |
| color | string | kind token default | CSS color for the single-kind path. Tokens and color-mix resolve at draw time. Defaults: highlight uses --df-text-mark-yellow, underline and circle use --df-text-mark-blue. |
| activeColor | string | - | Optional text color while active. Omit to keep inherited ink over a light wash. |
| strokeWidth | number | 1.5 | Stroke thickness in CSS pixels for the single-kind path. |
| duration | number | 600 | Draw duration in milliseconds for the single-kind path. Reduced motion sets this to 0. |
| iterations | number | 2 or 3 by kind | Extra sketch passes. Higher values look less uniform. Defaults to 3 for underline and circle, 2 for other kinds. |
| padding | number | 2, 6, or 12 by kind | Extra space around the glyphs in CSS pixels. Raise this to scale circles and boxes outward. Defaults to 12 for circle, 6 for box, 2 otherwise. |
| brackets | "left" | "right" | "top" | "bottom" | Array | - | Bracket sides when kind is bracket. Ignored for other kinds. |
| multiline | boolean | true | When true, annotate each visual line of wrapped text. Set false to treat the content as one box. |
| className | string | - | Additional styles on the host span. |
One entry in the layers array. Same knobs as the single-kind props, scoped to that pass.
| Prop | Type | Default | Notes |
|---|---|---|---|
| kind | "highlight" | "underline" | "circle" | "box" | "bracket" | "strike-through" | "crossed-off" | - | Annotation shape for this layer. |
| color | string | - | CSS color for this layer. Tokens resolve at draw time. |
| strokeWidth | number | - | Stroke thickness in CSS pixels for this layer. |
| duration | number | - | Draw duration in milliseconds for this layer. |
| iterations | number | - | Extra sketch passes for this layer. Raise for a less uniform scribble. |
| padding | number | - | Extra space around the glyphs in CSS pixels for this layer. |
| brackets | "left" | "right" | "top" | "bottom" | Array | - | Bracket sides when this layer kind is bracket. |
Theme defaults live on :root. Override these globally or on a local host.
| Token | Type | Default | Notes |
|---|---|---|---|
| --df-text-mark | CSS color | var(--df-text-mark-yellow) | Default mark color alias. Points at the yellow wash. |
| --df-text-mark-yellow | CSS color | color-mix(in oklch, var(--df-yellow-green-90) 82%, transparent) | Neon yellow-green marker wash for highlight (--df-yellow-green-90). |
| --df-text-mark-pink | CSS color | color-mix(in oklch, var(--df-magenta-200) 68%, transparent) | Pink marker wash for highlight accents. |
| --df-text-mark-blue | CSS color | var(--df-blue-400) | Blue stroke for circle and underline. |
| --df-text-mark-foreground | CSS color | var(--foreground) | Optional ink override when activeColor is set to this token. |