Opstel: Oranje kolletjiebewegingstelsel

Vra my vir: 'n kort etiket vir die openingsskakelaar, een heldwoord, 'n persentasie vir die grafiek, die teks vir die finale kaart, een aksentkleur en 'n snit met 'n duidelike maat.

'n 2D-bewegingsontwerpfilm in 16:9. Gebruik 'n warm, gebroke wit doek, amper-swart agtergronde, vet tipografie en een helder oranje aksent. Die oranje kolletjie verbind elke toneel: dit begin in die gebruikerskoppelvlak, word die kolletjie oor 'n letter, teken 'n veergrafiek, groei in 'n vorm en keer terug op die eindkaart. 'n Wysertjie laat die openingsklik eg voel. Hou die beweging skerp en beheersd, met klein veeroorskietings en geen dooie tyd nie.
Verbode: voorraadbeeldmateriaal, gradiënte, gloede, deeltjie-uitbarstings, ewekansige oorgange en beweging wat nie gekoppel is aan 'n element wat reeds op die skerm is nie.

Ongeveer 15 sekondes, met 'n visuele verandering op elke groot maat.
Oopmaak: 'n wyser klik op die oranje skakelaar langs "Verminder Beweging". Die letters buig en skuif in plek totdat slegs "Beweging" oorbly, met die oranje kolletjie bo die "i".
Veer: die punt spring weg van die woord en land op 'n grafiek. Die pad daarvan teken 'n veerrespons, skiet oor die teiken en eindig langs 'n "+22%"-oproep.
Vorm: die kolletjie skiet oor 'n lyn, groei in 'n oranje sirkel en vul die raam. 'n Swart afgeronde vierkant roteer daarbinne en strek dan in 'n pil. Die toneel trek saam tot 'n enkele oranje kolletjie op swart.
Tipe: woorde soos "SPRINGS", "EASING", "KINETIC TIPE", "3D" en "SOUND" wentel om die punt. Die sirkel van lettertipe maak oop in 'n veld van klein kolletjies.
Openbaar: die halftoonveld brei uit en word swart, wat die finale kaart openbaar: " Opus 5.5 ", "Bewegingsontwerper" en "0 sleutelrame".
Terugkeer: die oranje kolletjie beweeg terug deur die halftoon, grafiek en skakelaar. Pas die laaste raam by die eerste sodat die video skoon loop.

1. Een HTML lêer, 1920x1080 teen 60fps. Bereken elke visuele element vanaf tyd binne seek(t): geen CSS oorgange, tydtellers of toestand word tussen rame oorgedra nie.
2. Gebruik geslote-vorm vere vir die skakelaar, die stuiterende punt en die grafiek. Teken die grafiek vanaf dieselfde veerfunksie wat die punt beweeg.
3. Animeer letters individueel vir die transformasie "Verminder Beweging" na "Beweging". Hou die oranje kolletjie aan die "i" vas totdat dit begin spring.
4. Maak die oranje sirkel, roterende vierkant en pil verskillende toestande van dieselfde vorm. Behou die posisie en beweging daarvan deur elke transformasie.
5. Plaas die wentelende woorde langs 'n sirkelvormige pad, beweeg dan hul letters na buite om die raam aan die halftoonrooster oor te dra.
6. Teken die halftoon as 'n rooster van kolletjies waarvan die groottes ooreenstem met die oranje kolletjie. Laat dit verby die raamrande groei voordat die eindkaart onthul word.
7. Sinkroniseer die klik, puntlanding, grafiekpiek, vormveranderinge en finale titel met gemete maatslae. Render een raam per maat om die tempo na te gaan voor die volle uitvoer.

Die grafiek en punt moet dieselfde beweging volg, anders sal die veer vals voel. Hou die oranje aksent konsekwent oor elke toneel. Gee uitgaande en inkomende teks aparte tydsberekening sodat letters nie oorvleuel nie. Wanneer 'n vorm die skerm vul, skaal dit verby al vier hoeke. Pas die wyser, punt en tipografie in die eerste en laaste rame om 'n lusstuitering te vermy.

Vra my vir die insette, wys my dan die maatkaart en vier stilstaande beelde (wissel, grafiek, kinetiese tipe, eindkaart) voordat jy die volledige video bou.

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.

Aanwysing geneem van pos @ultimaxbt.