Gagasannya
Buku menu laminasi tebal yang tergeletak di meja rumah makan keluarga, dibuat terbaca di layar. Yang membuatnya buku tetap ada — sampul, bab bertab, nomor halaman di sudut, pita — ditambah yang tidak bisa dilakukan kertas: alamat untuk setiap halaman dan tampilan daftar. Lengkungan adalah gerak buku itu sendiri, ditawarkan bila diminta; halaman di bawahnya selalu halaman asli yang terbaca.
Bahasa visual
Sampul oranye sambal dengan kilau laminasi diagonal dan lambang rantang tiga susun, halaman krem bersudut luar membulat dengan kilau tipis, tinta hitam kecap, tab bab kuning telur, biru dan krem, pita biru berekor bertakik V, garis titik menuju harga kosong. Gambar berupa garis datar yang dibuat untuk studi ini; tidak ada foto makanan.
Tipografi
Rokkitt 700, slab serif geometris yang agak sempit, menulis wordmark, judul bab, nama hidangan, kode, nomor halaman dan folio — suara buku menu cetak yang dibaca dari seberang meja, cukup sempit agar nama hidangan panjang muat satu baris. DM Sans membawa uraian, kendali dan catatan. Zilla Slab 700 tetap cadangan tercatat yang tidak dipakai.
Tata letak & komposisi
Dua halaman dan buku desain. Buku menu menampilkan sampul tertutup di samping daftar isinya, lalu dua halaman berdampingan mulai lebar 1024px (bentang 1120px) dan satu halaman di bawahnya, di bawah tab bab di tepi atas; kendali buku berada di pelat nama. Setiap halaman satu ukuran, jadi membalik tidak pernah menggeser halaman di sekitarnya. Cara memakai berupa kolom langkah bernomor.
Gerak & interaksi
Secara bawaan halaman berganti langsung, tanpa animasi. Setelah Buka buku 3D, halaman melengkung mengitari silinder di bawah pointer atau jari, dengan bayangan di gulungan dan di sampingnya, lalu selesai atau kembali dalam 0,45 detik; tombol, panah dan tab memutar lengkungan yang sama. Frame hanya digambar selama lembar bergerak. Dengan reduced motion 3D tidak ditawarkan, dan menyalakannya menutup 3D.
Di balik layar
Demo Next.js statis dwibahasa. Semua halaman ada di HTML; ?page= dibaca di peramban. Lengkungan 3D memakai Three.js yang sudah terpasang, diimpor hanya bila diminta: lembar berupa grid 64 × 48 yang ditekuk di CPU, kedua mukanya dilukis ke tekstur kanvas dari halaman yang sudah tertata (kotak kata, gaya, garis, SVG inline), dan bagian yang masih datar tetap halaman DOM, dipotong di garis lipat. Satu pita disimpan sebagai { version: 1, ribbon } dengan kunci collection-sanak-menu-v1, paling besar 256 byte, divalidasi zod/mini.
Dirancang untuk semua
Setiap halaman berupa article dengan heading; hidangan berupa daftar; harga kosong dibacakan “Harga belum diisi”; tanda pedas punya kata, tidak pernah warna saja. Tab bab berupa navigasi dengan aria-current; baris status mengumumkan halaman dan bab; ←/→ hanya bekerja saat buku difokus. Kanvas disembunyikan dari teknologi bantu dan tidak memuat isi sendiri. Tampilan daftar menampilkan semua halaman untuk pembaca layar, cari di halaman dan zoom.
Di dalam pengalaman
- Buku laminasi dengan tab bab
- Tautan untuk setiap halaman (?page=)
- Satu pita tersimpan di peramban ini
- Lipatan halaman 3D, hanya bila diminta
- Tampilan daftar dan cetak semua halaman
- Buku komponen dan status sendiri
- Personalisasi merek lokal
Cocok untuk
- Rumah makan keluarga, katering rumahan dan warung yang sudah punya buku menu cetak dan ingin versi web yang tetap terasa dipegang, dibagikan per halaman dan dicetak ulang.
