Imperfection,
given ceremony.
Kintsugi Studio treats the page as a quiet workshop rather than a product showcase. Its dominant charcoal field slows the eye; celadon carries the material memory of glazed clay; gold appears only where something has been joined.
The narrative has the cadence of the repair itself: encounter, fracture, pause, return, and illumination. Large empty intervals are intentional. They let each line of philosophy arrive at the same moment as the corresponding vessel state. Nothing tries to make the break invisible. Asymmetry, offset labels, hairline rules, and the wandering seam all preserve a human sense of handling.
How the vessel
comes apart.
The signature vessel is one SVG in index.html. A reusable #potShape is drawn five times, each copy cut by a polygonal clipPath. Every .shard owns custom direction and rotation values. In main.js, render(progress) converts scroll position into --apart; CSS multiplies that value into each transform. This keeps the animation composited and avoids layout work.
After the stillness stage, the same function eases the pieces home. Five crack paths use pathLength="1", so --gold-flow can drive their stroke-dashoffset from one to zero. The metallic line is a multi-stop SVG gradient passed through #goldGlow. The result reads as lacquer physically entering the seam, not a generic overlay.
The gallery repeats the visual grammar in smaller inline SVG maps. Each “Illuminate seam” control calls illuminateSeam(), which redraws its specimen’s gold path and leaves a quiet afterglow; keyboard and reduced-motion paths reach the same completed state. Grain comes from embedded turbulence, while radial light, ceramic highlights, and dark grounding ellipses build depth. prefers-reduced-motion removes the reveal and collapses the scroll sequence to clear static states. The requestAnimationFrame scroll work stops while the document is hidden.
Four materials,
two voices.
Shippori Mincho is the ceremonial voice: display titles, quotations, numerals, and Japanese marks. It is set large, lightly weighted, and tightly tracked. Epilogue is the workshop voice: compact notes, measured prose, labels, and navigation. Uppercase metadata gets generous tracking so it behaves like an engraved maker’s stamp.
Prompt for
the feeling first.
Ask an AI agent to build a self-contained, responsive ceramics atelier in HTML, CSS, and JavaScript. Specify a charcoal, celadon, bone, and metallic-gold palette; Shippori Mincho with Epilogue; abundant quiet space; and no photographic assets. Describe the emotional sequence before the layout: a vessel must visibly fracture, remain apart long enough to feel the loss, then reassemble while animated gold draws through every crack.
Require the vessel to be a real layered SVG with clipped shards—not a canned animation—and ask for scroll progress to drive composited transforms and normalized stroke drawing. Add invented provenance for repaired pieces, a replayable ritual, keyboard focus, reduced-motion behavior, and a final visual audit at phone, tablet, and desktop widths. The crucial direction is simple: honor the evidence of damage instead of polishing it away.
Return to the vessel ↗