Kintsugi
Canvas headline that crazes like glazed ceramic: seeded branching hairline cracks race out from the cursor, then a metallic gold seam flows along every fracture; click to split the glyphs into fragments that drop and spring back before gilding.
canvaspro
Pro
The preview is live. The source is Pro.
One purchase, lifetime access: every pro component's source, CLI install with your own registry token, and all future drops.
Installation
CLI
npx shadcn@latest add @crucible/kintsugiProps
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "Kintsugi" | The headline (also rendered as a visually hidden heading for screen readers + SEO). |
| as | "h1" | "h2" | "h3" | "p" | "h2" | Element the visually hidden real text is rendered as, so it stays a heading. |
| fontSize | number | auto (~45% of the height) | Maximum glyph size in px; the headline scales down (and wraps to two lines) to fit. |
| fontFamily | string | a bold old-style serif stack | Canvas font stack. Web fonts are picked up once document.fonts is ready. |
| color | string | "#efe9dd" | Glaze (glyph body) color. A subtle ceramic sheen is layered on top of any color. |
| goldColors | string[] | ["#f5d27a", "#b8862b"] | Gold seam gradient stops, light to dark (two or more). |
| healDelay | number | 1100 | Milliseconds between a crack racing out and the gold seam starting to flow along it. |
| density | number | 1 | Crack density: number of fractures and how eagerly they branch. 0.25–2. |
| autoplay | boolean | true | When untouched, a seeded crack appears every ~7s; those seams fade 12s after gilding so it never saturates. |
| paused | boolean | false | Freeze all motion. Imperative calls still add seams, fully gilded. |
| seed | number | 11 | Deterministic seed for every crack graph and autoplay origin. |
| ref | React.Ref<KintsugiHandle> | Imperative handle: crack(x?, y?), shatter(x?, y?), reset(). | |
Also accepts all props of Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "color"> — they pass through to the underlying element. | |||
Honors prefers-reduced-motion with a designed static fallback, pauses offscreen and on hidden tabs, and passes className through.