The Kintsugi
The story behind The Kintsugi
Inspired by Kintsugi on Wikipedia
Built with Canvas 2D · Fracture propagation · Stress field · Gold fill animation
Techniques Bilinear stress field interpolation · Recursive branching with energy decay · Multi-layer gold rendering (glow, core, highlight) · Baked ceramic noise texture
Direction Strike the surface. Break it beautifully.
Result A warm ceramic surface that fractures into intricate golden vein networks — each break more precious than the last
The Story
Kintsugi — 金継ぎ, literally “golden joinery” — is the Japanese art of repairing broken pottery with lacquer mixed with powdered gold. Rather than disguising the break, the repair highlights it. The fracture becomes a feature. The history of damage becomes part of the object’s beauty.
The philosophy behind kintsugi is rooted in wabi-sabi, the acceptance of imperfection and transience. A bowl that has been broken and repaired with gold is more valuable than one that was never broken — not despite the damage, but because of it. The cracks tell a story. The gold makes the story visible.
There’s something quietly radical about this. Most repair tries to be invisible — to restore the original, to pretend the damage never happened. Kintsugi does the opposite. It says: this thing was broken, and now it’s more beautiful. The flaw is the feature.
The Take
A warm cream surface fills the screen. It looks like ceramic — close-grained, slightly textured, with a subtle vignette at the edges. The prompt says “strike the surface.”
Click anywhere. A dark crack radiates from the impact point — not in a straight line, but following hidden stress patterns in the material. The crack branches, splits, finds paths of least resistance. For a fraction of a second, the fracture is dark — raw damage. Then gold floods in. Molten, luminous gold rushes along the crack lines, filling every branch and fork. The damage becomes decoration.
Click again. New cracks radiate from the new impact, branching outward, sometimes connecting to previous fractures. The golden network grows. Each strike adds to the pattern. The more you break it, the more intricate and precious the surface becomes.
The crack patterns are never the same twice. An underlying stress field — a grid of directional biases — guides the fractures along different paths depending on where you strike. The branching is stochastic: main cracks continue forward with variations, secondary branches split off at angles, and the whole network has a natural, organic quality that looks like real ceramic fracture.
After enough strikes, the text appears — not overlaid on the surface but integrated with it: “金継ぎ — to join with gold.” Then: “the flaw is the feature.”
The Tech
Canvas 2D — No WebGL
The entire experience runs on a 2D canvas context. No shaders, no framebuffers, no GPU compute. The ceramic background is baked once into an offscreen canvas (base color + per-pixel noise grain + radial vignette), then blitted each frame. All crack rendering is immediate-mode Canvas 2D stroke calls.
Stress Field
A 32×32 grid of random angles defines the material’s directional bias. When a crack propagates, it samples the stress field at its current position using bilinear interpolation of the four surrounding grid points (interpolating via sin/cos to handle angle wrapping). The crack direction blends 35% toward the stress field angle, with additional random perturbation. This means cracks follow the material’s grain rather than just radiating uniformly.
Fracture Propagation
Each strike generates 4–7 radial arms. Each arm is a recursive chain of line segments:
- Sample stress field at current position
- Blend direction toward stress + add random jitter
- Extend a segment (15–30px × viewport scale)
- Reduce energy by 25–40%
- With 50% probability (decreasing with depth), spawn a branch at 40–130° offset
- Continue until energy < 2 or depth > 12
Segment lengths and widths scale with viewport size so the fracture networks look proportional on both desktop and mobile.
Multi-Layer Gold Rendering
Each crack segment renders in four passes per frame:
- Dark crack line — visible for ~800ms before gold covers it,
rgba(40, 28, 15), slightly wider than the gold - Gold glow — a subtle warm halo at 3× the line width,
rgba(200, 160, 50, 0.12) - Gold core — the main gold fill, with per-segment color variation based on position (hues from 195–230 red, 155–180 green, 25–45 blue)
- Center highlight — a bright line at 40% of the core width,
rgba(240, 215, 120) - Fresh flash — an additional bright highlight on gold less than 1 second old, fading out
The gold fill animates with an ease-out cubic, flooding along the crack line over 600ms. This creates the visual of molten gold rushing into the fracture.
Impact Flash
Each strike produces a radial gradient flash — a warm white circle that expands and fades over 400ms, simulating the moment of impact.
Mobile
On touch devices, tapping anywhere produces a strike. An idle demo kicks in after 2 seconds if no interaction occurs, placing automatic strikes at random positions across the surface to demonstrate the effect.
Source: Kintsugi on Wikipedia