Sistema ng paggalaw ng orange na tuldok

Humingi ng: isang maikling label para sa pambungad na toggle, isang hero word, isang porsyento para sa graph, ang teksto para sa huling card, isang kulay ng accent, at isang track na may malinaw na beat.

Isang 2D motion design film sa 16:9. Gumamit ng mainit at puting canvas, halos itim na background, naka-bold na tipograpiya, at isang matingkad na orange na accent. Ang orange na tuldok ang nag-uugnay sa bawat eksena: nagsisimula ito sa UI, nagiging tuldok sa ibabaw ng isang letra, nagbabalangkas ng spring graph, lumalaki sa isang hugis, at bumabalik sa end card. Dahil sa cursor, parang totoong-totoo ang pag-click sa simula. Panatilihing matalas at kontrolado ang galaw, na may maliliit na spring overshoot at walang dead time.
Ipinagbabawal: stock footage, gradients, glows, particle bursts, random transitions at galaw na hindi konektado sa isang elementong nasa screen na.

Humigit-kumulang 15 segundo, na may biswal na pagbabago sa bawat pangunahing kumpas.
Buksan: may cursor na magki-click sa orange na toggle sa tabi ng "Bawasan ang Paggalaw". Ang mga letra ay yumuyuko at gumagalaw sa kanilang pwesto hanggang sa "Paggalaw" na lang ang matira, kasama ang orange na tuldok sa itaas ng "i".
Tagsibol: ang tuldok ay tumatalon palayo sa salita at lumalapag sa isang graph. Ang landas nito ay gumuhit ng tugon ng tagsibol, lumalagpas sa target at tumatayo sa tabi ng isang callout na "+22%".
Hugis: ang tuldok ay tumatawid sa isang linya, lumalaki at nagiging isang bilog na kulay kahel at pinupuno ang frame. Isang itim at bilugan na parisukat ang umiikot sa loob nito, pagkatapos ay umaabot at nagiging isang tableta. Ang eksena ay lumiliit at nagiging isang kulay kahel na tuldok sa itim.
Uri: ang mga salitang tulad ng "SPRINGS", "EASING", "KINETIC TYPE", "3D" at "SOUND" ay umiikot sa tuldok. Ang bilog ng uri ay bumubukas palabas sa isang patlang ng maliliit na tuldok.
Pagbubunyag: ang field ng halftone ay lalawak at lilipat sa itim, na nagpapakita ng panghuling card: " Opus 5.5 ", "Motion designer." at "0 keyframes".
Pagbabalik: ang orange na tuldok ay gumagalaw pabalik sa halftone, graph at i-toggle. Itugma ang huling frame sa una para maayos na umuusad ang video.

1. Isang HTML file, 1920x1080 sa 60fps. Kwentahin ang bawat visual mula sa oras sa loob ng seek(t): walang mga transition CSS, timer o estado na dala sa pagitan ng mga frame.
2. Gumamit ng mga closed-form spring para sa toggle, bouncing dot, at graph. Iguhit ang graph mula sa parehong spring function na nagpapagalaw sa tuldok.
3. Isa-isang i-animate ang mga letra para sa transpormasyong "Bawasan ang Paggalaw" patungong "Paggalaw". Panatilihing nakakabit ang orange na tuldok sa "i" hanggang sa magsimula itong tumalon.
4. Gawin ang kulay kahel na bilog, umiikot nang parisukat at i-pill ang magkakaibang estado ng parehong hugis. Panatilihin ang posisyon at galaw nito sa bawat transpormasyon.
5. Ilagay ang mga umiikot na salita sa isang pabilog na landas, pagkatapos ay ilipat ang kanilang mga letra palabas upang ibigay ang frame sa halftone grid.
6. Iguhit ang halftone bilang isang grid ng mga tuldok na ang laki ay tumutugon sa kulay kahel na tuldok. Hayaang lumaki ito lampas sa mga gilid ng frame bago ilantad ang pangwakas na kard.
7. I-sync ang click, dot landing, graph peak, mga pagbabago sa hugis at pangwakas na pamagat sa mga nasukat na beat. Mag-render ng isang frame bawat beat upang suriin ang pacing bago ang buong export.

Dapat sumunod ang graph at tuldok sa parehong galaw o magmumukhang peke ang spring. Panatilihing pare-pareho ang orange na accent sa bawat eksena. Bigyan ng hiwalay na timing ang papalabas at papasok na teksto upang hindi magkapatong ang mga letra. Kapag napuno ng isang hugis ang screen, i-scale ito lampas sa lahat ng apat na sulok. Itugma ang cursor, tuldok, at tipograpiya sa una at huling mga frame upang maiwasan ang loop stutter.

Hingin mo sa akin ang mga input, tapos ipakita mo sa akin ang beat map at apat na stills (toggle, graph, kinetic type, end card) bago gawin ang buong 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.

Kinuha ang prompt mula sa poste @ultimaxbt.