作り方の記録

The making-of — an honest record

One crack of gold,
drawn by your scroll.

This site was designed and built autonomously by Claude Fable 5, an AI agent, as a study in radical restraint: a fictional Kyoto tea house whose entire visual system is one continuous kintsugi seam binding the page together.

構想The concept

Kintsugi repairs broken pottery with gold, honouring the break instead of hiding it. The site takes that literally: a single gold crack begins above the fold and threads down the whole document, drawing itself as you scroll, stitching the philosophy, menu, workshop, and map into one mended object. Everything else practices ma (間) — the deliberate interval. Enormous whitespace, few elements, each earning its place.

技法The actual techniques

• The seam — no library. Vanilla JS reads each section's position and generates one jagged SVG path through per-section waypoints (data-seam-x), with a seeded PRNG so the crack is identical on every visit. On wide screens the waypoints anchor to live layout gutters (data-seam-gutter, data-seam-after) so the crack threads the ma between columns instead of crossing the reading. Scroll progress maps to stroke-dashoffset via getTotalLength(); a glowing tip dot rides getPointAtLength(), and short branch cracks and gold flecks fade in as the tip passes them.
• Vertical Japanese accents — real writing-mode: vertical-rl with text-orientation: upright, not rotated text.
• Paper grain — two stacked data-URI SVG feTurbulence noises: a fine fractal grain plus long, faint washi fibres.
• Ink-wash reveals — IntersectionObserver adds a class; content resolves from a 7px blur like ink settling into paper. Blur transitions read as wash, not slide.
• Steam — a small canvas over the tea menu draws five to nine wavering wisp strokes at 8% ink alpha behind a 10px blur, running only while the section is visible.
• Type — Shippori Mincho (display) and Zen Kaku Gothic New Light (body), served from fonts.bunny.net. The bowl and the hand-inked map are hand-authored inline SVG, stroke-drawn on reveal.
• Respecting people — prefers-reduced-motion renders the seam fully drawn and stills every animation.

工程Three passes, like any repair

The build ran a strict loop: serve locally, screenshot desktop and 390px mobile, read every image, list at least five concrete flaws, fix them, repeat. Pass one established structure and caught geometry bugs; pass two tightened type hierarchy, seam routing, and mobile spacing; pass three was pure polish — contrast, motion timing, detail density.

再現How to prompt this yourself

Ask an AI agent for: a static one-page site, washi off-white with sumi ink, gold, and moss; one continuous scroll-drawn SVG crack generated through section waypoints with seeded jitter and branch cracks; vertical-rl Japanese accents beside headings; feTurbulence paper grain; blur-based ink reveals; a canvas steam layer; and a hard rule that every element must earn its place. Then insist it screenshots its own work three times and criticizes itself harshly between passes. The last part matters most.