KQ-1576 · GOLD/MEND

Gold Mend

A headline glazed like a ceramic plate — glaze pooled deeper toward each letter's foot, a glossy band across the top, a thin rim, a short soft shadow — that you break and mend: a click cracks it from that point, seeded cracks running out to the edge in 90 ms with a snap while the pieces shift a hair apart on springs.flick, then gold flows into every crack from the break point, wide enough to fill the gap, and the pieces close on springs.glide as it narrows to a bright seam and a glint runs along it. Seams are drawn only on the glaze and accumulate with every break, so the headline grows richer the more it is broken. The real text stays HTML, selectable and read once; Enter or Space breaks it at the centre.

KQ-1576 · GOLD/MEND

Fieldline Ceramics · Repair studio

Mended in gold

Every break becomes part of the piece.

click to break · enter for the centre

Open it on the Canvas stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/gold-mend

Props

text: string; default "Mended in gold"; The headline.
as: "h1" | "h2" | "h3" | "p" | "div"; default "h2"; The element rendered.
glaze: "celadon" | "ivory" | "indigo" | "tenmoku"; default "celadon"; The glaze the letters are fired in.
goldWidth: number; default 1.6; The width of a mended seam, px.
crackCount: number; default 5; How many cracks run out from each break (2 to 9).
branching: number; default 0.5; How many side cracks split off the main ones, 0 to 1.
part: number; default 3; How far the broken pieces shift apart before the gold closes them, px.
flowTime: number; default 900; How long the gold takes to fill the cracks, ms.
gold: string; default "oklch(from var(--warn) 0.82 0.13 h)"; The gold, any CSS colour.
shimmer: boolean; default true; A glint runs along the new seams as a mend closes.
maxBreaks: number; default 12; Breaks kept; past this the oldest seams are polished away.
defaultBreaks: [number, number][]; default []; Breaks already mended when it first shows, as [x, y] fractions of the headline's box.
trigger: "inView" | "mount" | "manual"; default "inView"; When the headline breaks once by itself, to show what it does: when first seen, at mount, or never.
resetKey: string | number; default —; Any change clears every break and seam.
interactive: boolean; default true; Clicks and keys break the headline.
disabled: boolean; default false; Nothing breaks.
sound: boolean; default false; A snap as each break cracks. Off unless asked for.
seed: number; default 1; Seeds the crack patterns.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
onBreak: (count: number) => void; default —; A break cracked: how many breaks there have been.
onMend: (count: number) => void; default —; A break was mended: how many seams the headline now carries.
className: string; default —; Styles the headline: size, weight, tracking and alignment carry through to the glazed letters.

Prop	Type	Default	Description
text	string	"Mended in gold"	The headline.
as	"h1" \| "h2" \| "h3" \| "p" \| "div"	"h2"	The element rendered.
glaze	"celadon" \| "ivory" \| "indigo" \| "tenmoku"	"celadon"	The glaze the letters are fired in.
goldWidth	number	1.6	The width of a mended seam, px.
crackCount	number	5	How many cracks run out from each break (2 to 9).
branching	number	0.5	How many side cracks split off the main ones, 0 to 1.
part	number	3	How far the broken pieces shift apart before the gold closes them, px.
flowTime	number	900	How long the gold takes to fill the cracks, ms.
gold	string	"oklch(from var(--warn) 0.82 0.13 h)"	The gold, any CSS colour.
shimmer	boolean	true	A glint runs along the new seams as a mend closes.
maxBreaks	number	12	Breaks kept; past this the oldest seams are polished away.
defaultBreaks	[number, number][]	[]	Breaks already mended when it first shows, as [x, y] fractions of the headline's box.
trigger	"inView" \| "mount" \| "manual"	"inView"	When the headline breaks once by itself, to show what it does: when first seen, at mount, or never.
resetKey	string \| number	—	Any change clears every break and seam.
interactive	boolean	true	Clicks and keys break the headline.
disabled	boolean	false	Nothing breaks.
sound	boolean	false	A snap as each break cracks. Off unless asked for.
seed	number	1	Seeds the crack patterns.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
onBreak	(count: number) => void	—	A break cracked: how many breaks there have been.
onMend	(count: number) => void	—	A break was mended: how many seams the headline now carries.
className	string	—	Styles the headline: size, weight, tracking and alignment carry through to the glazed letters.