# Kintsugi — Animated Text Effect for React

> 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.

- Page: https://crucibleui.com/components/text/kintsugi
- Category: [text](https://crucibleui.com/components/text)
- Tier: pro (one-time purchase, see https://crucibleui.com/pricing)
- Engine: canvas

## Install

```bash
npx shadcn@latest add @crucible/kintsugi
```

Pro install requires adding the token-bearing `@crucible` registry to components.json (issued at https://crucibleui.com/account after purchase).

Import from `@/components/crucible/kintsugi`.

## Props (`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: `Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "color">`.

## Usage example

```tsx
import { Kintsugi } from "@/components/crucible/kintsugi";

export default function KintsugiDemo() {
  return (
    <div className="relative isolate flex h-full min-h-[360px] w-full items-center justify-center overflow-hidden rounded-xl bg-neutral-950">
      <div className="relative z-10 flex w-full max-w-3xl flex-col items-center gap-4 px-6 py-8">
        <Kintsugi text="Mended, not hidden" as="h2" className="h-72 min-h-0 w-full" />
        <p className="text-sm text-neutral-500">Hover to crack — click to break it.</p>
      </div>
    </div>
  );
}
```

## Accessibility & performance

Honors `prefers-reduced-motion` with a designed static frame or fade (never a blank box) and passes `className` through. Pauses offscreen and on hidden tabs, clamps device pixel ratio, and tears down its GL/canvas context on unmount.