ns-ui / loud
Headline rendered as running-stitch embroidery: the cursor is a seam ripper that picks a letter's stitches loose into a gravity-swayed dangling thread, lingering unravels it into a static pile, and a click (or the Re-sew button) sews it back in.
Use when a hero or section headline where letter-by-letter unraveling under the cursor is the point — a craft/textile/handmade brand story, a playful 404 or empty state. Reach for text-ligature-melt instead when the effect you want is glyphs gooily fusing and swelling near the cursor rather than a stitched outline coming apart thread by thread — the two never share a visual vocabulary (fill vs. stroke, blur vs. dangle).
Install
npx shadcn add https://design.helpmarq.comns-ui / text-stitch-unpick
Pass the seam ripper over a letter to pick its stitches loose; linger and it fully unravels into a pile you have to re-sew.
| Prop | Type | Default | Description |
|---|---|---|---|
| text? | string | — | — |
| size? | number | — | Glyph font size in px. Default 56. |
| dwellMs? | number | — | Hover dwell before a picked letter fully unravels into a pile, ms. Default 650. |
| className? | string | — | — |