Satu Bentuk Menuju Tidur Lelap

<arahan> Promo produk motion UI kelas Dribbble untuk aplikasi tidur fiktif bernama Lelap, dibangun dari UI-nya sendiri, bukan komponen generik. Satu bentuk, tanpa potongan: setiap tahap adalah elemen yang sama yang berubah ukuran, radius sudut, dan warnanya, sementara isinya berganti dengan blur singkat. Kursor menggerakkan setiap perubahan dengan klik dan tarikan sungguhan. Kanvas abu-abu hangat (#EAE6E0), komponen hitam (#111111) dan putih, satu warna aksen jingga lampu tidur (#FD9543) beserta tint-nya, font Geist dengan angka tabular. Ikon garis buatan sendiri dengan ketebalan sama. Spring di mana-mana, overshoot paling kecil. Kamera zoom supaya setiap tahap memenuhi sekitar 80% lebar bingkai dan sedikit mengikuti kursor. Frame terakhir sama dengan frame pertama, jadi videonya bisa diputar berulang. Dilarang: easing yang memantul, partikel, glow, gradien pada UI, ikon dengan ketebalan garis berbeda, waktu mati, tampilan template. </arahan> <struktur> 120 BPM, 10 bar (20 detik), ada kejadian di setiap ketukan. Tombol hitam "Siapkan malam ini" dengan ikon bulan diklik, menyusut menjadi lingkaran putih dengan pemuat jingga yang berputar, lalu menjadi lingkaran hitam dengan centang yang tergambar. Lingkaran memanjang menjadi kolom perintah: placeholder "Mau tidur seperti apa malam ini?" diganti ketikan "Bangun segar jam 5 pagi", tombol kirim berubah hitam dan diklik. Kolom menjadi pulau hitam "Membaca 30 malam terakhir" dengan angka yang menghitung naik. Pulau mekar menjadi kartu "Cocok untuk tidurmu" berisi dinding 24 suara pengantar tidur dalam dua kolom ubin besar (ombak, kipas angin, derau, hutan pinus, kereta malam, dan lainnya) dengan ikon, kategori, dan gelombang mini. Kursor menyentil dinding ke atas, gulirannya meluncur dengan momentum lalu berhenti tepat di "Hujan di Genteng". Ubin itu berubah hitam bercincin jingga dengan label jingga pekat "Paling cocok", ubin lain meredup. Kursor mengkliknya dan gelombangnya ikut berdenyut jingga. Kartu menjadi penggeser "Matikan suara setelah" dengan skala 5, 20, 35, 60: kursor menarik kenop dari 20 mnt ke 60 mnt, label "MAKS" muncul, tarikan melewati batas sehingga trek dan kartu ikut melar, lalu dilepas dan kembali dengan spring. Kartu menjadi sakelar "Alarm pintar, bangun saat tidur ringan": diklik, kenop melar karena tepi depannya mendahului, trek berubah jingga. Kenop putih itu mengalir menjadi indikator tab hitam di baris tab Detak, Napas, Tahapan, Dengkur; kursor mengklik Tahapan dan indikator meregang seperti cairan, teks di bawahnya berganti putih tepat di tepinya. Baris tab menjadi kepala kartu grafik: total "7 j 42 m" menghitung naik dengan menit dua digit, lencana jingga "+18 mnt dari rata-rata", hipnogram berupa satu garis bertangga hitam bersudut tegas di atas pita warna per tahap (Terjaga hitam tipis, REM, Ringan, dan Dalam dalam skala tint jingga) tergambar dari kiri ke kanan dari jam 21.00 sampai 05.00, legenda durasi keempat tahap, lalu kursor menyusuri grafik dengan tooltip jam dan tahap yang ikut berganti. Grafik menyusut menjadi palet perintah dengan tombol ⌘ K yang tertekan, ketikan "alarm", hasil "Geser alarm ke 05.15" diklik. Palet menjadi toast hitam "Alarm digeser ke 05.15" dengan tautan "Urungkan", lalu kembali menjadi tombol awal. </struktur> <build> 1. Satu file HTML, persegi 960x960, HTML/CSS dan SVG saja. Semua gaya dihitung dari waktu di dalam render(t): tanpa CSS transition, tanpa state yang terbawa antar frame. 2. Spring adalah step response bentuk tertutup. Nilai yang targetnya berubah berkali-kali adalah jumlah satu spring per perubahan, jadi tetap fungsi murni dari waktu. 3. Kenop sakelar dan indikator tab adalah satu elemen yang sama; kedua tepinya menunggang spring berbeda sehingga tepi depan meregang mendahului. 4. Tarikan adalah manipulasi langsung: selama ditekan, nilai mengikuti kursor; saat dilepas, nilai kembali dengan spring dari posisi terakhirnya. Sentilan dinding suara diteruskan dengan peluruhan eksponensial yang kecepatannya sama dengan kecepatan saat dilepas. 5. Teks putih pada tab memakai salinan kedua yang dipotong clip-path mengikuti kotak indikator. </build> <jebakan> Jangan pakai will-change pada apa pun yang di-scale kamera. Teks yang berganti butuh waktu masuk dan keluar sendiri. Samakan frame terakhir dengan frame pertama, termasuk posisi kursor, supaya putaran ulang tidak tersendat. </jebakan>