Elementi UI 3D interattivi che si trasformano fluidamente l'uno nell'altro, guidati da un cursore

Prompt

<inputs>
Chiedimi: da 8 a 12 stati UI in cui voglio trasformare la forma (ad es. pulsante, loader, player, slider, toggle, schede, grafico, tavolozza dei comandi, toast), bianco e nero puri oppure un unico colore d’accento, e una canzone royalty-free intorno ai 120 BPM (ad es. Mixkit, gratuita per uso commerciale).
</inputs>

<direction>
Motion UI di livello Dribbble. Una sola forma, mai tagliata: ogni stato è lo stesso elemento che trasforma dimensioni, raggio e colore, mentre il contenuto cambia con un breve effetto blur. Un cursore guida ogni cambiamento con clic e trascinamenti reali. Canvas grigio caldo chiaro, componenti in bianco e nero, un solo font UI pulito (Geist). Molle ovunque, con un piccolissimo overshoot al massimo. La camera effettua uno zoom in modo che ogni stato riempia l’inquadratura. L’ultimo frame è il primo frame, quindi il video va in loop.
Vietati: easing rimbalzanti, esplosioni di particelle, bagliori, gradienti sull’interfaccia UI, tratti delle icone non uniformi, tempi morti, qualsiasi cosa sembri un template.
</direction>

<structure>
120 BPM, 7 battute, succede qualcosa a ogni battito.
Pulsante → loader → spunta → isola dinamica → player musicale con morph play/pausa → trascina la barra di avanzamento → diventa uno slider del volume che si allunga quando viene trascinato oltre il massimo → un toggle si attiva sul battito → la manopola diventa un indicatore liquido delle schede → le schede si aprono in un grafico che si disegna da solo, con un tooltip al passaggio del mouse → si comprime in ⌘K → digita per filtrare → invio → toast → ritorno al pulsante.
</structure>

<build>
1. Un solo file HTML, quadrato 1440x1440. Ogni stile viene calcolato dal tempo all’interno di seek(t): nessuna transizione CSS, nessun timer, nessuno stato conservato tra i frame.
2. Le molle sono risposte al gradino in forma chiusa. Un valore che cambia target molte volte è la somma di una molla per ogni cambiamento, così rimane una funzione pura del tempo.
3. I due bordi dell’indicatore delle schede seguono molle diverse, così il bordo anteriore si allunga davanti a quello posteriore. Stesso principio per la manopola del toggle.
4. I trascinamenti sono manipolazione diretta: mentre il cursore è premuto, il valore viene calcolato dalla sua posizione. Al rilascio torna indietro con una molla a partire dal punto in cui si trova.
5. Analizza la canzone con numpy per ottenere la griglia dei battiti e inizia su un battere. Posiziona ogni suono UI in corrispondenza del suo picco misurato.
6. Esegui il rendering con Playwright: 4 sottoframe per frame, combinati con ffmpeg tmix per il motion blur a 60fps.
7. Esegui il rendering di un frame per battito prima del rendering completo. Correggi tutto ciò che è fuori griglia, troppo compatto o difficile da leggere.
</build>

<gotchas>
Non applicare mai will-change a elementi scalati dalla camera o su cui viene renderizzato il testo, altrimenti il testo risulta sfocato. Il testo che cambia all’interno di un contenitore con morphing ha bisogno di tempistiche di entrata e uscita proprie, altrimenti si sovrappone. Rendi l’ultimo frame identico al primo, inclusi posizione e velocità del cursore, altrimenti il loop scatta.
</gotchas>

<start>
Chiedimi gli input, poi mostrami l’elenco degli stati sulla griglia dei battiti prima di scrivere qualsiasi codice.
</start>

<inputs>
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).
</inputs>

<direction>
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.
</direction>

<structure>
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.
</structure>

<build>
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.
</build>

<gotchas>
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.
</gotchas>

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