Sistem gerak titik oranye

Mintalah kepada saya: label singkat untuk tombol pembuka, satu kata kunci utama, persentase untuk grafik, teks untuk kartu terakhir, satu warna aksen, dan sebuah lagu dengan irama yang jelas.

Film desain gerak 2D dalam rasio aspek 16:9. Gunakan kanvas putih pucat yang hangat, latar belakang hampir hitam, tipografi yang berani, dan satu aksen oranye yang mencolok. Titik oranye menghubungkan setiap adegan: dimulai di UI, menjadi titik di atas huruf, menelusuri grafik pegas, tumbuh menjadi sebuah bentuk, dan kembali pada kartu penutup. Kursor membuat klik pembuka terasa nyata. Jaga agar gerakan tetap tajam dan terkontrol, dengan sedikit gerakan pegas yang berlebihan dan tanpa waktu mati.
Dilarang: cuplikan stok, gradien, efek cahaya, semburan partikel, transisi acak, dan gerakan yang tidak terhubung dengan elemen yang sudah ada di layar.

Sekitar 15 detik, dengan perubahan visual pada setiap ketukan utama.
Buka: kursor mengklik tombol oranye di samping "Kurangi Gerakan". Huruf-huruf tersebut melengkung dan bergerak ke tempatnya hingga hanya "Gerakan" yang tersisa, dengan titik oranye di atas huruf "i".
Spring: titik tersebut melompat menjauh dari kata dan mendarat di sebuah grafik. Jalurnya membentuk respons pegas, melampaui target, dan berhenti di samping keterangan "+22%".
Bentuk: titik tersebut melesat melintasi garis, membesar menjadi lingkaran oranye dan memenuhi bingkai. Sebuah persegi bulat hitam berputar di dalamnya, lalu meregang menjadi bentuk pil. Adegan menyusut menjadi satu titik oranye di atas latar hitam.
Jenis huruf: kata-kata seperti "SPRINGS", "EASING", "KINETIC TYPE", "3D" dan "SOUND" mengorbit titik tersebut. Lingkaran huruf tersebut terbuka menjadi bidang titik-titik kecil.
Ungkapkan: bidang halftone meluas dan berubah menjadi hitam, menampilkan kartu terakhir: " Opus 5.5 ", "Perancang Gerak." dan "0 keyframe".
Kembali: titik oranye bergerak kembali melalui halftone, grafik, dan sakelar. Cocokkan bingkai terakhir dengan bingkai pertama agar video berulang dengan rapi.

1. Satu file HTML, 1920x1080 pada 60fps. Hitung setiap visual dari waktu di dalam seek(t): tanpa transisi CSS, timer, atau status yang dibawa antar frame.
2. Gunakan fungsi pegas tertutup untuk sakelar, titik yang memantul, dan grafik. Gambarlah grafik dari fungsi pegas yang sama yang menggerakkan titik tersebut.
3. Animasikan huruf satu per satu untuk transformasi "Kurangi Gerakan" menjadi "Gerakan". Pertahankan titik oranye yang menempel pada huruf "i" hingga huruf tersebut mulai melompat.
4. Buat lingkaran oranye, persegi yang berputar, dan pil menjadi berbagai wujud dari bentuk yang sama. Pertahankan posisi dan gerakannya melalui setiap transformasi.
5. Letakkan kata-kata yang mengorbit di sepanjang jalur melingkar, lalu gerakkan huruf-hurufnya ke luar untuk menyerahkan bingkai ke kisi-kisi halftone.
6. Gambarlah halftone sebagai kisi-kisi titik yang ukurannya sesuai dengan titik oranye. Biarkan kisi-kisi tersebut meluas melewati tepi bingkai sebelum memperlihatkan kartu terakhir.
7. Sinkronkan klik, pendaratan titik, puncak grafik, perubahan bentuk, dan judul akhir dengan ketukan yang terukur. Render satu frame per ketukan untuk memeriksa kecepatan sebelum ekspor penuh.

Grafik dan titik harus mengikuti gerakan yang sama, jika tidak, efek pegas akan terasa palsu. Jaga agar aksen oranye tetap konsisten di setiap adegan. Berikan pengaturan waktu terpisah untuk teks keluar dan masuk agar huruf tidak tumpang tindih. Ketika sebuah bentuk memenuhi layar, perbesar ukurannya hingga melewati keempat sudut. Cocokkan kursor, titik, dan tipografi pada frame pertama dan terakhir untuk menghindari jeda berulang.

Mintalah masukan dari saya, lalu tunjukkan peta ketukan dan empat gambar diam (tombol pengalih, grafik, tipe kinetik, kartu penutup) sebelum membuat video lengkapnya.

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.

Petunjuk diambil dari pos @ultimaxbt.