Sesi Panahan dalam Satu Bentuk

<arah> Motion UI kelas Dribbble tentang satu sesi latihan panahan. Satu bentuk, tidak pernah dipotong: setiap keadaan adalah elemen yang sama yang berubah ukuran, radius, dan warna, sementara isinya berganti dengan blur singkat. Kursor menggerakkan setiap perubahan dengan klik dan seretan nyata. Kanvas abu hangat terang (#e7e4de), komponen hitam putih, satu font UI bersih (Geist). Spring di mana-mana, overshoot paling kecil. Kamera zoom supaya setiap keadaan memenuhi bingkai. Bingkai terakhir sama dengan bingkai pertama, jadi berulang mulus. Dilarang: easing memantul, ledakan partikel, glow, gradien di chrome UI, ketebalan garis ikon yang tidak seragam, waktu mati, apa pun yang terlihat seperti template. </arah> <struktur> 120 BPM, 14 detik, ada kejadian di setiap ketukan. Tombol "Mulai seri" dengan ikon target → pemuat → centang tergambar → pulau dinamis "Seri 6 · 70 m" dengan bar angin bergerak → klik, mengembang jadi kartu skor panahan, bukan pemutar musik: papan target besar sebagai pahlawan kartu, enam anak panah (batang dan bulu) melesat dan menancap satu per satu tepat di ketukan, batangnya bergetar lalu diam, chip skor X 10 9 9 8 10 terisi bersamaan, skor naik ke 56 / 60 dengan hitungan "6 / 6 anak panah" → satu tombol bulat play berubah jadi pause untuk jam seri "Waktu seri · Sisa 3:07" → seret bilah jam seri → isian putih bilah itu menjadi slider tarikan busur yang meregang saat ditarik melewati batas lalu kembali dengan spring, kamera tetap memusatkan pil termasuk regangannya → isian menyusut jadi kenop sakelar "Koreksi angin" yang menyala tepat di ketukan → kenop menjadi indikator tab cair (Hari ini, Pekan, Bulan); label di bawah indikator putih selalu berubah hitam karena salinan label hitam dipotong persis oleh tepi indikator → tab membuka grafik garis "Total sesi 313 poin, Rata-rata 52,2" dengan sumbu skor 48/52/56 yang menggambar dirinya sendiri, tooltip "Seri 4 · 54" saat kursor melayang → menyusut jadi palet perintah ⌘K putih → ketik "jadw" untuk menyaring daftar → klik → toast "Jadwal tersimpan" → kembali ke tombol. </struktur> <build> 1. Satu file HTML persegi 960x960, DOM dan SVG. Setiap gaya dihitung dari waktu di dalam seek(t): tanpa CSS transition, tanpa state yang terbawa antarframe. 2. Spring berupa step response bentuk tertutup. Nilai yang berganti target berkali-kali adalah jumlah satu spring per perubahan, jadi tetap fungsi murni dari waktu. 3. Dua tepi indikator tab dan kenop sakelar memakai spring berbeda, sehingga tepi depan meregang mendahului tepi belakang. 4. Seretan adalah manipulasi langsung: selama kursor ditahan, nilai dihitung dari posisinya. Saat dilepas, nilai kembali dengan spring dari posisi terakhir. 5. Isian putih bilah waktu, isian slider, kenop sakelar, dan indikator tab adalah satu elemen yang sama. </build> <jebakan> Jangan pasang will-change pada apa pun yang diskalakan kamera. Teks yang berganti di dalam wadah yang berubah bentuk butuh waktu masuk dan keluar sendiri supaya tidak bertumpuk. Bingkai terakhir harus identik dengan bingkai pertama, termasuk posisi kursor. </jebakan>