Dari Tombol Menjadi Roti

<arahan> Motion UI kelas Dribbble tentang membuat satu roti bundar. 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 (#E3DFD8), komponen hitam (#141414) dan putih, satu warna aksen kulit roti (#B26C31), satu font UI bersih (Geist, angka memakai Geist Mono). Spring di mana-mana, overshoot paling kecil. Kamera zoom supaya setiap tahap memenuhi bingkai dan mengikuti kursor sedikit. 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, 10 bar (20 detik), ada kejadian di setiap ketukan. Tombol hitam "Buat roti" diklik, lalu menjadi kartu putih "Bahan": tepung terigu 500 g, air hangat 320 g, ragi instan 7 g, garam 10 g. Kursor mencentang satu baris per ketukan, angka timbangan naik, garis progres terisi sampai total adonan 837 g dan label berubah menjadi "Lengkap". Kartu menyusut menjadi bola adonan krem berbintik. Kursor menarik adonan ke kanan, menariknya ke atas, lalu menekannya ke bawah (chip "Uleni" dengan tiga titik terisi satu per satu); setiap dilepas, adonan kembali dengan spring yang sedikit bergoyang. Chip berubah menjadi "Adonan kalis", kursor mengkliknya, timer "Diamkan" berjalan 60 menit, cincin titik bertanda 2× tergambar di sekeliling adonan, dan adonan mengembang satu langkah per ketukan sampai mengisi cincin yang lalu menjadi garis hitam utuh ("Mengembang 2×"). Adonan berubah menjadi kenop putih "Suhu oven": kursor memutar pegangannya dari 0 ke 220°C, garis skala menyala satu per satu dengan warna aksen, lalu muncul "Oven siap". Kenop menjadi roti bundar. Kursor menggores satu sayatan melengkung ("Gores adonan"), lalu timer "Panggang" menghitung mundur 30 menit sementara kulit roti menguning lalu cokelat per ketukan, roti sedikit mengembang, sayatannya merekah menjadi telinga roti berwarna remah terang, dan taburan tepung putih terlihat. Chip menjadi "Matang", lalu kursor mengetuk roti. Roti menyusut menjadi toast hitam "Roti bundar siap" (220°C · 30 menit · 837 g) dengan ikon roti kecil dan garis waktu yang menyusut. Kursor mengklik "Ulangi" dan bentuk 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. Tarikan adalah manipulasi langsung: selama kursor ditekan, lebar, tinggi, dan posisi adonan dihitung dari posisi kursor (tepi yang dipegang mengikuti kursor, sisi lain menyusut supaya volume terasa tetap). Saat dilepas, adonan kembali dengan spring dari posisi terakhirnya. 4. Sayatan roti adalah kurva Bezier. Kursor dan goresan memakai tabel panjang busur yang sama, jadi ujung goresan selalu tepat di bawah kursor. 5. Kenop suhu: pegangan mengikuti sudut kursor, suhu adalah sudut yang dipetakan ke 0 sampai 250°C. </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>