The idea
The thick laminated menu book that lies on a family restaurant’s table, made readable on a screen. It keeps what makes it a book — a cover, chapters with tabs, a page number in the corner, a ribbon — and adds what paper cannot: an address for every page and a list view. The curl is the book’s own gesture, offered on request; the page underneath is always the real, readable page.
Visual language
A sambal-orange cover with a diagonal laminate gloss and a three-tier rantang mark, cream pages with rounded outer corners and a faint sheen, kecap-black ink, egg-yolk, blue and cream chapter tabs, a blue ribbon with a V-cut tail, dotted leaders to a blank price. Drawings are flat line art made for the study; there are no food photographs.
Typography
Rokkitt 700, a narrow geometric slab serif, sets the wordmark, chapter titles, dish names, codes, page numbers and the folio — the voice of a printed menu read across a table, narrow enough to keep a long dish name on one line. DM Sans carries descriptions, controls and notes. Zilla Slab 700 stays a recorded fallback that is not used.
Layout & composition
Two pages and a design book. The menu book shows the closed cover beside its contents, then two pages side by side from 1024px wide (a 1120px spread) and one page below that, under chapter tabs on the top edge; the book’s controls sit in the nameplate. Every page keeps one size, so a turn never moves the page around it. How to use is a column of numbered steps.
Motion & interaction
By default pages change at once, with no animation. After Open the book in 3D a page curls round a cylinder under the pointer or finger, with shade on the roll and a shadow beside it, and finishes or falls back within 0.45s; buttons, arrows and tabs play the same curl. Frames are drawn only while a sheet moves. With reduced motion 3D is not offered, and switching it on closes 3D.
Under the surface
A static bilingual Next.js demo. Every page is in the HTML; ?page= is read in the browser. The 3D curl is the installed Three.js, imported only on request: the sheet is a 64 × 48 grid bent on the CPU, its faces painted into canvas textures from the laid-out pages (word boxes, styles, borders, inline SVG), and the part still lying flat stays the DOM page, clipped at the fold. One ribbon is kept as { version: 1, ribbon } under collection-sanak-menu-v1, at most 256 bytes, validated with zod/mini.
Designed for everyone
Each page is an article with a heading; dishes are a list; the blank price is read as “Price not filled in”; heat has a word, never colour alone. Chapter tabs are a navigation with aria-current; the status line announces the pages and chapter; ←/→ work only while the book has focus. The canvas is hidden from assistive technology and holds no content of its own. List view shows every page for screen readers, find in page and zoom.
Inside the experience
- A laminated book with chapter tabs
- A link for every page (?page=)
- One ribbon kept in this browser
- Page curl in 3D, only on request
- List view and a print of every page
- Own component and state book
- Local brand personalization
A good fit for
- Family restaurants, home caterers and warung that already have a printed menu book and want one on the web that still feels held, shared page by page and printed again.
