Sistema di muvimentu di punti aranci

Dumandatemi: una corta etichetta per l'interruttore d'apertura, una parola d'eroe, una percentuale per u graficu, u testu per a carta finale, un culore d'accentu è una traccia cù un ritmu chjaru.

Un filmu di cuncepimentu di muvimentu 2D in 16:9. Aduprate una tela bianca calda, sfondi quasi neri, tipografia audace è un accentu aranciu vivu. U puntu aranciu cunnetta ogni scena: principia in l'interfaccia utente, diventa u puntu sopra una lettera, traccia un graficu à molla, cresce in una forma è torna nantu à a carta finale. Un cursore face chì u clic d'apertura pare reale. Mantene u muvimentu nitidu è cuntrullatu, cù picculi sovraoscillazioni di molla è senza tempi morti.
Pruibiti: filmati di repertoriu, gradienti, bagliori, scoppi di particelle, transizioni aleatorie è muvimentu chì ùn hè micca cunnessu à un elementu digià nant'à u schermu.

Circa 15 secondi, cù un cambiamentu visuale à ogni battuta maiò.
Apertu: un cursore clicca nantu à l'interruttore aranciu accantu à "Riduce u muvimentu". E lettere si pieganu è si movenu in u so postu finu à chì ferma solu "Muvimentu", cù u puntu aranciu sopra à a "i".
Primavera: u puntu si alluntana da a parola è atterra nantu à un graficu. U so percorsu disegna una risposta di primavera, supera u bersagliu è si stabilisce accantu à una chjama "+22%".
Forma: u puntu attraversa una linea, cresce in un cerchju aranciu è riempie u quadru. Un quadratu neru arrotondatu gira in ellu, poi si stende in una pillula. A scena si contrae à un solu puntu aranciu nantu à u neru.
Tipu: parolle cum'è "SPRINGS", "EASING", "KINETIC TYPE", "3D" è "SOUND" orbitanu intornu à u puntu. U cerchju di tipu si apre in un campu di picculi punti.
Rivelazione: u campu di mezze tinte si espande è si trasforma in neru, rivelendu a carta finale: " Opus 5.5 ", "Motion designer" è "0 keyframes".
Ritornu: u puntu aranciu si move in daretu attraversu u mezu tonu, u graficu è l'attivazione/disattivazione. Fate abbinà l'ultimu quadru à u primu in modu chì u video si ripeta in modu pulitu.

1. Un schedariu HTML, 1920x1080 à 60 fps. Calcula ogni visuale da u tempu in seek(t): nisuna transizione CSS, timer o statu purtatu trà i frames.
2. Aduprate molle di forma chjusa per u buttone basculante, u puntu chì rimbalza è u graficu. Disegnate u graficu da a listessa funzione di molla chì move u puntu.
3. Animate e lettere individualmente per a trasfurmazione "Reduce Motion" in "Motion". Mantene u puntu aranciu attaccatu à a "i" finu à ch'ella principia u so saltu.
4. Fate u cerchju aranciu, u quatratu rotante è a pillula in diversi stati di a listessa forma. Cunservate a so pusizione è u so muvimentu per ogni trasfurmazione.
5. Pone e parolle in orbita longu un percorsu circulare, poi move e so lettere versu l'esternu per dà a cornice à a griglia di mezzitoni.
6. Disegnate u mezu tonu cum'è una griglia di punti chì e so dimensioni rispondenu à u puntu aranciu. Lasciatelu cresce oltre i bordi di a cornice prima di revelà a carta finale.
7. Sincronizate u clic, l'atterrissimu di i punti, u piccu di u graficu, i cambiamenti di forma è u titulu finale à i battiti misurati. Renderizate un quadru per battitu per verificà u ritmu prima di l'esportazione cumpleta.

U graficu è u puntu devenu seguità u listessu muvimentu o a molla si sentirà falsa. Mantene l'accentu aranciu coerente in ogni scena. Date un timing separatu à u testu in uscita è in entrata per chì e lettere ùn si sovrapponganu micca. Quandu una forma riempie u schermu, scalatela oltre i quattru anguli. Abbinate u cursore, u puntu è a tipografia in u primu è l'ultimu quadru per evità un stutter di loop.

Dumandatemi l'input, dopu mostrami a mappa di ritmu è quattru immagini fisse (toggle, graph, kinetic type, end card) prima di custruisce u video cumpletu.

Ask me for: a short label for the opening toggle, one hero word, a percentage for the graph, the text for the final card, one accent color, and a track with a clear beat.

A 2D motion design film in 16:9. Use a warm off-white canvas, near-black backgrounds, bold typography and one vivid orange accent. The orange dot connects every scene: it starts in the UI, becomes the dot over a letter, traces a spring graph, grows into a shape and returns on the end card. A cursor makes the opening click feel real. Keep the motion sharp and controlled, with small spring overshoots and no dead time.
Banned: stock footage, gradients, glows, particle bursts, random transitions and motion that isn't connected to an element already on screen.

Around 15 seconds, with a visual change on every major beat.
Open: a cursor clicks the orange toggle beside "Reduce Motion". The letters bend and move into place until only "Motion" remains, with the orange dot above the "i".
Spring: the dot jumps away from the word and lands on a graph. Its path draws a spring response, overshoots the target and settles beside a "+22%" callout.
Shape: the dot shoots across a line, grows into an orange circle and fills the frame. A black rounded square rotates inside it, then stretches into a pill. The scene contracts to a single orange dot on black.
Type: words like "SPRINGS", "EASING", "KINETIC TYPE", "3D" and "SOUND" orbit the dot. The circle of type opens out into a field of tiny dots.
Reveal: the halftone field expands and flips to black, revealing the final card: "Opus 5.5", "Motion designer." and "0 keyframes".
Return: the orange dot moves back through the halftone, graph and toggle. Match the final frame to the first so the video loops cleanly.

1. One HTML file, 1920x1080 at 60fps. Compute every visual from time inside seek(t): no CSS transitions, timers or state carried between frames.
2. Use closed-form springs for the toggle, bouncing dot and graph. Draw the graph from the same spring function that moves the dot.
3. Animate letters individually for the "Reduce Motion" to "Motion" transformation. Keep the orange dot attached to the "i" until it begins its jump.
4. Make the orange circle, rotating square and pill different states of the same shape. Preserve its position and motion through each transformation.
5. Place the orbiting words along a circular path, then move their letters outward to hand the frame over to the halftone grid.
6. Draw the halftone as a grid of dots whose sizes respond to the orange dot. Let it grow past the frame edges before revealing the end card.
7. Sync the click, dot landing, graph peak, shape changes and final title to measured beats. Render one frame per beat to check the pacing before the full export.

The graph and dot must follow the same motion or the spring will feel fake. Keep the orange accent consistent across every scene. Give outgoing and incoming text separate timing so letters don't overlap. When a shape fills the screen, scale it past all four corners. Match the cursor, dot and typography in the first and last frames to avoid a loop stutter.

Ask me for the inputs, then show me the beat map and four stills (toggle, graph, kinetic type, end card) before building the full video.

Pruposta presa da postu @ultimaxbt.