Ynstellen: Morphing UI-steaten loop

Freegje my om: 8 oant 12 UI-steaten dy't ik de foarm hawwe wol (bygelyks knop, lader, spiler, slider, toggle, tabs, diagram, kommandopalet, toast), suver swart-wyt of ien aksintkleur, en in royaltyfrij ferske om de 120 BPM hinne (bygelyks Mixkit, fergees foar kommersjeel gebrûk).

UI-beweging op Dribbble-nivo. Ien foarm, nea snije: elke steat is itselde elemint dat syn grutte, radius en kleur feroaret, wylst de ynhâld wikselt mei in koarte wazigens. In kursor driuwt elke feroaring oan mei echte klikken en slepen. Ljocht waarmgriis doek, swart-wyt komponinten, ien skjin UI-lettertype (Geist). Oeral springen, in lytse oersjitte op syn heechst. De kamera zoomt sadat elke steat it frame follet. It lêste frame is it earste frame, dus it loopt.
Ferbean: bouncy easing, dieltsjebursts, gloeds, gradiënten op UI chrome, net-oerienkommende ikoanstreken, deade tiid, alles dat op in sjabloan liket.

120 BPM, 7 maten, op elke tel bart der wat.
Knop → lader → kontrolearje → dynamysk eilân → muzykspiler mei in spielje/pauze-morph → skrobje de foarútgongbalke → it wurdt in folumeslider dy't útrekt as er foarby it maksimum sleept wurdt → in wikselknop klapt op 'e beat → de knop wurdt in floeibere tab-yndikator → de ljepblêden iepenje yn in grafyk dy't himsels tekenet, mei in tooltip as jo deroerhinne sweve → it falt yn ⌘K → typ om te filterjen → enter → toast → werom nei de knop.

1. Ien HTML bestân, fjouwerkant 1440x1440. Elke styl wurdt berekkene út tiid binnen seek(t): gjin CSS oergongen, gjin timers, gjin steat dy't tusken frames oerdroegen wurdt.
2. Fearren binne stapreaksjes yn in sletten foarm. In wearde dy't it doel in protte kearen feroaret, is de som fan ien fear per feroaring, sadat it in suvere funksje fan tiid bliuwt.
3. De twa rânen fan 'e ljepperoanwizer ride op ferskillende fearren, sadat de foarste râne foar de efterste râne útrekt. Deselde trúk foar de kneppelknop.
4. Sleepbewegingen binne direkte manipulaasje: wylst de kursor yndrukt wurdt, wurdt de wearde berekkene fanút syn posysje. By it loslitten springt er werom fan wêr't er wie.
5. Analysearje it ferske mei numpy foar it beatraster en begjin op in delgeande beat. Plak elk UI-lûd by syn mjitten peak.
6. Renderje mei Playwright: 4 subframes per frame, mingd mei ffmpeg tmix foar bewegingswazigens by 60fps.
7. Render ien frame per beat foar de folsleine render. Ferbetterje alles bûten it raster, krap of lestich te lêzen.

Set nea will-change op eat dat de kamera skaalt of de tekst wazig makket. Tekst dy't wikselt binnen in morphing-kontener hat syn eigen ynfier- en útgongstiming nedich, oars oerlaapt it. Meitsje it lêste frame identyk oan it earste, ynklusyf de posysje en snelheid fan 'e kursor, oars hapert de loop.

Freegje my om de ynfier, en lit my dan de steatlist op it beatraster sjen foardat jo koade skriuwe.

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.

Oanfraach nommen fan peal @demonugc.