Gilded Fracture
Kintsugi-inspired golden cracks spreading across dark surface with molten gold light bleeding through.
What is Gilded Fracture?
Gilded Fracture is a WebGL reinterpretation of kintsugi, the Japanese practice of repairing broken ceramics with gold. A Voronoi cell network generates the crack structure and fbm noise roughens it; molten gold light then bleeds out from inside the cracks and glows against dark ceramic glaze. Crack propagation speed and glow intensity are the two live parameters. The file also accepts a ?p= query parameter to render at a fraction of native resolution, which is the cheapest way to buy frame rate on integrated graphics without changing the look much. The animation pauses when the tab is hidden. It works best on luxury, editorial and portfolio pages where the background should feel like a physical material rather than a repeating pattern.
Gilded Fracture is a free WebGL web effect in the TappyPrism library. Kintsugi-inspired golden cracks spreading across dark surface with molten gold light bleeding through. It is rendered on the GPU by a fragment shader, so it costs almost nothing on the CPU and works well as a full-screen background. It ships as a single self-contained HTML file (gilded-fracture.html) with zero dependencies — no npm package, no framework, no build step. It exposes 2 live parameters — Crack Speed, Glow Intensity — adjustable in the browser or at runtime.
Parameters
| Parameter | Key | Range | Default |
|---|---|---|---|
| Crack Speed | CRACK_SPEED | 0.05 – 1 | 0.3 |
| Glow Intensity | GLOW_INTENSITY | 0.3 – 2 | 1 |
How to add Gilded Fracture to your page
- Download the standalone file gilded-fracture.html and copy its source into your project.
- Or embed it as a background iframe:
<iframe src="https://prism.tappypotato.com/fx/gilded-fracture.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Gilded Fracture"></iframe> - Tune it at runtime with postMessage:
iframe.contentWindow.postMessage({ type: 'param', name: 'CRACK_SPEED', value: 0.3 }, '*');
Frequently asked questions
What is Gilded Fracture?
Gilded Fracture is a WebGL reinterpretation of kintsugi, the Japanese practice of repairing broken ceramics with gold. A Voronoi cell network generates the crack structure and fbm noise roughens it; molten gold light then bleeds out from inside the cracks and glows against dark ceramic glaze. Crack propagation speed and glow intensity are the two live parameters. The file also accepts a ?p= query parameter to render at a fraction of native resolution, which is the cheapest way to buy frame rate on integrated graphics without changing the look much. The animation pauses when the tab is hidden. It works best on luxury, editorial and portfolio pages where the background should feel like a physical material rather than a repeating pattern. Gilded Fracture is a free WebGL web effect in the TappyPrism library. Kintsugi-inspired golden cracks spreading across dark surface with molten gold light bleeding through. It is rendered on the GPU by a fragment shader, so it costs almost nothing on the CPU and works well as a full-screen background. It ships as a single self-contained HTML file (gilded-fracture.html) with zero dependencies — no npm package, no framework, no build step. It exposes 2 live parameters — Crack Speed, Glow Intensity — adjustable in the browser or at runtime.
How do I add Gilded Fracture to my website?
Download the standalone file at https://prism.tappypotato.com/fx/gilded-fracture.html and copy its source into your page, or embed it as a background iframe: <iframe src="https://prism.tappypotato.com/fx/gilded-fracture.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Gilded Fracture"></iframe>. Tune it live with postMessage, e.g. iframe.contentWindow.postMessage({ type: 'param', name: 'CRACK_SPEED', value: 0.3 }, '*').