Ynstellen: Oranje stipbewegingssysteem

Freegje my om: in koart label foar de iepeningswiksel, ien heldwurd, in persintaazje foar de grafyk, de tekst foar de lêste kaart, ien aksintkleur en in nûmer mei in dúdlike beat.

In 2D-bewegingsûntwerpfilm yn 16:9. Brûk in waarm wyt doek, hast swarte eftergrûnen, fet typografy en ien libbendich oranje aksint. De oranje stip ferbynt elke sêne: it begjint yn 'e brûkersynterface, wurdt de stip oer in letter, tekenet in springgrafyk, groeit út ta in foarm en komt werom op 'e einkaart. In kursor makket de iepeningsklik echt. Hâld de beweging skerp en kontroleare, mei lytse springoverschrijdingen en gjin deade tiid.
Ferbean: stockbylden, gradiënten, gloeden, dieltsjebursts, willekeurige oergongen en beweging dy't net ferbûn is mei in elemint dat al op it skerm is.

Sawat 15 sekonden, mei in fisuele feroaring by elke grutte beat.
Iepenje: in kursor klikt op de oranje skeakel neist "Beweging ferminderje". De letters bûge en ferpleatse har nei har plak oant allinnich "Beweging" oerbliuwt, mei de oranje stip boppe de "i".
Spring: de stip springt fuort fan it wurd en lânet op in grafyk. Syn paad tekent in springreaksje, sjit oer it doel hinne en komt telâne neist in "+22%" oprop.
Foarm: de stip sjit oer in line, groeit út ta in oranje sirkel en follet it frame. In swart rûn fjouwerkant draait deryn, en rekt him dan út ta in pil. De sêne krimpt yn ta in inkele oranje stip op swart.
Type: wurden lykas "SPRINGS", "EASING", "KINETIC TYPE", "3D" en "SOUND" draaie om de stip. De sirkel fan type iepenet him yn in fjild fan lytse stippen.
Iepenbierje: it healtoanfjild wreidet út en wurdt swart, wêrtroch't de lêste kaart iepenbiere wurdt: " Opus 5.5 ", "Bewegingsûntwerper" en "0 kaaiframes".
Werom: de oranje stip beweecht werom troch de healtoan, grafyk en wikseling. Pas it lêste frame oan it earste oan, sadat de fideo skjin trochloopt.

1. Ien HTML bestân, 1920x1080 mei 60fps. Berekenje elke fisuele ôfbylding fan tiid binnen seek(t): gjin CSS oergongen, timers of steat dy't tusken frames meinommen wurde.
2. Brûk sletten springfearren foar de toggle, stuiterjende stip en grafyk. Teken de grafyk fan deselde springfunksje dy't de stip beweecht.
3. Animearje letters yndividueel foar de transformaasje "Beweging ferminderje" nei "Beweging". Hâld de oranje stip oan 'e "i" fêst oant it begjint te springen.
4. Meitsje de oranje sirkel, it draaiende fjouwerkant en de pil yn ferskillende steaten fan deselde foarm. Behâld syn posysje en beweging by elke transformaasje.
5. Plak de draaiende wurden lâns in sirkelfoarmich paad, en ferpleats dan har letters nei bûten om it frame oer te dragen oan it raster mei healtoanen.
6. Teken de healtoan as in raster fan stippen wêrfan de grutte oerienkomt mei de oranje stip. Lit it foarby de rânen fan it frame groeie foardat jo de einkaart sjen litte.
7. Syngronisearje it klik, de stiplâning, de grafykpyk, de foarmferoaringen en de definitive titel mei de metten beats. Render ien frame per beat om it tempo te kontrolearjen foar de folsleine eksport.

De grafyk en de stip moatte deselde beweging folgje, oars sil de fear falsk oanfiele. Hâld it oranje aksint konsekwint yn elke sêne. Jou útgeande en ynkommende tekst aparte timing, sadat letters inoar net oerlaapje. As in foarm it skerm follet, skaal it dan foarby alle fjouwer hoeken. Pas de kursor, stip en typografy oan yn it earste en lêste frame om in loop-stutter te foarkommen.

Freegje my om de ynput, lit my dan de beatkaart en fjouwer stills sjen (wikselje, grafyk, kinetyk type, einkaart) foardat jo de folsleine fideo bouwe.

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.

Oanfraach nommen fan peal @ultimaxbt.