twc-031 / Studi oleh Syafril · bukan proyek klien
Kartu member untuk pangkas rambut fiktif, Pangkas Tiang Merah: miringkan untuk menangkap foil holografik yang dipotong menjadi garis tiang cukur, balik ke kartu capnya, dan tambah cap contoh — sepuluh, lalu potongan ke-11 gratis, sebagai contoh yang tidak berlaku di mana pun. Hanya jumlah cap yang disimpan, di peramban ini; tanpa poin, harga, pass dompet digital, atau fitur pembayaran.
BACA KEPUTUSAN DESAIN
Tangkapan layar menunjukkan pembuka yang diimplementasikan. Catatan menghubungkan komposisinya dengan pengalaman yang berfungsi dan perilaku di ponsel.
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.
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.
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.
#e8eaec#1d2024#b3242b#dde1e6#f7f5f0#565c65YANG TERSEDIA / LANGKAH BERIKUTNYA
Kartu loyalitas di halaman, bukan di aplikasi.
Alat ini mencakup ruang kerja yang berfungsi dan buku komponen sendiri. Kontrolnya mengolah status lokal.
Ekspor dibuat di browser Anda. Tidak terhubung dengan akun, penyimpanan awan, atau layanan eksternal.
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.
Cakupan halaman, aset merek, konten, serah terima, hosting, biaya, dan dukungan dibahas lewat konsultasi sebelum pengerjaan dimulai. Demo menjadi referensi untuk percakapan tersebut.
Siapkan brief untuk arah iniKartu 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.
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.
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.
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.
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.
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.
Kartu nama digital untuk usaha kecil.
Pilih jalur, simpan kartunya.