Sistema ta' moviment b'tikek oranġjo

Itlobni għal: tikketta qasira għat-toggle tal-ftuħ, kelma waħda ewlenija, perċentwal għall-graff, it-test għall-karta finali, kulur wieħed aċċentwat, u track b'ritmu ċar.

Film ta' disinn ta' moviment 2D f'16:9. Uża kanvas abjad ċar sħun, sfondi kważi suwed, tipografija qawwija u aċċent oranġjo jgħajjat. Il-punt oranġjo jgħaqqad kull xena: jibda fl-UI, isir il-punt fuq ittra, jittraċċa graff ta' rebbiegħa, jikber f'forma u jirritorna fuq il-karta tat-tmiem. Kursur jagħmel il-klikk tal-ftuħ iħossu reali. Żomm il-moviment preċiż u kkontrollat, b'qabżiet żgħar tar-rebbiegħa u mingħajr ħin mejjet.
Projbiti: filmati tal-istokk, gradjenti, tiddix, tifqigħat ta' partiċelli, tranżizzjonijiet każwali u moviment li mhux konness ma' element li diġà jinsab fuq l-iskrin.

Madwar 15-il sekonda, b'bidla viżwali ma' kull taħbita ewlenija.
Miftuħ: cursor jikklikkja fuq it-toggle oranġjo ħdejn "Naqqas il-Mozzjoni". L-ittri jitgħawġu u jiċċaqalqu f'posthom sakemm jibqa' biss "Mozzjoni", bit-tikka oranġjo 'l fuq mill-"i".
Molla: il-punt jaqbeż 'il bogħod mill-kelma u jinżel fuq graff. Il-mogħdija tiegħu tiġbed rispons ta' molla, taqbeż il-mira u toqgħod ħdejn sejħa ta' "+22%".
Forma: il-punt jitfaċċa fuq linja, jikber f’ċirku oranġjo u jimla l-qafas. Kwadru iswed tond idur ġewwa fih, imbagħad jiġġebbed f’pillola. Ix-xena tiċkien għal punt oranġjo wieħed fuq l-iswed.
Tip: kliem bħal "SPRINGS", "EASING", "KINETIC TYPE", "3D" u "SOUND" iduru madwar il-punt. Iċ-ċirku tat-tip jinfetaħ f'għalqa ta' tikek ċkejkna.
Żvelar: il-qasam tan-nofs ton jespandi u jinqaleb għal iswed, u jikxef il-karta finali: " Opus 5.5 ", "Disinjatur tal-moviment." u "0 keyframes".
Ritorn: il-punt oranġjo jiċċaqlaq lura mill-halftone, il-graff u t-toggle. Qabbel l-aħħar frejm mal-ewwel wieħed sabiex il-vidjow jirrepeti b'mod nadif.

1. Fajl HTML wieħed, 1920x1080 b'60fps. Ikkalkula kull viżwali mill-ħin ġewwa seek(t): l-ebda tranżizzjonijiet CSS, timers jew stat li jinġarr bejn il-frejms.
2. Uża molol b'forma magħluqa għat-toggle, il-punt li jaqbeż u l-graff. Pinġi l-graff mill-istess funzjoni tar-rebbiegħa li ċċaqlaq il-punt.
3. Anima l-ittri individwalment għat-trasformazzjoni "Naqqas il-Mozzjoni" għal "Mozzjoni". Żomm il-punt oranġjo mwaħħal mal-"i" sakemm jibda l-qabża tiegħu.
4. Agħmel iċ-ċirku oranġjo, il-kwadru li jdur u l-pillola fi stati differenti tal-istess forma. Żomm il-pożizzjoni u l-moviment tiegħu matul kull trasformazzjoni.
5. Poġġi l-kliem li jduru tul mogħdija ċirkolari, imbagħad mexxi l-ittri tagħhom 'il barra biex tgħaddi l-qafas għall-grilja ta' nofs toni.
6. Pinġi l-halftone bħala grilja ta’ tikek li d-daqs tagħhom jirrispondu għall-punt oranġjo. Ħallih jikber lil hinn mit-truf tal-qafas qabel ma tikxef il-karta tat-tarf.
7. Sinkronizza l-klikk, l-inżul tat-tikek, il-quċċata tal-graff, il-bidliet fil-forma u t-titlu finali mat-taħbitiet imkejla. Irrendi frejm wieħed għal kull taħbita biex tiċċekkja l-pass qabel l-esportazzjoni sħiħa.

Il-graff u l-punt iridu jsegwu l-istess moviment inkella l-molla se tħossha falza. Żomm l-aċċent oranġjo konsistenti f'kull xena. Agħti ħin separat lit-test li joħroġ u li jidħol sabiex l-ittri ma jikkoinċidux. Meta forma timla l-iskrin, skalaha lil hinn mill-erba' kantunieri kollha. Qabbel il-cursor, il-punt u t-tipografija fl-ewwel u l-aħħar frejms biex tevita li jkun hemm loop stutter.

Staqsini għall-inputs, imbagħad urini l-mappa tal-beat u erba' ritratti (toggle, graph, kinetic type, end card) qabel ma tibni l-video sħiħ.

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.

Prompt meħud minn post @ultimaxbt.