Pesan Galon dalam Satu Bentuk

<arahan> Motion UI kelas Dribbble tentang memesan air galon isi ulang lewat aplikasi fiktif Teguk. 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 terang (#ECEAE5), komponen hitam (#111110) dan putih, satu warna aksen biru air (#2F6BFF), satu font UI bersih (Geist). Spring di mana-mana, overshoot paling kecil. Kamera zoom supaya setiap tahap mengisi bingkai. Frame terakhir sama dengan frame pertama, jadi videonya bisa diputar berulang. Dilarang: easing yang memantul, ledakan partikel, glow, gradien pada UI, ikon dengan ketebalan garis berbeda, waktu mati, tampilan template. </arahan> <struktur> 120 BPM, 7 bar (14 detik), ada kejadian di setiap ketukan. Tombol hitam "Pesan galon" dengan ikon tetes air diklik, lalu menyusut menjadi pemuat bulat dengan busur berputar, berubah biru dengan centang yang tergambar sendiri. Centang melebar menjadi pulau hitam "Depot terdekat ditemukan" dengan titik biru berdenyut dan jarak 600 m. Kursor mengkliknya dan pulau membuka menjadi kartu putih "Pilih isi galon" dengan tiga tab: Isi ulang, Mineral, Galon baru. Indikator tab hitam bergerak seperti cairan, tepi depannya meregang lebih dulu. Setiap kali tab berganti, air di dalam ilustrasi galon bergoyang dan harganya berganti (Rp 6.000, Rp 21.000, Rp 55.000). Kursor menekan "Lanjut", kartu menjadi slider hitam "Jumlah galon". Kursor menarik kenop dari 1 sampai melewati batas 5: lintasan dan bentuknya melar dan muncul label "maks.", lalu ditarik kembali ke 3 galon dan dilepas. Slider menjadi sakelar putih "Antar sampai dapur" yang dinyalakan tepat di ketukan; kenopnya meregang saat berpindah dan lintasannya berubah biru. Sakelar membuka menjadi grafik "Galon per minggu": enam batang tumbuh berurutan, kursor menyorot batang terakhir dan tooltip "Minggu ini, 4 galon" muncul. Grafik menyusut menjadi toast hitam "Kurir berangkat, tiba ± 12 menit" dengan garis waktu yang menyusut, 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. Dua tepi indikator tab dan kenop sakelar memakai spring yang berbeda, jadi tepi depan meregang mendahului tepi belakang. 4. Tarikan adalah manipulasi langsung: selama kursor ditekan, nilai slider dihitung dari posisinya, dan tarikan melewati batas membuat lintasan melar secara elastis. </build> <jebakan> Jangan pakai will-change pada apa pun yang di-scale kamera, teks jadi buram. Teks yang berganti di dalam wadah yang sedang berubah butuh waktu masuk dan keluar sendiri supaya tidak bertumpuk. Frame terakhir harus identik dengan frame pertama, termasuk posisi kursor. </jebakan>