Instellen: Oranje stip bewegingssysteem

Vraag me om: een kort label voor de openingsschakelaar, één kernwoord, een percentage voor de grafiek, de tekst voor de laatste kaart, één accentkleur en een nummer met een duidelijke beat.

Een 2D-animatiefilm in 16:9-formaat. Gebruik een warm gebroken wit canvas, bijna zwarte achtergronden, opvallende typografie en één levendig oranje accent. De oranje stip verbindt elke scène: hij begint in de gebruikersinterface, wordt de stip boven een letter, volgt een veergrafiek, groeit uit tot een vorm en keert terug op de eindkaart. Een cursor zorgt ervoor dat de openingsklik realistisch aanvoelt. Houd de beweging scherp en gecontroleerd, met kleine overschrijdingen van de veergrafiek en zonder dode tijd.
Verboden: stockbeelden, kleurverlopen, gloedeffecten, deeltjesflitsen, willekeurige overgangen en bewegingen die niet gekoppeld zijn aan een element dat al op het scherm te zien is.

Ongeveer 15 seconden, met een visuele verandering bij elke belangrijke tel.
Openen: een cursor klikt op de oranje schakelaar naast 'Beweging verminderen'. De letters buigen en verschuiven totdat alleen 'Beweging' overblijft, met de oranje stip boven de 'i'.
Lente: de stip springt weg van het woord en landt op een grafiek. Zijn pad beschrijft een veerreactie, schiet voorbij het doel en komt tot stilstand naast de aanduiding "+22%".
Vorm: de stip schiet over een lijn, groeit uit tot een oranje cirkel en vult het hele beeld. Een zwart, afgerond vierkant draait erin en rekt zich vervolgens uit tot een pil. De scène krimpt tot een enkele oranje stip op een zwarte achtergrond.
Tekst: woorden zoals "VEREN", "VERLICHTING", "KINETISCHE TYPE", "3D" en "GELUID" draaien rond de stip. De cirkel van tekst opent zich tot een veld van kleine puntjes.
Onthulling: het rasterveld breidt zich uit en wordt zwart, waardoor de laatste kaart zichtbaar wordt: " Opus 5.5 ", "Motion designer." en "0 keyframes".
Terug: de oranje stip beweegt terug door de rasterafbeelding, grafiek en schakelaar. Zorg ervoor dat het laatste frame overeenkomt met het eerste, zodat de video vloeiend herhaalt.

1. Eén HTML bestand, 1920x1080 bij 60 fps. Bereken elke visualisatie op basis van de tijd binnen seek(t): geen CSS transities, timers of statusinformatie die tussen frames wordt overgedragen.
2. Gebruik gesloten-vorm veren voor de schakelaar, de stuiterende stip en de grafiek. Teken de grafiek met dezelfde veerfunctie die de stip beweegt.
3. Animeer de letters afzonderlijk voor de transformatie van "Reduce Motion" naar "Motion". Houd de oranje stip aan de "i" vast totdat deze begint te springen.
4. Maak van de oranje cirkel, het roterende vierkant en de pil verschillende toestanden van dezelfde vorm. Behoud hun positie en beweging tijdens elke transformatie.
5. Plaats de ronddraaiende woorden langs een cirkelvormig pad en beweeg vervolgens hun letters naar buiten om het kader over te dragen aan het raster van halftonen.
6. Teken de halftoon als een raster van stippen waarvan de grootte overeenkomt met de oranje stip. Laat het raster buiten de randen van het kader doorlopen voordat je de eindkaart onthult.
7. Synchroniseer de klik, de landing van de stip, de piek in de grafiek, de vormveranderingen en de uiteindelijke titel met de gemeten beats. Render één frame per beat om het tempo te controleren voordat u de volledige export uitvoert.

De grafiek en de stip moeten dezelfde beweging volgen, anders voelt de veer onnatuurlijk aan. Zorg ervoor dat het oranje accent consistent is in elke scène. Geef inkomende en uitgaande tekst een aparte timing, zodat letters elkaar niet overlappen. Wanneer een vorm het hele scherm vult, schaal deze dan voorbij alle vier de hoeken. Stem de cursor, de stip en de typografie in het eerste en laatste frame op elkaar af om haperingen in de loop te voorkomen.

Vraag me eerst naar de input, laat me vervolgens de beatmap en vier stilstaande beelden zien (toggle, grafiek, kinetisch type, eindkaart) voordat je de volledige video maakt.

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.

Aanwijzing afkomstig van na @ultimaxbt.