Formförvandling genom UI-tillstånd

Fråga mig om: 8 till 12 UI-tillstånd jag vill att formen ska bli (t.ex. knapp, laddare, spelare, skjutreglage, växling, flikar, diagram, kommandopalett, toast), rent svartvitt eller en accentfärg, och en royaltyfri låt runt 120 BPM (t.ex. Mixkit, gratis för kommersiellt bruk).

UI-rörelser på Dribbble-nivå. En form, aldrig klippt: varje tillstånd är samma element som förändrar storlek, radie och färg medan dess innehåll byts ut med en kort oskärpa. En markör styr varje ändring med riktiga klick och drag. Ljus varmgrå arbetsyta, svartvita komponenter, ett rent UI-teckensnitt (Geist). Fjädrar överallt, en liten översvängning som mest. Kameran zoomar så att varje tillstånd fyller hela bilden. Den sista bilden är den första bilden, så den loopar.
Bannad: studsande lättnader, partikelbursts, glöd, gradienter i UI-krom, felaktiga ikonstreck, dödtid, allt som ser ut som en mall.

120 BPM, 7 takter, något händer i varje slag.
Knapp → laddare → kolla → dynamisk ö → musikspelare med en spela/pausa-morf → skrubba förloppsindikatorn → det blir ett volymreglage som sträcker sig när det dras förbi max → en växling vänds i takten → ratten blir en flytande tabbindikator → flikarna öppnas i ett diagram som ritar sig själva, med en verktygstips när du hovrar över det → det kollapsar till ⌘K → skriv för att filtrera → enter → rosta → tillbaka till knappen.

1. En HTML fil, kvadratisk 1440x1440. Varje stil beräknas utifrån tiden inuti seek(t): inga CSS övergångar, inga timers, inget tillstånd som överförs mellan bildrutor.
2. Fjädrar är slutna stegsvar. Ett värde som ändrar målet många gånger är summan av en fjäder per förändring, så det förblir en ren funktion av tiden.
3. Flikindikatorns två kanter löper på olika fjädrar, så den främre kanten sträcker sig framför den bakre. Samma trick för vippknoppen.
4. Dragningar är direkt manipulation: medan markören hålls nere beräknas värdet från dess position. När den släpps fjädrar den tillbaka från var den befann sig.
5. Analysera låten med numpy för taktslagsrutnätet och börja på ett nedåtgående taktslag. Placera varje UI-ljud vid dess uppmätta topp.
6. Rendera med Playwright: 4 delbildrutor per bildruta, blandat med ffmpeg tmix för rörelseoskärpa vid 60fps.
7. Rendera en bildruta per taktslag innan den fullständiga renderingen. Fixa allt som är utanför rutnätet, trångt eller svårt att läsa.

Använd aldrig will-change på något som kameran skalar eller texten gör suddigt. Text som växlar inuti en morphing-behållare behöver sin egen ingångs- och utgångstid, annars överlappar den. Gör den sista bildrutan identisk med den första, inklusive markörens position och hastighet, annars hackar loopen.

Be mig om indata, visa mig sedan tillståndslistan i taktrutnätet innan du skriver någon kod.

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.

Uppmaning hämtad från posta @twoclipping.