Systém pohybu oranžových bodů

Požádejte mě o: krátký popisek pro úvodní přepínač, jedno hlavní slovo, procento pro graf, text pro poslední kartu, jednu zvýrazňující barvu a skladbu s jasným rytmem.

2D motion designový film v poměru stran 16:9. Použijte teplé téměř bílé plátno, téměř černé pozadí, výraznou typografii a jeden zářivý oranžový akcent. Oranžová tečka propojuje každou scénu: začíná v uživatelském rozhraní, stává se tečkou nad písmenem, sleduje pružinový graf, rozrůstá se do tvaru a vrací se na koncovou kartu. Kurzor dodává úvodnímu kliknutí reálný vzhled. Udržujte pohyb ostrý a kontrolovaný, s malými pružinovými přeskoky a bez zastavení.
Zakázáno: stock záběry, přechody, záře, výbuchy částic, náhodné přechody a pohyb, který není spojen s prvkem, který je již na obrazovce.

Kolem 15 sekund, s vizuální změnou na každém větším úderu.
Otevřít: kurzor klikne na oranžový přepínač vedle položky „Zmenšit pohyb“. Písmena se ohnou a přesunou na své místo, dokud nezůstane pouze „Pohyb“ s oranžovou tečkou nad písmenem „i“.
Pružina: tečka odskočí od slova a přistane na grafu. Její dráha vykreslí pružinovou odezvu, překročí cíl a usadí se vedle popisku „+22 %“.
Tvar: tečka vystřelí přes čáru, rozroste se do oranžového kruhu a vyplní záběr. Uvnitř se otáčí černý zaoblený čtverec a poté se roztáhne do pilulky. Scéna se smrští do jediné oranžové tečky na černém pozadí.
Písmo: kolem tečky obíhají slova jako „PRUŽINY“, „UVLHČENÍ“, „KINETICKÝ TYP“, „3D“ a „ZVUK“. Kruh písma se rozevírá do pole drobných teček.
Odhalení: pole polotónů se rozbalí a zčerná, čímž odhalí poslední kartu: „ Opus 5.5 “, „Motion designer“ a „0 klíčových snímků“.
Návrat: oranžová tečka se přesune zpět přes polotón, graf a přepínač. Poslední snímek se musí sladit s prvním, aby se video smyčka čistě opakovala.

1. Jeden HTML soubor, 1920x1080 při 60 fps. Vypočítání každého vizuálu z daného času uvnitř seek(t): žádné CSS přechody, časovače ani stavy přenášené mezi snímky.
2. Pro přepínač, odrážející se bod a graf použijte pružiny s uzavřeným tvarem. Nakreslete graf ze stejné funkce pružiny, která pohybuje bodem.
3. Pro transformaci „Reduce Motion“ na „Motion“ animujte jednotlivá písmena. Oranžovou tečku ponechte připevněnou k písmenu „i“, dokud nezačne skákat.
4. Vytvořte oranžový kruh, rotující čtverec a pilulku v různých stavech stejného tvaru. Zachovejte jeho polohu a pohyb během každé transformace.
5. Umístěte obíhající slova podél kruhové dráhy a poté posuňte jejich písmena směrem ven, abyste rámeček předali polotónové mřížce.
6. Nakreslete polotón jako mřížku teček, jejichž velikost odpovídá oranžové tečce. Nechte ji přerůst přes okraje rámečku, než odhalíte koncovou kartu.
7. Synchronizujte kliknutí, dosavadní bod, vrchol grafu, změny tvaru a finální titulek s naměřenými údery. Před úplným exportem vykreslete jeden snímek na úder, abyste zkontrolovali tempo.

Graf a tečka musí sledovat stejný pohyb, jinak bude pružina působit falešně. Zachovejte oranžový akcent v celé scéně. Nastavte oddělené načasování odchozího a příchozího textu, aby se písmena nepřekrývala. Když obrazec vyplní obrazovku, upravte jeho velikost za všechny čtyři rohy. Srovnejte kurzor, tečku a typografii v prvním a posledním snímku, abyste předešli zasekávání ve smyčce.

Zeptej se mě na vstupy a pak mi ukaž mapu rytmů a čtyři statické snímky (přepínač, graf, kinetický typ, koncová karta), než začneš sestavovat celé video.

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.

Výzva převzata z zveřejnit @ultimaxbt.