Instellen: Veranderende UI-statussen in een lus

Vraag me om: 8 tot 12 UI-statussen die ik voor de vorm wil (bijv. knop, laadindicator, speler, schuifregelaar, schakelaar, tabbladen, grafiek, commandopalet, toast), puur zwart-wit of één accentkleur, en een royaltyvrij nummer van ongeveer 120 BPM (bijv. Mixkit, gratis voor commercieel gebruik).

UI-animatie van Dribbble-niveau. Eén vorm, nooit doorgesneden: elke staat is hetzelfde element dat van grootte, straal en kleur verandert, terwijl de inhoud kortstondig vervaagt. Een cursor bestuurt elke verandering met echte klikken en slepen. Licht warmgrijs canvas, zwart-witte componenten, één strak UI-lettertype (Geist). Overal veren, hoogstens een kleine overschrijding. De camera zoomt in zodat elke staat het beeld vult. Het laatste beeld is het eerste beeld, dus het herhaalt zich.
Verboden: stuiterende overgangen, deeltjesuitbarstingen, gloedeffecten, verlopen in de UI-rand, niet-overeenkomende pictogramcontouren, dode tijd, alles wat op een sjabloon lijkt.

120 BPM, 7 maten, er gebeurt iets op elke tel.
Knop → laadscherm → controleren → dynamisch eiland → muziekspeler met een afspeel-/pauze-effect → schuif de voortgangsbalk → deze wordt een volumeschuifregelaar die uitrekt wanneer je hem voorbij het maximum sleept → een schakelaar die op de maat van de muziek omslaat → de knop wordt een vloeibare tabindicator → de tabs openen in een grafiek die zichzelf tekent, met een tooltip bij hover → deze klapt in tot ⌘K → typen om te filteren → enter → melding → terug naar de knop.

1. Eén HTML bestand, vierkant 1440x1440. Alle stijlen worden berekend op basis van de tijd binnen seek(t): geen CSS transities, geen timers, geen statusinformatie die tussen frames wordt overgedragen.
2. Springen zijn gesloten-vorm stapresponsies. Een waarde die vele malen van doel verandert, is de som van één spring per verandering, waardoor het een zuivere functie van de tijd blijft.
3. De twee randen van de lipindicator lopen over verschillende veren, waardoor de voorste rand voor de achterste uitsteekt. Hetzelfde trucje geldt voor de tuimelknop.
4. Slepen is een vorm van directe manipulatie: zolang de cursor wordt ingedrukt, wordt de waarde berekend op basis van de positie. Bij het loslaten springt de cursor terug naar de oorspronkelijke positie.
5. Analyseer het nummer met NumPy om het beatraster te bepalen en begin op de eerste tel. Plaats elk UI-geluid op de gemeten piekwaarde.
6. Renderen met Playwright: 4 subframes per frame, gemengd met ffmpeg tmix voor bewegingsonscherpte bij 60 fps.
7. Render één frame per beat voordat je de volledige rendering uitvoert. Corrigeer alles wat niet op het raster staat, te krap is of moeilijk leesbaar is.

Gebruik nooit de eigenschap 'will-change' op elementen die door de camera worden geschaald, anders wordt de tekst wazig. Tekst die binnen een morphing-container verandert, heeft een eigen timing nodig voor het begin en einde, anders overlapt de tekst. Zorg ervoor dat het laatste frame identiek is aan het eerste, inclusief cursorpositie en -snelheid, anders hapert de loop.

Vraag me eerst naar de invoergegevens en laat me vervolgens de lijst met toestanden op het beatgrid zien voordat je code schrijft.

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.

Aanwijzing afkomstig van na @demonugc.