Modello interattivo 3D di un motore a razzo nel browser

Prompt

<inputs> 
Chiedimi: 
• il mio prodotto + URL 
• 8–12 stati dell'interfaccia che ne raccontino la storia 
• i dati reali mostrati in ogni stato 
• colori del brand + font + colore d'accento 
• formati richiesti (1:1, 16:9, 9:16) 
</inputs>

<rules> 
Un solo file HTML. Un solo canvas
Una sola funzione draw(t)

Nessuna transizione CSS
Nessun timer
Nessuno stato mantenuto tra i fotogrammi

Una sola forma, mai tagliarla

Ogni stato è lo stesso elemento che cambia dimensione, raggio e colore mentre il contenuto viene sostituito

UI reale. Dati reali. Nessun segnaposto.

</rules>
<structure> 
Griglia a 120 BPM

Succede qualcosa a ogni bea

logo → pulsante → campo per l'handle → “is this you?” → caricatore → PIN → globo che si riempie di utenti → corrispondenze → schede → RSVP → ricerca → logo

</structure>

<motion> 
Usa ovunque molle in forma chiusa con un overshoot minimo.

Se un valore cambia obiettivo più volte, somma una molla per ogni cambiamento

Il contenuto entra dopo che il suo contenitore ha iniziato a trasformarsi ed esce prima della trasformazione successiva, così il testo non si sovrappone mai

Usa una breve sfocatura sulle transizioni

Non passare mai direttamente dal nero al colore d'accento. Sposta invece un elemento d'accento tra gli stati

Fai allungare gli indicatori delle schede mettendo ogni bordo su una molla diversa

Zooma la videocamera in modo che ogni stato riempia l'inquadratura

Fai coincidere l'ultimo fotogramma con il primo, così l'intera sequenza va in loop
</motion>

<export> 
Per prima cosa, renderizza un fotogramma per ogni battito come contact sheet

Correggi tutto ciò che è troppo compresso o non funziona

Poi renderizza ogni fotogramma in headless Chrome a 60fps, facendo la media di 6 sottofotogrammi per il motion blur

Invia a ffmpeg:
H.264 + yuv420p

Esporta tutti i rapporti d'aspetto in parallelo
</export>

motion design is becoming a prompt

<inputs> 
Ask me for: 
• my product + URL 
• 8–12 UI states that tell its story 
• the real data shown in each state 
• brand colors + fonts + accent color 
• required formats (1:1, 16:9, 9:16) 
</inputs>

<rules> 
One HTML file. One canvas
One draw(t) function

No CSS transitions
No timers
No state carried between frames

One shape, never cut

Every state is the same element changing size, radius and color while the content swaps

A cursor drives the sequence with real clicks, typing and one drag

Real UI. Real data. No placeholders.

</rules>
<structure> 
120 BPM grid

Something happens on every bea

logo → button → handle field → “is this you?” → loader → pin → globe filling with users → matches → tabs → RSVP → search → logo

</structure>

<motion> 
Closed-form springs everywhere with only a tiny overshoot.

If a value changes target multiple times, sum one spring per change

Content enters after its container starts morphing and leaves before the next morph so text never overlaps

Use a short blur on transitions

Never fade black directly into the accent color. Move an accent element between states instead

Make tab indicators stretch by putting each edge on a different spring

Zoom the camera so every state fills the frame

Make the last frame equal the first so the whole thing loops
</motion>

<export> 
First render one frame per beat as a contact sheet

Fix anything cramped or broken

Then render every frame in headless Chrome at 60fps, averaging 6 subframes for motion blur

Pipe into ffmpeg:
H.264 + yuv420p

Export all aspect ratios in parallel
</export>

motion design is becoming a prompt