手引Guide — how SUMI was made
SUMI is a fictional paper-and-ink atelier in Kyōto, built as a study in wabi-sabi restraint: washi white as the dominant field, sumi black as structure, and vermilion only where a mark must land. The page keeps more silence than speech. Motion appears rarely, so each motion feels ceremonial rather than decorative.
一Vertical Headings
Section heads use .v-head in styles.css: writing-mode: vertical-rl, sticky positioning, a large Shippori Mincho kanji, and a thin vermilion rule on the Latin subtitle. The phone layout keeps that behavior in a narrow left rail, so the signature gesture survives the 390px viewport.
二Self-drawing ink strokes
The hero sweep, ensō, craft divider, and this guide mark are hand-plotted SVG paths, roughened with feTurbulence and feDisplacementMap. In main.js, prepareStrokes() measures each .stroke-wrap[data-draw] path with getTotalLength(), drawStroke() animates stroke-dashoffset to zero, and flush() catches anchor jumps.
三The hanko stamp
The signature seal is a real <button> for keyboard access. When it reaches 70% visibility, main.js adds .stamped, which fires the @keyframes stamp spring: overshoot, impact, rebound, and final −3° rest. A faint receiving square and halo in styles.css make it feel pressed into paper, not merely faded in.
四Objects as paper slips
The product area deliberately avoids equal boxed cards. The .cards grid uses uneven columns, offsets, one-sided rules, fibre gradients, and .card::before ghost kanji. Prices are written as a fictional sun-moon ledger, beginning with 日月, then the formal yen figure. On narrow screens the slips become compact ledgers beside the persistent vertical heading.
五Tokens
- washi #f7f4ed
- sumi #17150f
- vermilion #d34e24
Two fixed overlays create the paper: .grain for fibre tooth and .mottle for slow clouding. The single drifting wash is a 46-second CSS animation; syncVisibility() pauses it when the tab is hidden. The hero’s .ink-bloom is placed by bindInkBloom() with CSS variables, no animation loop. Type is Shippori Mincho for display and Zen Kaku Gothic New for the quiet body voice.
六Reproduce this
Prompt an agent with: “Build a one-page site for a Kyōto ink atelier. Use washi #f7f4ed, sumi #17150f, and vermilion #d34e24 only as a seal accent. Make vertical-rl sticky headings, huge negative space, hand-plotted SVG brush strokes roughened by turbulence filters, and stroke-dashoffset drawing via IntersectionObserver. Style products as asymmetric washi slips with poetic copy and formal Japanese pricing. End with a button-based hanko stamp that springs down. Honor reduced motion.” Then remove anything that explains itself too loudly.