Kembali ke demoBUKU KOMPONEN KHUSUS TEMA INIEN

Sanak / DESAIN & KOMPONEN

Sanak
Disusun dari bagiannya sendiri.

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.

01 / Palet & tipografi

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.

Sampul oranye sambal#dc6224
Tinta kecap#1f1a17
Biru pita#24519a
Halaman laminasi#fff8ec
Tab kuning telur#f2c64b
Tab krem tua#ead8b6

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.

02 / Komposisi & perilaku

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.

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.

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.

03 / Kontrol hingga setiap detail

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.

Daftar komponen (gulir untuk memeriksa)

  1. 01
    Buku laminasi dengan tab bab

    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.

  2. 02
    Tautan untuk setiap halaman (?page=)

    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.

  3. 03
    Satu pita tersimpan di peramban ini

    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.

  4. 04
    Lipatan halaman 3D, hanya bila diminta

    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.

  5. 05
    Tampilan daftar dan cetak semua halaman

    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.

  6. 06
    Buku komponen dan status sendiri

    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.

  7. 07
    Personalisasi merek lokal

    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.

  8. 08
    Pilihan, tooltip & area gulir

    Perilaku papan ketik dibagikan; tema ini memiliki warna popup, batas, radius, tipografi, dan fokus sendiri.

  9. 09
    Ekspor & batasan

    Studi desain fiktif. Sanak, hidangan dan uraiannya ilustratif; harga sengaja dikosongkan, tidak ada yang dipesan, dan tidak ada pernyataan tentang status halal, gizi atau ketersediaan. Lengkungan 3D diperiksa dalam emulasi desktop dan ponsel (Chromium dan WebKit), bukan di ponsel nyata.

BACA KEPUTUSAN DESAIN

Mengapa disusun seperti ini.

Tangkapan layar menunjukkan pembuka yang diimplementasikan. Catatan menghubungkan komposisinya dengan pengalaman yang berfungsi dan perilaku di ponsel.

Tangkapan layar desktop asli demo Sanak.123
Tangkapan layar website asli. Ikuti catatan bernomor.
  1. 01

    Buku, bukan tayangan slide

    Sampul oranye sambal yang tertutup dengan daftar isi di sampingnya terbuka ke halaman berlaminasi: dua sekaligus mulai 1024px, satu di ponsel. Semua halaman ada di HTML dan punya tautan ?page= sendiri; tanpa JavaScript buku berupa daftar.

  2. 02

    Bab di tepi atas

    Empat tab laminasi berdiri di tepi atas dengan warna bab; bab yang terbuka terangkat dan bergaris (aria-current). Tab menambah langkah riwayat, jadi Kembali menuju bab sebelumnya.

  3. 03

    Tidak ada harga yang dikarang

    Setiap hidangan punya kode, nama Rokkitt, garis titik dan “Rp —”, dibacakan “Harga belum diisi”. Tanda pedas berupa cabai dengan kata. Lengkungan 3D, bila diminta, menekuk lembar di atas halaman asli di bawahnya.

04 / Kontrak formulir & respons

Catatan persiapan lokal. Coba kirim kosong, perbaiki, lalu ekspor masukanmu sendiri.

10–1.000 karakter. Disimpan pada halaman ini.

Catatan yang disiapkan akan muncul di sini.

05 / Komponen yang benar-benar bekerja

Aktifkan ruang kerja lengkap saat ingin memeriksanya. Kode interaksinya dimuat sesuai kebutuhan.