Un film di motion UI a tema Pokémon con elementi 3D interattivi

Prompt

PUNTI:
<inputs>
Chiedimi: il mio Pokémon protagonista o il trio di starter, 8–12 stati dell’interfaccia a tema Pokémon e una canzone royalty-free di circa 120 BPM, con un’atmosfera giocosa da avventura o elettronica. Conferma che la licenza della canzone ne consenta l’uso previsto.Palette predefinita: bianco caldo sporco, nero e rosso Poké Ball. Le illustrazioni dei Pokémon mantengono i loro colori originali.
</inputs>

<direction>
Un filmato di motion design dell’interfaccia ispirato ai Pokémon, rifinito a livello Dribbble. Immagina un Pokédex moderno dal design raffinato: giocoso, preciso e immediatamente http://recognizable.Una sola forma, mai tagliata: una Poké Ball si trasforma continuamente in ogni componente dell’interfaccia modificando dimensioni, raggio e colore. Il suo pulsante centrale, la linea divisoria e l’involucro esterno diventano i controlli e la struttura di ogni nuovo stato. I contenuti cambiano con una breve sfocatura e una temporizzazione di entrata/uscita attentamente separata.

Un cursore visibile guida ogni interazione con clic, trascinamenti e gesti di hover. Usa una tela grigio caldo chiaro, una tipografia Geist pulita, tratti delle icone coerenti e illustrazioni Pokémon nitide.

Usa molle fortemente smorzate con un overshoot minimo. La camera riformula fluidamente ogni stato, così l’interfaccia rimane grande e leggibile. Il finale ritorna esattamente alla Poké Ball iniziale per creare un loop senza interruzioni.

Vietati: rimbalzi eccessivi, esplosioni di particelle, bagliori, gradienti sugli elementi strutturali dell’interfaccia, tratti delle icone non coerenti, tempi morti, layout generici da dashboard, cambi di scena bruschi ed elementi fluttuanti non correlati.
</direction>

<structure>
120 BPM, tempo 4/4, 7 battute: 28 beat, circa 14 secondi. Su ogni http://beat.Battuta 1 — Attivazione della Poké Ball

1. Una Poké Ball chiusa è al centro; il cursore si avvicina.
2. Il cursore fa clic sul pulsante centrale.
3. Il pulsante diventa un loader circolare di scansione.
4. La scansione si risolve in un segno di spunta e l’involucro si allunga trasformandosi in un Pokédex compatto.

Battuta 2 — Scoperta del Pokémon
5. Il Pokédex si espande per rivelare il Pokémon protagonista.
6. Il suo nome, numero e tipo compaiono con un rapido effetto sfalsato.
7. Il cursore fa clic sul controllo di verso/riproduzione.
8. Il controllo si trasforma in pausa mentre una forma d’onda compatta si anima.

Battuta 3 — Controlli dell’allenatore
9. La forma d’onda si appiattisce trasformandosi in uno slider del volume.
10. Il cursore trascina al massimo il pomello a forma di Poké Ball.
11. Trascinando oltre il massimo, lo slider si allunga elasticamente.
12. Al rilascio, si assesta e si comprime trasformandosi in un toggle della modalità shiny.

Battuta 4 — Dettagli del Pokémon
13. Il cursore attiva la modalità shiny; l’illustrazione cambia nella variante shiny corretta.
14. Il pomello del toggle si allunga trasformandosi in un indicatore liquido delle schede.
15. Il cursore seleziona “Stats”.
16. La scheda si apre trasformandosi in un grafico pulito delle statistiche del Pokémon.

Battuta 5 — Dalle statistiche alla ricerca
17. Le barre delle statistiche si disegnano a tempo con il beat.
18. Il cursore passa sopra una barra; compare un tooltip leggibile.
19. Il grafico si ritrae nello stesso contenitore.
20. Il contenitore si comprime trasformandosi in un campo di ricerca del Pokédex.

Battuta 6 — Trova e seleziona
21. Il campo di ricerca si espande trasformandosi in una command palette.
22. Viene digitato un nome breve di Pokémon; i risultati corrispondenti vengono filtrati.
23. Il cursore seleziona un risultato, rivelandone la miniatura e il tipo.
24. Invio conferma; la palette si ripiega trasformandosi in un toast “Added to team”.

Battuta 7 — Ritorno alla Poké Ball
25. Il segno di conferma del toast diventa il pulsante centrale della Poké Ball.
26. Il toast si contrae; i suoi bordi diventano l’involucro circolare.
27. La metà superiore rossa, la metà inferiore bianca e la linea divisoria nera si assestano al loro posto.
28. Il cursore ritorna lungo un percorso fluido, corrispondendo alla posizione e alla velocità iniziali mentre il loop ricomincia.

Usa il Pokémon scelto in modo coerente per tutta la sequenza. Mantieni il testo visibile abbastanza breve da poter essere letto a questo ritmo.
</structure>

<build>
1. Crea un unico file HTML autonomo con una composizione quadrata di 1440×1440. Calcola ogni stile animato in base al tempo all’interno di seek(t): niente transizioni CSS, timer o stato mantenuto tra i fotogrammi.
2. Mantieni un unico elemento esterno persistente per tutta la sequenza. Le sue illustrazioni interne, etichette e controlli possono cambiare, ma la sagoma principale deve collegare visibilmente ogni stato.
3. Usa risposte a gradino di molle in forma chiusa. Per i cambiamenti ripetuti del target, somma una risposta di molla per ogni cambiamento, così l’animazione rimane una funzione pura del tempo.
4. Dai ai due bordi dell’indicatore delle schede molle diverse, così il bordo iniziale si allunga davanti a quello finale. Applica la stessa tecnica al pomello del toggle.
5. Rendi i trascinamenti una manipolazione diretta: mentre è premuto, il valore segue la posizione del cursore. Al rilascio, usa una molla in forma chiusa che corrisponda alla posizione e alla velocità di rilascio.
6. Analizza la canzone fornita con numpy per stimare la griglia dei beat, verificare il downbeat e allineare la sequenza. Se il tempo differisce da 120 BPM, adatta la temporizzazione alla musica reale.
7. Usa suoni dell’interfaccia con licenza e allinea i loro picchi transitori misurati ai clic, alle conferme e agli accenti delle trasformazioni.
8. Esegui il rendering con Playwright a quattro subframe per ogni fotogramma di output. Unisci ogni gruppo di quattro con ffmpeg in un video a 60fps per ottenere il motion blur.
9. Esegui il rendering di un fotogramma di anteprima per ogni beat prima del video completo. Correggi tutto ciò che risulta angusto, illeggibile, visivamente scollegato o fuori dalla griglia dei beat.
10. Inserisci illustrazioni e font nell’HTML, così il rendering non dipende da richieste di rete.
</build><gotchas>
Non applicare mai will-change a elementi scalati dalla camera; il testo potrebbe diventare sfocato.Dai ai contenuti in uscita e in entrata temporizzazioni separate, così le etichette non si sovrappongono mai durante una trasformazione.

Usa illustrazioni, nomi, tipi, colori shiny e statistiche Pokémon accurati. Non inventare varianti e non allungare le illustrazioni dei personaggi quando il contenitore cambia forma.

Mantieni il contenitore principale riconoscibile durante ogni transizione. Le illustrazioni dei Pokémon sono contenuti all’interno dell’interfaccia in trasformazione, non una sostituzione della forma persistente.

Fai corrispondere esattamente il confine del loop: geometria, contenuti, camera, posizione del cursore e velocità del cursore. Esporta l’intervallo [0, duration) senza duplicare il fotogramma finale. Anche l’audio deve andare in loop senza interruzioni.
</gotchas>

<start>
Chiedimi gli input, poi mostrami l’elenco degli stati Pokémon proposto sulla griglia dei 28 beat prima di scrivere qualsiasi codice.
</start>

<inputs>
Ask me for: my featured Pokémon or starter trio, 8–12 Pokémon-themed UI states, and a royalty-free song around 120 BPM with a playful adventure or electronic feel. Confirm that the song’s license permits the intended use.Default palette: warm off-white, black, and Poké Ball red. Pokémon artwork keeps its original colors.
</inputs>

<direction>
A Pokémon-inspired UI motion film with Dribbble-level polish. Imagine a beautifully designed modern Pokédex: playful, precise, and instantly http://recognizable.One shape, never cut: a Poké Ball continuously morphs into every interface component by changing its size, radius, and color. Its central button, dividing line, and outer shell become the controls and structure of each new state. Content swaps with a short blur and carefully separated enter/exit timing.

A visible cursor drives every interaction with clicks, drags, and hover gestures. Use a light warm-gray canvas, clean Geist typography, consistent icon strokes, and crisp Pokémon artwork.

Use tightly damped springs with only a tiny overshoot. The camera smoothly reframes each state so the interface stays large and readable. The ending returns exactly to the opening Poké Ball for a seamless loop.

Banned: excessive bouncing, particle bursts, glows, gradients on UI chrome, mismatched icon strokes, dead time, generic dashboard layouts, abrupt scene changes, and unrelated floating elements.
</direction>

<structure>
120 BPM, 4/4 time, 7 bars: 28 beats, approximately 14 seconds. Something intentional happens on every http://beat.Bar 1 — Poké Ball activation

1. A closed Poké Ball sits centered; the cursor approaches.
2. The cursor clicks its central button.
3. The button becomes a circular scanning loader.
4. The scan resolves into a check, and the shell stretches into a compact Pokédex.

Bar 2 — Pokémon discovery
5. The Pokédex expands to reveal the featured Pokémon.
6. Its name, number, and type appear in a quick stagger.
7. The cursor clicks the cry/play control.
8. The control morphs into pause while a compact waveform animates.

Bar 3 — Trainer controls
9. The waveform flattens into a volume slider.
10. The cursor drags its Poké Ball-shaped knob to maximum.
11. Dragging beyond maximum elastically stretches the slider.
12. On release, it settles and compresses into a shiny-mode toggle.

Bar 4 — Pokémon details
13. The cursor flips shiny mode; the artwork changes to the correct shiny variant.
14. The toggle knob stretches into a liquid tab indicator.
15. The cursor selects “Stats.”
16. The card opens into a clean Pokémon stat chart.

Bar 5 — Stats to search
17. Stat bars draw themselves in sync with the beat.
18. The cursor hovers over a bar; a readable tooltip appears.
19. The chart retracts into the same container.
20. The container compresses into a Pokédex search field.

Bar 6 — Find and select
21. The search field expands into a command palette.
22. A short Pokémon name is typed; matching results filter.
23. The cursor selects a result, revealing its miniature artwork and type.
24. Enter confirms; the palette folds into an “Added to team” toast.

Bar 7 — Return to the Poké Ball
25. The toast’s confirmation mark becomes the Poké Ball’s central button.
26. The toast contracts; its edges become the circular shell.
27. The red upper half, white lower half, and black dividing line settle into place.
28. The cursor returns along a smooth path, matching the opening position and velocity as the loop wraps.

Use the chosen Pokémon consistently throughout. Keep visible text brief enough to read at this pace.
</structure>

<build>
1. Build one self-contained HTML file with a square 1440×1440 composition. Compute every animated style from time inside seek(t): no CSS transitions, timers, or state carried between frames.
2. Keep one persistent outer element throughout the sequence. Its internal artwork, labels, and controls may change, but the main silhouette must visibly connect every state.
3. Use closed-form spring step responses. For repeated target changes, sum one spring response per change so animation remains a pure function of time.
4. Give the tab indicator’s two edges different springs so the leading edge stretches ahead of the trailing edge. Apply the same technique to the toggle knob.
5. Make drags direct manipulation: while held, values follow cursor position. On release, use a closed-form spring matching the release position and velocity.
6. Analyze the supplied song with numpy to estimate the beat grid, verify the downbeat, and align the sequence. If the tempo differs from 120 BPM, adapt the timing to the actual music.
7. Use licensed UI sounds and align their measured transient peaks with clicks, confirmations, and morph accents.
8. Render with Playwright at four subframes per output frame. Blend each group of four with ffmpeg into a 60fps video for motion blur.
9. Render one preview frame per beat before the full video. Fix anything cramped, unreadable, visually disconnected, or off the beat grid.
10. Package artwork and fonts inside the HTML so rendering does not depend on network requests.
</build><gotchas>
Never put will-change on anything the camera scales; text can become blurry.Give outgoing and incoming content separate timing so labels never overlap during a morph.

Use accurate Pokémon artwork, names, types, shiny colors, and stats. Do not invent variants or stretch character artwork when the container changes shape.

Keep the main container recognizable through every transition. Pokémon artwork is content inside the morphing interface, not a replacement for the persistent shape.

Match the loop boundary exactly: geometry, content, camera, cursor position, and cursor velocity. Export the interval [0, duration) without duplicating the endpoint frame. Make the audio loop cleanly too.
</gotchas>

<start>
Ask me for the inputs, then show me the proposed Pokémon state list on the 28-beat grid before writing any code.
</start>