The outline of each glyph draws itself like a pen stroke, then ink floods the letters from left to right and the outline settles into a faint keyline. Rendered in SVG and sized to the text.
npx shadcn@latest add https://hyperblur.dev/r/text-ink-draw.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/text-ink-draw.tsx.
import { TextInkDraw } from "@/components/hyperblur/text-ink-draw"
<TextInkDraw text="Signature" className="max-w-xl" />| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | required | Single line of text to draw. |
| stroke | string | "#7fb3ff" | Color of the outline. |
| fill | string | "#ededed" | Color of the ink fill. |
| strokeWidth | number | 2.2 | Outline width, measured against a 100 unit glyph size. |
| weight | number | 700 | Font weight of the text. |
| drawDuration | number | 1.8 | Seconds for the outline to draw. |
| fillDuration | number | 0.9 | Seconds for the ink to flood across. |
| trigger | "view" | "hover" | "mount" | "view" | Start when scrolled into view, on hover, or right after mount. |
| loop | number | 0 | When above 0, draws again this many seconds after it finishes. |