Sistem gerakan titik oranye

Jaluk aku: label cendhak kanggo tombol pambuka, siji tembung pahlawan, persentase kanggo grafik, teks kanggo kertu pungkasan, siji warna aksen, lan trek kanthi ketukan sing jelas.

Film desain gerakan 2D kanthi rasio 16:9. Gunakake kanvas putih pucat sing anget, latar mburi meh ireng, tipografi sing kandel, lan aksen oranye sing cerah. Titik oranye nyambungake saben adegan: diwiwiti ing UI, dadi titik ing ndhuwur huruf, nglacak grafik pegas, tuwuh dadi bentuk, lan bali ing kertu pungkasan. Kursor nggawe klik pambuka krasa nyata. Jaga gerakan tetep tajem lan terkendali, kanthi overshoot pegas cilik lan ora ana wektu mati.
Dilarang: rekaman stok, gradien, cemlorot, semburan partikel, transisi acak, lan gerakan sing ora ana gandhengane karo elemen sing wis ana ing layar.

Kira-kira 15 detik, kanthi owah-owahan visual ing saben ketukan utama.
Bukak: kursor ngeklik saklar oranye ing jejere "Kurangi Gerakan". Huruf-huruf kasebut mlengkung lan obah ing panggonane nganti mung kari "Gerakan", kanthi titik oranye ing ndhuwur "i".
Musim semi: titik kasebut mlumpat adoh saka tembung lan ndharat ing grafik. Jalure nggambar respon musim semi, ngluwihi target lan mapan ing jejere callout "+22%".
Wangun: titik kasebut mumbul ngliwati garis, tuwuh dadi bunderan oranye lan ngisi pigura. Kothak bunder ireng muter ing njero, banjur mbentang dadi pil. Adegan kasebut nyusut dadi titik oranye siji ing ireng.
Tipe: tembung kaya "SPRINGS", "EASING", "KINETIC TYPE", "3D" lan "SOUND" ngubengi titik kasebut. Bunderan tipe kasebut mbukak dadi lapangan titik-titik cilik.
Bukak: kolom halftone ngembang lan malih dadi ireng, nuduhake kertu pungkasan: " Opus 5.5 ", "Motion designer." lan "0 keyframes".
Bali: titik oranye obah bali liwat halftone, grafik lan toggle. Cocokake pigura pungkasan karo sing pertama supaya video muter kanthi rapi.

1. Siji file HTML, 1920x1080 ing 60fps. Itung saben visual saka wektu ing njero seek(t): ora ana transisi CSS, timer utawa status sing digawa antarane frame.
2. Gunakake pegas bentuk tertutup kanggo toggle, titik mantul, lan grafik. Gambar grafik saka fungsi pegas sing padha sing mindhah titik kasebut.
3. Animasikake aksara siji-siji kanggo transformasi "Kurangi Gerakan" dadi "Gerakan". Jaga titik oranye tetep nempel ing "i" nganti titik kasebut wiwit mlumpat.
4. Gawe bunderan oranye, puter kothak lan bentuk bunder kanthi kahanan sing beda-beda kanthi bentuk sing padha. Pertahanake posisi lan gerakane ing saben transformasi.
5. Selehake tembung-tembung sing ngorbit ing sadawane jalur bunder, banjur pindhahake aksarane metu kanggo menehake pigura menyang kothak halftone.
6. Gambar halftone minangka kothak titik-titik sing ukurane nanggepi titik oranye. Enteni nganti ngluwihi pinggiran pigura sadurunge mbukak kertu pungkasan.
7. Sinkronake klik, titik pendaratan, puncak grafik, owah-owahan bentuk, lan judhul pungkasan menyang ketukan sing diukur. Render siji frame saben ketukan kanggo mriksa pacing sadurunge ekspor lengkap.

Grafik lan titik kudu ngetutake gerakan sing padha utawa pegas bakal krasa palsu. Jaga aksen oranye tetep konsisten ing saben adegan. Wenehana wektu sing kapisah kanggo teks metu lan mlebu supaya huruf ora tumpang tindih. Nalika ana wujud sing ngisi layar, skala nganti ngluwihi kabeh papat pojok. Cocokake kursor, titik, lan tipografi ing pigura pisanan lan pungkasan kanggo nyegah gagap puteran.

Jaluk masukan saka aku, banjur tuduhake peta ketukan lan papat gambar (toggle, grafik, jinis kinetik, kertu pungkasan) sadurunge nggawe video lengkap.

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.

Pandhuan dijupuk saka pos @ultimaxbt.