Kentong, Jadwal Ronda Beres

<arahan> Motion design UI kelas Dribbble untuk peluncuran aplikasi fiktif bernama Kentong, pengatur jadwal ronda malam satu RT. Satu bentuk, tanpa potongan: ubin ikon kuning, jendela obrolan, latar malam, dan notifikasi di akhir adalah elemen yang sama yang berubah ukuran, radius, dan warna. Kanvas krem hangat #FBF6E2, lalu abu hangat #E7E3D9, arang #2A2B27, malam #1D1E1B, satu aksen kuning #F2BD2B, tinta #1B1B19. Satu font UI yang bersih (Geist, dan Geist Mono untuk log). Semua gerak memakai spring dengan overshoot sangat kecil, teks masuk dan keluar dengan blur singkat. Ikon aplikasi berupa pixel art kentongan kayu bertali lengkap dengan pemukulnya, dengan garis bunyi "tok tok" yang berkedip mengikuti ketukan. Dilarang: easing memantul, ledakan partikel, glow, gradasi pada komponen UI, ikon dengan tebal garis berbeda, waktu mati, tampilan template. </arahan> <struktur> Durasi 20 detik, ketukan 120 BPM, selalu ada yang bergerak. 0-3,7 dtk: ubin ikon muncul di tengah lalu bergeser ke kiri, huruf "Kentong" masuk satu per satu dengan blur, baris "Gratis, ringan, tanpa iklan", lalu "pengatur jadwal ronda kampung" yang disapu stabilo kuning. Di bawah, satu baris mono kecil "versi 1.0 · Android dan iOS · satu RT, semua pos" menyeimbangkan komposisi. 3,7-9,4 dtk: kanvas jadi abu hangat, ikon piksel mengecil ke tengah ubin, lingkaran arang mengembang dari titik itu, dan ubin memanjang menjadi jendela obrolan gelap "grup warga rt 05". Judul "Ubah jadwal ronda yang ruwet jadi..." masuk per kata, kata "ruwet" miring abu-abu dan hurufnya bergoyang. Log obrolan diketik satu baris per ketukan (siapa jaga malam ini, tukar ke kamis, kunci pos dibawa siapa, 47 pesan belum dibaca), penghitung pesan terus naik, empat gelembung chat warga bermunculan di kiri dan kanan jendela, jendela bergetar kecil saat baris peringatan. 9,4-15,5 dtk: jendela meluas memenuhi layar dan warnanya menjadi malam. Enam kolom kartu fitur krem (Jadwal giliran, Tukar jaga, Kentongan, Peta pos, Laporan pagi, Kunci pos, Kas ronda, dan lainnya, masing-masing dengan ikon garis dalam kotak pastel) naik dari bawah dan terus bergulir berlawanan arah. Kamera mulai dekat di kolom kiri lalu mundur memperlihatkan seluruh dinding. Ikon aplikasi jatuh ke tengah, kartu di belakangnya sedikit surut dengan bayangan gelap tipis, dan frasa "serba beres." muncul di atas stabilo kuning. 15,5-20 dtk: malam mengecil kembali menjadi notifikasi gelap "Malam ini giliranmu, 22.00 sampai 02.00, Pos 2 bersama Mas Yoga" di kanvas krem, ikon pindah ke samping judul "Kentong" dengan baris "Ronda beres, kampung tenang." Kursor masuk dari dalam bingkai, menekan tombol "Siap jaga" tepat di ketukan, tombol berubah menjadi tanda centang "Tercatat", kentongan berbunyi dua kali berulang dengan ikon berdenyut, dan "kampung tenang." disapu stabilo. </struktur> <build> 1. Satu file HTML 1280x720, SVG dan CSS saja. Semua gaya dihitung dari waktu di dalam satu fungsi render(t): tanpa CSS transition, tanpa state yang terbawa antar frame. 2. Spring adalah step response bentuk tertutup. Nilai yang berganti target berkali-kali adalah jumlah satu spring per perubahan, jadi tetap fungsi murni dari waktu. 3. Dinding kartu ada di dalam bentuk yang sama dan dikunci ke layar, sehingga saat bentuk mengecil, dinding ikut terpotong masuk ke notifikasi. 4. Ikon kentongan digambar sebagai grid piksel 20x20 dari rect SVG dengan shape-rendering crispEdges, garis bunyinya terpisah agar bisa berkedip. </build> <jebakan> Teks yang berganti di dalam wadah yang sedang berubah bentuk butuh waktu masuk dan keluar sendiri agar tidak bertumpuk. Gelembung chat jangan menutupi isi jendela. Semua teks tetap di dalam bingkai dengan margin lega. </jebakan>