Orange prik-bevægelsessystem

Bed mig om: en kort etiket til den indledende skifteknap, et hovedord, en procentdel til grafen, teksten til det sidste kort, en accentfarve og et nummer med et tydeligt beat.

En 2D-motion designfilm i 16:9. Brug et varmt, off-white lærred, næsten sorte baggrunde, dristig typografi og en levende orange accent. Den orange prik forbinder hver scene: den starter i brugergrænsefladen, bliver prikken over et bogstav, tegner en fjedergraf, vokser til en form og vender tilbage på slutkortet. En markør får åbningsklikket til at føles ægte. Hold bevægelsen skarp og kontrolleret med små fjederoverskridelser og ingen dødtid.
Forbudt: stock footage, gradienter, gløder, partikeludbrud, tilfældige overgange og bevægelse, der ikke er forbundet med et element, der allerede er på skærmen.

Omkring 15 sekunder, med en visuel ændring ved hvert større taktslag.
Åbn: En markør klikker på den orange knap ud for "Reducer bevægelse". Bogstaverne bøjer og flytter sig på plads, indtil kun "Bevægelse" er tilbage, med den orange prik over "i".
Fjeder: Prikken hopper væk fra ordet og lander på en graf. Dens bane tegner en fjederrespons, skyder over målet og lander ved siden af en "+22%"-opfordring.
Form: Prikken skyder hen over en linje, vokser til en orange cirkel og fylder billedet. En sort afrundet firkant roterer indeni den og strækker sig derefter til en pille. Scenen trækker sig sammen til en enkelt orange prik på sort.
Tekst: Ord som "SPRINGS", "EASING", "KINETIC TYPE", "3D" og "SOUND" kredser om prikken. Tekstcirklen åbner sig til et felt af små prikker.
Afsløring: Halvtonefeltet udvides og bliver sort, hvilket afslører det sidste kort: " Opus 5.5 ", "Motion designer" og "0 keyframes".
Retur: Den orange prik bevæger sig tilbage gennem halvtonen, grafen og skiftefunktionen. Match den sidste ramme med den første, så videoen looper rent.

1. Én HTML fil, 1920x1080 ved 60fps. Beregn alle visuelle elementer ud fra tiden i seek(t): ingen CSS overgange, timere eller tilstande mellem billeder.
2. Brug lukkede fjedre til vippemekanismen, den hoppende prik og grafen. Tegn grafen fra den samme fjederfunktion, der bevæger prikken.
3. Animér bogstaverne individuelt for transformationen "Reducer bevægelse" til "bevægelse". Hold den orange prik fastgjort til "i'et", indtil den begynder at hoppe.
4. Lav den orange cirkel, det roterende kvadrat og pillen i forskellige tilstande af den samme form. Bevar dens position og bevægelse gennem hver transformation.
5. Placer de kredsende ord langs en cirkulær bane, og flyt derefter deres bogstaver udad for at overføre rammen til rastergitteret.
6. Tegn rasteren som et gitter af prikker, hvis størrelse svarer til den orange prik. Lad den vokse forbi rammens kanter, før du afslører slutkortet.
7. Synkroniser klik, punktlanding, graftop, formændringer og endelig titel med målte slag. Render én frame pr. slag for at kontrollere tempoet før den fulde eksport.

Grafen og prikken skal følge den samme bevægelse, ellers vil fjederen føles falsk. Hold den orange accent ensartet på tværs af hver scene. Giv udgående og indgående tekst separat timing, så bogstaverne ikke overlapper hinanden. Når en form fylder skærmen, skal du skalere den forbi alle fire hjørner. Match markøren, prikken og typografien i første og sidste frame for at undgå en løkkehakkende bevægelse.

Bed mig om input, vis mig derefter beatmap'et og fire stillbilleder (toggle, graf, kinetisk type, slutkort), før du bygger hele videoen.

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.

Spørgsmål taget fra stolpe @ultimaxbt.