MA is a fictional six-seat tea house in Takagamine, Kyoto. Ma (間) is the Japanese concept of meaningful interval — the pause that gives the note its weight. The site is an exercise in how little a page can do and still hold you.
After eleven maximalist showcase sites, this one demonstrates the opposite skill: restraint under discipline. Sections are separated by a quarter of a viewport of nothing. One color is permitted beyond ink and paper — the vermillion of a hanko seal — and it appears exactly once at full strength. Every animation is slower than you expect, because the subject is a house where nothing hurries.
EB Garamond — the Latin voice, set at book measure with generous leading; typography that reads at the pace of the room.
Shippori Mincho — the Japanese voice, set vertically (writing-mode: vertical-rl) as the room's hanging scroll, and for the numerals 一 through 五 of the ceremony.
| Element | How it works |
|---|---|
| The ensō | Two SVG arcs — a 17px body stroke and a 6px dry-brush ghost — distorted through an feTurbulence + feDisplacementMap filter so the line wobbles like a loaded brush, then drawn once over 2.6 seconds with dash-offset. It is deliberately left unclosed; a closed ensō would be a logo. |
| Vertical text | Real CSS vertical writing, not rotated glyphs — the JP columns set exactly as a scroll would hang. |
| The seal | One vermillion block, rotated −3° like a hand-pressed hanko. The only saturated pixel on the page. |
| Seat register | Six bordered squares; 客 (guest) fills four in ink, 空 (empty) leaves two open — availability as calligraphy rather than a booking widget. |
| Reveals | A single IntersectionObserver adds a 1.4-second fade-rise. No parallax, no pinning, no scroll hijack — the interval does the work. |
| Accessibility | Reduced motion renders the ensō complete and disables fades. Decorative JP columns are aria-hidden; content is bilingual by adjacency, not by requirement. |
| You do | The page does |
|---|---|
| Arrive | The ensō draws itself once, and is not repeated |
| Scroll | Sections surface after a held pause — the 間 itself |
| Look for the color | Find the seal. There is exactly one. |