Kembali ke demoBUKU KOMPONEN KHUSUS TEMA INIEN

Kilau / DESAIN & KOMPONEN

Kilau
Disusun dari bagiannya sendiri.

Kartu cap di saku. Tukang cukur lingkungan menjaga pelanggan tetap dengan kartu cetak kecil yang dicap tiap potong; Kilau menjadikan kartu itu halamannya. Sisi depannya grafit dengan foil bergaris tiang merah yang berkilau saat dimiringkan, nama usaha, dan member contoh; sisi belakangnya kertas mutiara dengan sepuluh lingkaran cap, yang kesepuluh dilingkari merah sebagai sasaran. Tidak ada yang terbaca sebagai kartu bank: tanpa chip, nomor panjang, masa berlaku, atau tanda jaringan.

01 / Palet & tipografi

Grafit dan krom dari meja cukur, merah dari tiang, mutiara dari kartu cetak. Sisi depan adalah kartu ID-1 gelap (1,586:1) yang sisi kanannya membawa foil pelangi yang dipotong menjadi garis tiang miring; foil tidak pernah berada di bawah kolom teks. Cap terisi di belakang berupa lingkaran bergaris merah, yang kosong putus-putus dan bernomor. Pelangi hanya hiasan, tidak pernah membawa makna.

Meja krom#e8eaec
Grafit#1d2024
Merah tiang#b3242b
Krom lembut#dde1e6
Kartu mutiara#f7f5f0
Grafit redup#565c65

Bungee 400, digambar untuk papan nama vertikal kota seperti papan di depan pangkas rambut, menulis wordmark, judul, nama di kartu, dan jumlah cap; tetap terbaca di atas grafit dan di samping foil. DM Sans membawa label, tombol, dan teks bacaan dengan angka tabular. Rubik Mono One 400 tetap cadangan tercatat yang tidak dipakai.

02 / Komposisi & perilaku

Dua halaman, kartu dan Cara mencoba. Di 1440 kartu di kiri, sekitar 580px, dan panel 360px di kanan memuat pilihan sisi, Kilaukan sekali, dan cap contoh. Di bawah 760px terbaca judul → kartu selebar layar → panel. Jumlah cap dan catatan contoh juga ada di panel dalam ukuran baca, jadi huruf kecil di kartu tidak pernah menjadi satu-satunya sumber.

Kartu condong mengikuti pointer atau jari yang bergeser ke samping (paling jauh 8°, tilt bersama demo-kit) dan foil serta sorotnya ikut bergerak; gulir vertikal tetap milik peramban. Kilaukan sekali menyapu kartu sekali bolak-balik dalam 0,9 detik, untuk papan ketik. Membalik memutar kartu dalam 0,48 detik; cap baru ditera sekali. Dengan reduced motion — juga bila berubah saat halaman terbuka — kartu datar, foil diam, Kilaukan sekali disembunyikan, dan sisi berganti langsung.

Depan dan Belakang · cap adalah tombol aria-pressed; sisi yang tersembunyi dibuat inert dan fokus tetap di tombol. Teks di kartu diukur terhadap piksel foil yang sebenarnya, minimal 4,5:1, dan setiap faktanya diulang di panel. Menambah cap diumumkan di baris status; kartu penuh menjaga tombol tetap bisa difokus dan menyebut alasannya. Mulai ulang kartu bertanya dulu dan mengembalikan fokus.

03 / Kontrol hingga setiap detail

Dua halaman, kartu dan Cara mencoba. Di 1440 kartu di kiri, sekitar 580px, dan panel 360px di kanan memuat pilihan sisi, Kilaukan sekali, dan cap contoh. Di bawah 760px terbaca judul → kartu selebar layar → panel. Jumlah cap dan catatan contoh juga ada di panel dalam ukuran baca, jadi huruf kecil di kartu tidak pernah menjadi satu-satunya sumber.

Daftar komponen (gulir untuk memeriksa)

  1. 01
    Kartu member yang miring di bawah foil CSS

    Dua halaman, kartu dan Cara mencoba. Di 1440 kartu di kiri, sekitar 580px, dan panel 360px di kanan memuat pilihan sisi, Kilaukan sekali, dan cap contoh. Di bawah 760px terbaca judul → kartu selebar layar → panel. Jumlah cap dan catatan contoh juga ada di panel dalam ukuran baca, jadi huruf kecil di kartu tidak pernah menjadi satu-satunya sumber.

  2. 02
    Kartu cap: sepuluh cap, ke-11 gratis (contoh)

    Depan dan Belakang · cap adalah tombol aria-pressed; sisi yang tersembunyi dibuat inert dan fokus tetap di tombol. Teks di kartu diukur terhadap piksel foil yang sebenarnya, minimal 4,5:1, dan setiap faktanya diulang di panel. Menambah cap diumumkan di baris status; kartu penuh menjaga tombol tetap bisa difokus dan menyebut alasannya. Mulai ulang kartu bertanya dulu dan mengembalikan fokus.

  3. 03
    Kilaukan sekali, cara papan ketik melihat foil

    Demo Next.js statis dwibahasa. Foil murni CSS: gradien yang dipotong mask bergaris, posisinya dari tilt lewat sin(), dan properti kustom terdaftar untuk sapuan papan ketik — tanpa WebGL, canvas, atau orientasi perangkat. Jumlah cap disimpan sebagai { version: 1, stamps: 0–10 } dengan kunci collection-kilau-member-v1, paling besar 256 byte, divalidasi zod/mini sebelum setiap baca dan tulis.

  4. 04
    Cap tersimpan di peramban ini, tervalidasi

    Demo Next.js statis dwibahasa. Foil murni CSS: gradien yang dipotong mask bergaris, posisinya dari tilt lewat sin(), dan properti kustom terdaftar untuk sapuan papan ketik — tanpa WebGL, canvas, atau orientasi perangkat. Jumlah cap disimpan sebagai { version: 1, stamps: 0–10 } dengan kunci collection-kilau-member-v1, paling besar 256 byte, divalidasi zod/mini sebelum setiap baca dan tulis.

  5. 05
    Buku komponen dan status sendiri

    Demo Next.js statis dwibahasa. Foil murni CSS: gradien yang dipotong mask bergaris, posisinya dari tilt lewat sin(), dan properti kustom terdaftar untuk sapuan papan ketik — tanpa WebGL, canvas, atau orientasi perangkat. Jumlah cap disimpan sebagai { version: 1, stamps: 0–10 } dengan kunci collection-kilau-member-v1, paling besar 256 byte, divalidasi zod/mini sebelum setiap baca dan tulis.

  6. 06
    Personalisasi merek lokal

    Demo Next.js statis dwibahasa. Foil murni CSS: gradien yang dipotong mask bergaris, posisinya dari tilt lewat sin(), dan properti kustom terdaftar untuk sapuan papan ketik — tanpa WebGL, canvas, atau orientasi perangkat. Jumlah cap disimpan sebagai { version: 1, stamps: 0–10 } dengan kunci collection-kilau-member-v1, paling besar 256 byte, divalidasi zod/mini sebelum setiap baca dan tulis.

  7. 07
    Pilihan, tooltip & area gulir

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

  8. 08
    Ekspor & batasan

    Studi desain fiktif. Pangkas Tiang Merah tidak ada; member, nomor TM-0042, cap, dan potongan ke-11 gratis adalah contoh yang tidak berlaku di mana pun. Pengunjung menambah cap sendiri, jadi cap tidak membuktikan kunjungan. Kartunya tanpa chip, nomor panjang, masa berlaku, tanda jaringan, atau simbol nirsentuh.

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 Kilau.123
Tangkapan layar website asli. Ikuti catatan bernomor.
  1. 01

    Kartu member, bukan kartu bank

    Kartu grafit ID-1 dengan nama usaha, member contoh, dan nomor contoh pendek — tanpa chip, nomor panjang, masa berlaku, atau tanda jaringan. Brand pengunjung mengganti namanya dan mewarnai sisi depannya; member dan nomor tetap contoh berlabel.

  2. 02

    Foil menjauh dari teks

    Pelangi CSS yang dipotong menjadi garis tiang cukur bergerak mengikuti kemiringan hanya di kanan kartu, sehingga huruf terbaca minimal 4,5:1 pada piksel sebenarnya. Kilaukan sekali menyapunya dari papan ketik; reduced motion menahannya diam.

  3. 03

    Cap, dinyatakan dengan kata

    Panel mengulang isi kartu: jumlah cap, sisa cap, dan bahwa potongan ke-11 gratis hanyalah contoh. Menambah cap membalik kartu ke belakang; kartu penuh menyebutnya; penyimpanan yang gagal dilaporkan, tidak disembunyikan.

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.