間 — a site made
mostly of nothing

概念 Concept

Ma (間) is the Japanese idea that the interval — the pause, the margin, the held breath — is not absence but material. So the site treats emptiness as its primary component: content occupies roughly a third of any viewport, sections are separated by whole screens of washi, and every view carries exactly one tiny drop of vermillion, the way a sumi-e painting carries one seal. The copy is bilingual and koan-short, because a studio that sells margins should not fill them.

技法 Technique

The hero brushstroke is seven stacked SVG paths pretending to be one. Each is measured with getTotalLength(), hidden behind its own stroke-dasharray, then released by transitioning stroke-dashoffset to zero on a cubic-bezier(.65,.01,.22,1) — staggered so the thick core lands first and thin strands chase it. The dry-brush edge comes from feTurbulence fed into feDisplacementMap; the ink bleed is a fat duplicate under feGaussianBlur at 13% opacity. The kasure — flying white — is the best trick: two washi-colored strokes painted over the ink tail, so the brush appears to run dry. The ensō reuses the same machinery, two arc commands triggered by an IntersectionObserver.

Japanese headings run in writing-mode: vertical-rl, including the haiku, which crossfade through four seasons while a masked pool behind them transitions background-color — spring blush to winter grey. The stone is a radial-gradient div whose border-radius morphs over sixteen seconds. The paper grain is a data-URI feTurbulence tile, fixed, multiply-blended at 5%. The hanko stamps in on cubic-bezier(.3,1.4,.45,1) — scale 2.4 to 1 with overshoot, settling 3° off square, because a true stamp never lands straight.

手順 Process

The build laid the skeleton: palette, type, the stroke rig, all copy. Each pass since has worked from screenshots at 1440×900 and 390×844, not intentions. Pass one caught the hero's worst fault — the brushstroke's mid-band scored straight through 間 like a strikethrough — and moved the stroke below the glyph as a grounding accent instead of a rival. Pass two chased motion: a scroll cue drifting onto the closing line on short phones, a brushstroke gone inert the moment it finished drawing, a hanko landing with no sense of contact — all three fixed, plus an ink-bloom on the seal and a click ripple. Pass three tuned craft against hard numbers — vermillion-on-washi text darkened from a marginal 4.48:1 to 5.86:1, the cursor's idle loop taught to stop spending frames once it catches the pointer. prefers-reduced-motion collapses every pass's motion at once — strokes pre-drawn, seasons held, the garden already still.