SUMI

SUMI is a fourteen-seat sushi counter on Britton Street, Clerkenwell. Nine courses at £145 a head, two seatings a night at 18:00 and 20:45, three courses finished over white binchotan. There is no dining room in the usual sense: there is a counter, and the quiet around it.

Nobody books a room like this because the food was described accurately. They book because they can already feel the length of hinoki and the chef three feet away. So the site has two jobs: make the room feel inevitable, then make the booking obvious.

墨 is ink. 炭 is charcoal. In Japanese they are the same syllable, sumi, and that homophone is the whole design. A calligrapher makes one mark and cannot take it back; a sushi chef draws the yanagiba through the fish in one pull, and the face it leaves is the surface you eat.

So the page is a sheet of ink-black paper and a brush is put to it. The first screen is only paper: the name at 302px, one stroke, the two characters inscribed down the right. On the first scroll the brush opens the sheet, and what is under the ink is the charcoal.

Every mark on the page is a filled contour, never a stroked line, because a stroked path has one width and one width is a rule. The contours are generated from a centreline and a half-width: a pressed entry, a 74-unit belly, seeded edge noise and seven dry streaks cut out as voids, because a brush running out of ink splits rather than fades. The mask that paints each one has a dry-brush front, hairs and bundles of every length generated as one outline, so the wet edge reads as a brush rather than a ruler or a row of teeth.

The hero stroke is drawn once, in 1.9 seconds, by a CSS animation that starts at first paint. Hydration never touches it, which fixed the old build's worst habit: a finished stroke that vanished at hydration and drew itself a second time.

The fire is seen through one enormous stroke, 一 on a landscape screen and a broad vertical on a phone. As the section rises, a bristle-edged wipe drags that stroke across the sheet, scrubbed to the scroll with no easing. The stroke's ragged edge is where photograph meets ink, so nothing is set on the picture.

The nine courses are the one pinned moment. The stroke is the spine; each course number is set at 173px in vermilion, each plate stands at full stage height, and each new plate is laid over the last by the same brush wipe, from the spine side going down and the other way going up. The ticks come out from under the ink and double as an index: once the brush has passed a course, its tick stays made, and it is a button that takes you back to it. At the foot of the page the brush returns once more: the hero's stroke laid on its side across the page in washi, with the counter's hours under it.

The knife gets one pass. So does the page.

The booking is made on the counter itself: one stroke of hinoki with fourteen seats hanging off it. Twelve are booked at each seating; the two at the stroke's dry end sit behind a dashed divider under a bracket that reads "walk-ins only, from 18:00", and can never be chosen. A party is a run of one to eight seats side by side, anywhere along the twelve. A seat beside the party adds a guest, a seat at either end gives it back, any other seat moves the party there, and the line under the counter says which before the press and what happened after it. At eight the + goes dashed and the rule under the numeral says why: the counter is shared, never hired whole.

The seating is two plates, the date is the case's own calendar offering only open evenings (Tuesday to Saturday, up to the end of next month), and every choice is read back on a reservation card: two guests at the counter, seats 06 and 07, £290 for the omakase, £100 held at booking. On a phone the counter stands on its end, one 44px row per seat, because fourteen seats do not fit across 390px. The counter is a listbox the keyboard walks seat by seat, and the rules live in two small tested modules, down to a random walk of 2,000 presses that never reaches a ninth seat.

The form validates for real, puts the keyboard on the first field to fix, and sends nothing. The success panel leads with the disclosure, then reprints the booking over the same counter with your seats filled. Every colour pair was computed, not eyeballed: the placeholder grey and the vermilion button label both failed AA once, and both were moved before anything shipped.

Next.js App Router, React 19, TypeScript strict, Tailwind v4 plus the case's own stylesheet. GSAP ScrollTrigger scrubs the fire and the courses; Lenis smooths the scroll. The nine courses stick with CSS over a server-rendered run rather than a GSAP pin, which scored a full layout shift on every pass. The case imports nothing from sharphaw.com and adds no dependency.

Motion is armed by an inline script before first paint, so the server HTML is always the finished page. Without JavaScript, or with reduced motion, the stroke is drawn, the fire sits in its stroke, and the courses become a list with every plate. The mincho and gothic are local subsets, and prices are set in the mincho because the gothic's pound sign is full-width.