Trasformazione della forma attraverso gli stati dell'interfaccia utente

Chiedimi: da 8 a 12 stati dell'interfaccia utente che voglio che la forma assuma (ad esempio pulsante, caricatore, lettore, cursore, interruttore, schede, grafico, tavolozza dei comandi, notifica), bianco e nero puro o con un colore di accento e una canzone royalty-free di circa 120 BPM (ad esempio Mixkit, gratuita per uso commerciale).

Animazione dell'interfaccia utente in stile Dribbble. Una forma, mai tagliata: ogni stato è lo stesso elemento che cambia dimensione, raggio e colore mentre il suo contenuto si scambia con una breve sfocatura. Un cursore controlla ogni cambiamento con clic e trascinamenti reali. Tela grigio chiaro caldo, componenti in bianco e nero, un unico font pulito per l'interfaccia utente (Geist). Molle ovunque, al massimo un piccolo overshoot. La telecamera zooma in modo che ogni stato riempia l'inquadratura. L'ultimo fotogramma è il primo, quindi si ripete in loop.
Vietato: effetto rimbalzo, esplosioni di particelle, bagliori, sfumature su elementi grafici dell'interfaccia utente, tratti di icone non uniformi, tempi morti, qualsiasi elemento che assomigli a un modello.

120 BPM, 7 battute, qualcosa accade ad ogni battito.
Pulsante → caricatore → spunta → isola dinamica → lettore musicale con morph play/pausa → scorri la barra di avanzamento → diventa un cursore del volume che si allunga quando trascinato oltre il massimo → un interruttore si attiva a ritmo → la manopola diventa un indicatore di scheda liquido → 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 → torna al pulsante.

1. Un file HTML, quadrato 1440x1440. Ogni stile viene calcolato in base al tempo all'interno di seek(t): nessuna transizione CSS, nessun timer, nessuno stato mantenuto tra i frame.
2. Le molle sono risposte al gradino in forma chiusa. Un valore che cambia il valore target molte volte è la somma di una molla per ogni cambiamento, quindi rimane una funzione puramente temporale.
3. I due bordi dell'indicatore a linguetta scorrono su molle diverse, quindi il bordo anteriore si allunga in avanti rispetto a quello posteriore. Lo stesso trucco vale per la manopola a levetta.
4. Il trascinamento è una manipolazione diretta: finché il cursore è tenuto premuto, il valore viene calcolato a partire dalla sua posizione. Al rilascio, torna alla posizione precedente.
5. Analizza il brano con numpy per ottenere la griglia ritmica e inizia da un battito forte. Posiziona ogni suono dell'interfaccia utente in base al suo picco misurato.
6. Rendering con Playwright: 4 sotto-frame per fotogramma, miscelati con ffmpeg tmix per l'effetto motion blur a 60 fps.
7. Esegui il rendering di un fotogramma per ogni battito prima del rendering completo. Correggi eventuali elementi fuori griglia, troppo ravvicinati o difficili da leggere.

Non applicare mai la proprietà "will-change" a elementi che la telecamera ridimensiona o il cui testo risulta sfocato. Il testo che cambia all'interno di un contenitore morphing necessita di una temporizzazione di entrata e uscita specifica, altrimenti si sovrappone. Assicurati che l'ultimo fotogramma sia identico al primo, inclusa la posizione e la velocità del cursore, altrimenti il ciclo si interromperà.

Chiedimi gli input, poi mostrami l'elenco degli stati sulla griglia dei beat prima di scrivere qualsiasi codice.

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.

Suggerimento tratto da inviare @twoclipping.