How an eleven-seat kaiseki counter became one continuous scroll — the concept, the palette, the ink stroke that draws itself, and a recipe for building at this level with Claude.
Hoshigiku sells one thing: shun, the few days when an ingredient is at its absolute peak. So the page is built like an emaki — a Japanese handscroll — one continuous vertical journey through the eight courses of the July menu, dated in the old 72-microseason calendar (小暑 · 温風至, "the warm winds arrive") rather than in months. A single ink-brush stroke draws itself down the page as you scroll, swinging left and right to lead you from course to course the way a scroll painting leads the eye.
Sumi ink on textured washi, with persimmon as the working accent — plus a seasonal accent that shifts for every course, each one a named traditional Japanese color. The structure encodes the content: the color chip beside each course number is part of the menu, not decoration.
The eight course accents, in serving order:
Latin display and headings, weights 300–500. A garalde with sharp, calligraphic terminals — the closest a Latin face comes to a brush lifted cleanly off paper. Set large and light, never bolded.
Shippori Mincho B1 for all Japanese and for body text. A bookish mincho with real ink-trap warmth; its vertical set (CSS writing-mode: vertical-rl with text-orientation: upright) gives the course labels their hanging-scroll quality.
The signature is one SVG path that spans the whole menu section. It is generated in JavaScript after layout: each course contributes an anchor point on the side opposite its text, the anchors are joined with a Catmull-Rom spline converted to cubic Béziers, and the path is revealed with the classic dash trick, eased with a lerp so the ink has weight:
// anchors → spline → draw-on-scroll const d = catmullRomToBezier(anchorPoints); path.setAttribute('d', d); const len = path.getTotalLength(); path.style.strokeDasharray = len; // scroll sets a target; rAF chases it (ink has inertia) tgt = clamp((innerHeight*0.72 - menuTop) / menuHeight, 0, 1); cur += (tgt - cur) * 0.075; path.style.strokeDashoffset = len * (1 - cur);
Three copies of the same path are stacked to fake a loaded brush — a wide 12%-opacity “bleed”, the 6.5px body, and a dark 2.2px core — each roughened by an feTurbulence + feDisplacementMap filter so no edge is ever geometric:
<filter id="brush"> <feTurbulence type="fractalNoise" baseFrequency="0.015 0.28" seed="7"/> <feDisplacementMap in="SourceGraphic" scale="9"/> </filter>
Course names, the hero title 星菊 and the philosophy character 旬 are set with real vertical writing, not rotated text — glyphs stay upright and stack downward, exactly as on a hanging scroll:
.vert { writing-mode: vertical-rl; text-orientation: upright; }
The paper texture is two layered feTurbulence SVGs as data-URIs (fine grain + long horizontal fibres) fixed behind the page. The red seal is inline SVG stamped in with a spring-curve scale animation. Course numbers sit in “brush circles” — plain CSS borders with four unequal radii and a 2° rotation, so no two feel machine-drawn.
Photography: three images generated with gpt-image-2 (OpenAI) from written photographic briefs — the counter at dusk, the hassun tray, the mukōzuke in glass — then treated to match the palette.
A recipe for getting a site of this caliber out of Claude: