Menyiapkan: Loop perubahan status UI

Minta saya untuk: 8 hingga 12 status UI yang saya inginkan untuk bentuk tersebut (misalnya tombol, loader, pemutar, slider, toggle, tab, grafik, palet perintah, toast), warna hitam dan putih murni atau satu warna aksen, dan lagu bebas royalti sekitar 120 BPM (misalnya Mixkit, gratis untuk penggunaan komersial).

Animasi UI ala Dribbble. Satu bentuk, tidak pernah terpotong: setiap keadaan adalah elemen yang sama yang mengubah ukuran, radius, dan warnanya sementara kontennya berganti dengan efek buram singkat. Kursor menggerakkan setiap perubahan dengan klik dan seret sungguhan. Kanvas abu-abu hangat terang, komponen hitam dan putih, satu font UI yang bersih (Geist). Pegas di mana-mana, paling banyak sedikit overshoot. Kamera memperbesar sehingga setiap keadaan memenuhi bingkai. Bingkai terakhir adalah bingkai pertama, sehingga berulang.
Dilarang: efek transisi yang terlalu halus, semburan partikel, cahaya redup, gradien pada elemen antarmuka pengguna, goresan ikon yang tidak serasi, waktu jeda, apa pun yang terlihat seperti templat.

120 BPM, 7 bar, sesuatu terjadi di setiap ketukan.
Tombol → pemuat → periksa → pulau dinamis → pemutar musik dengan perubahan putar/jeda → geser bilah kemajuan → berubah menjadi penggeser volume yang meregang saat diseret melewati maksimum → sakelar beralih sesuai irama → kenop menjadi indikator tab cair → tab terbuka menjadi grafik yang menggambar dirinya sendiri, dengan tooltip saat diarahkan kursor → menyusut menjadi ⌘K → ketik untuk memfilter → enter → toast → kembali ke tombol.

1. Satu file HTML, persegi 1440x1440. Setiap gaya dihitung dari waktu di dalam seek(t): tidak ada transisi CSS, tidak ada timer, tidak ada status yang dibawa antar frame.
2. Spring adalah respons langkah bentuk tertutup. Nilai yang mengubah target berkali-kali adalah jumlah dari satu spring per perubahan, sehingga tetap menjadi fungsi murni terhadap waktu.
3. Kedua sisi indikator tab menggunakan pegas yang berbeda, sehingga sisi depan membentang lebih dulu daripada sisi belakang. Trik yang sama berlaku untuk kenop sakelar.
4. Seret adalah manipulasi langsung: selama kursor ditahan, nilai dihitung dari posisinya. Saat dilepaskan, kursor akan kembali ke posisi semula.
5. Analisis lagu dengan numpy untuk mendapatkan grid ketukan dan mulai dari ketukan pertama. Tempatkan setiap suara UI sesuai dengan puncak yang terukur.
6. Render dengan Playwright: 4 subframe per frame, dicampur dengan ffmpeg tmix untuk efek blur gerakan pada 60fps.
7. Render satu frame per ketukan sebelum rendering penuh. Perbaiki apa pun yang berada di luar grid, terlalu sempit, atau sulit dibaca.

Jangan pernah menambahkan "will-change" pada apa pun yang diperbesar atau teks yang dihasilkan menjadi buram oleh kamera. Teks yang berganti di dalam wadah morphing membutuhkan pengaturan waktu masuk dan keluar tersendiri agar tidak tumpang tindih. Buat bingkai terakhir identik dengan bingkai pertama, termasuk posisi dan kecepatan kursor, agar loop tidak tersendat.

Mintalah input kepada saya, lalu tunjukkan daftar negara bagian pada beat grid sebelum Anda menulis kode apa pun.

Ask me for: 8 to 12 UI states I want the shape to become (e.g. button, loader, player, slider, toggle, tabs, chart, command palette, toast), pure black and white or one accent color, and a royalty-free song around 120 BPM (e.g. Mixkit, free for commercial use).

Dribbble-level UI motion. One shape, never cut: every state is the same element morphing its size, radius and color while its content swaps with a short blur. A cursor drives every change with real clicks and drags. Light warm-gray canvas, black and white components, one clean UI font (Geist). Springs everywhere, a tiny overshoot at most. The camera zooms so each state fills the frame. The last frame is the first frame, so it loops.
Banned: bouncy easing, particle bursts, glows, gradients on UI chrome, mismatched icon strokes, dead time, anything that looks like a template.

120 BPM, 7 bars, something happens on every beat.
Button → loader → check → dynamic island → music player with a play/pause morph → scrub the progress bar → it becomes a volume slider that stretches when dragged past max → a toggle flips on the beat → the knob becomes a liquid tab indicator → the tabs open into a chart that draws itself, with a tooltip on hover → it collapses into ⌘K → type to filter → enter → toast → back to the button.

1. One HTML file, square 1440x1440. Every style is computed from time inside seek(t): no CSS transitions, no timers, no state carried between frames.
2. Springs are closed-form step responses. A value that changes target many times is the sum of one spring per change, so it stays a pure function of time.
3. The tab indicator's two edges ride different springs, so the leading edge stretches ahead of the trailing one. Same trick for the toggle knob.
4. Drags are direct manipulation: while the cursor is held, the value is computed from its position. On release it springs back from wherever it was.
5. Analyze the song with numpy for the beat grid and start on a downbeat. Place every UI sound by its measured peak.
6. Render with Playwright: 4 subframes per frame, blended with ffmpeg tmix for motion blur at 60fps.
7. Render one frame per beat before the full render. Fix anything off the grid, cramped or hard to read.

Never put will-change on anything the camera scales or the text renders blurry. Text that swaps inside a morphing container needs its own enter and exit timing or it overlaps. Make the last frame identical to the first, cursor position and speed included, or the loop stutters.

Ask me for the inputs, then show me the state list on the beat grid before you write any code.

Petunjuk diambil dari pos @demonugc.