قۇرۇلۇۋاتىدۇ: ئاپېلسىن رەڭلىك نۇقتا ھەرىكەت سىستېمىسى

مەندىن سوراڭ: باشلىنىش كۇنۇپكىسىنىڭ قىسقا بەلگىسى، بىر قەھرىمان سۆزى، گىرافىكنىڭ پىرسەنتى، ئاخىرقى كارتىنىڭ تېكىستى، بىر ئاھاڭ رەڭگى ۋە ئېنىق رېتىملىق ناخشا.

16:9 دىكى 2D ھەرىكەتلىك لايىھە فىلىمى. ئىللىق ئاق رەڭلىك رەسىم، قارا رەڭگە يېقىن ئارقا كۆرۈنۈش، قېلىن خەت نۇسخىسى ۋە بىر پارچە جانلىق ئاپېلسىن رەڭلىك بېزەك ئىشلىتىڭ. ئاپېلسىن رەڭلىك نۇقتا ھەر بىر كۆرۈنۈشنى بىرلەشتۈرىدۇ: ئۇ UI دا باشلىنىدۇ، ھەرپنىڭ ئۈستىدىكى نۇقتىغا ئايلىنىدۇ، يايلىق گىرافىكنى كۆرسىتىدۇ، شەكىلگە چوڭىيىدۇ ۋە ئاخىرقى كارتىدا قايتىپ كېلىدۇ. كۆرسەتكۈچ باشلىنىشتىكى چېكىلىشنى ھەقىقىي ھېس قىلدۇرىدۇ. ھەرىكەتنى ئېنىق ۋە كونترول قىلىپ، كىچىك يايلىق ئېشىپ كېتىشلەر ۋە ئۆلۈك ۋاقىت يوق.
چەكلەنگەنلەر: زاپاس كۆرۈنۈشلەر، گرادىيېنتلار، پارقىراقلىقلار، زەررىچە پارتىلاشلىرى، تاسادىپىي ئۆزگىرىشلەر ۋە ئېكراندىكى ئېلېمېنتقا باغلانمىغان ھەرىكەتلەر.

تەخمىنەن 15 سېكۇنت، ھەر بىر چوڭ رېتىمدا كۆرۈنۈش جەھەتتىن ئۆزگىرىش بولىدۇ.
ئېچىلىش: بىر كۆرسەتكۈچ «ھەرىكەتنى ئازايتىش» نىڭ يېنىدىكى ئاپېلسىن رەڭلىك كۇنۇپكىنى چېكىدۇ. ھەرپلەر ئېگىلىپ، پەقەت «ھەرىكەت» قالغانغا قەدەر ئورنىغا يۆتكىلىدۇ، ئاپېلسىن رەڭلىك نۇقتا «i» نىڭ ئۈستىدە بولىدۇ.
باھار: نۇقتا سۆزدىن يىراقلىشىپ، گىرافىكقا چۈشىدۇ. ئۇنىڭ يولى باھار ئىنكاسىنى سىزىپ، نىشاندىن ئېشىپ كېتىپ، «+22%» دېگەن بەلگە يېنىغا چۈشۈپ قالىدۇ.
شەكىل: نۇقتا بىر سىزىقنىڭ ئۈستىدىن ئۆتۈپ، قىزغۇچ سېرىق چەمبەرگە ئايلىنىپ، رامكىنى تولدۇرىدۇ. قارا يۇمىلاق كۋادرات ئۇنىڭ ئىچىدە ئايلىنىدۇ، ئاندىن بىر پارچە شەكىلگە ئايلىنىدۇ. كۆرۈنۈش قارا رەڭدىكى بىرلا قىزغۇچ سېرىق نۇقتا شەكىللىنىدۇ.
تىپ: «SPRINGS» (بۇلاق)، «EASING» (ئاسما ئۆزگىرىش)، «KINETIC TYPE» (كىنېتىك تىپ)، «3D» ۋە «SOUND» (ئاۋاز) قاتارلىق سۆزلەر نۇقتىنىڭ ئەتراپىدا ئايلىنىدۇ. تىپ چەمبىرى كىچىك نۇقتىلاردىن تەركىب تاپقان بىر مەيدانغا ئېچىلىدۇ.
ئاشكارىلاش: يېرىم رەڭ دائىرىسى كېڭىيىپ قارا رەڭگە ئۆزگىرىدۇ، ئاخىرقى كارتا كۆرسىتىلىدۇ: «Opus 5.5»، «ھەرىكەت لايىھىلىگۈچىسى.» ۋە «0 ئاچقۇچلۇق رامكا».
قايتىش: قىزغۇچ سېرىق نۇقتا يېرىم رەڭ، گىرافىك ۋە ئالماشتۇرۇش ئارقىلىق قايتىپ كېلىدۇ. ئاخىرقى كادىرنى بىرىنچىسى بىلەن ماسلاشتۇرۇڭ، شۇنداق قىلساق سىن پاكىز ئايلىنىدۇ.

1. بىر HTML ھۆججىتى، 1920x1080، 60fps سۈرئىتىدە. seek(t) ئىچىدىكى ھەر بىر كۆرۈنۈشنى ۋاقىتتىن باشلاپ ھېسابلاڭ: رامكىلار ئارىسىدا CSS ئۆتكۈنچى، ۋاقىت ئۆلچەش ئەسۋابى ياكى ھالەت يوق.
2. ئالماشتۇرۇش، سەكرەش نۇقتىسى ۋە گىرافىك ئۈچۈن يېپىق شەكىللىك يايلارنى ئىشلىتىڭ. گىرافىكنى نۇقتىنى يۆتكىگەن ئوخشاش ياي فۇنكسىيەسىدىن سىزىڭ.
3. «ھەرىكەتنى ئازايتىش» تىن «ھەرىكەت» گە ئۆزگەرتىش ئۈچۈن ھەرپلەرنى ئايرىم-ئايرىم ھالدا جانلاندۇرۇڭ. «i» گە ئۇلانغان ئاپېلسىن رەڭلىك نۇقتىنى ئۇ سەكرەشكە باشلىغۇچە ساقلاپ قويۇڭ.
4. قىزغۇچ سېرىق رەڭلىك چەمبەر ياساپ، كۋادرات شەكلىنى ئايلاندۇرۇڭ ۋە ئوخشاش شەكىلدىكى ھەر خىل ھالەتلەرنى ھاسىل قىلىڭ. ھەر بىر ئۆزگەرتىش جەريانىدا ئۇنىڭ ئورنى ۋە ھەرىكىتىنى ساقلاڭ.
5. ئوربىتىدا ئايلىنىۋاتقان سۆزلەرنى ئايلانما يول بويىغا قويۇڭ، ئاندىن رامكىنى يېرىم رەڭلىك تورغا يۆتكەش ئۈچۈن ئۇلارنىڭ ھەرپلىرىنى سىرتقا يۆتكەڭ.
6. يېرىم رەڭنى چوڭلۇقى قىزغۇچ سېرىق نۇقتىغا ماس كېلىدىغان نۇقتىلار تورى شەكلىدە سىزىڭ. ئاخىرقى كارتىنى كۆرسىتىشتىن بۇرۇن، ئۇنىڭ رامكا گىرۋىكىدىن ئېشىپ كېتىشىگە يول قويۇڭ.
7. چېكىش، نۇقتا قويۇش، گىرافىك چوققىسى، شەكىل ئۆزگىرىشى ۋە ئاخىرقى ماۋزۇنى ئۆلچەنگەن سوقۇشلار بىلەن ماسلاشتۇرۇڭ. تولۇق ئېكسپورت قىلىشتىن بۇرۇن سۈرئەتنى تەكشۈرۈش ئۈچۈن ھەر بىر سوقۇشقا بىر كادىر رېندېرلاڭ.

گىرافىك ۋە نۇقتا ئوخشاش ھەرىكەتكە ئەگىشىشى كېرەك، بولمىسا ياي ساختىلىق ھېس قىلىنىدۇ. ھەر بىر كۆرۈنۈشتە ئاپېلسىن رەڭلىك ئاھاڭ بىردەك بولسۇن. ھەرپلەرنىڭ قاپلىشىپ كەتمەسلىكى ئۈچۈن، چىقىش ۋە كىرىش تېكىستلىرىنىڭ ۋاقتىنى ئايرىم بەلگىلەڭ. بىر شەكىل ئېكراننى تولدۇرغاندا، ئۇنى تۆت بۇلۇڭدىن ئۆتكۈزۈپ قويۇڭ. ھالقىنىڭ توختاپ قېلىشىدىن ساقلىنىش ئۈچۈن، بىرىنچى ۋە ئاخىرقى رامكىلاردا كۆرسەتكۈچ، نۇقتا ۋە خەت شەكلىنى ماسلاشتۇرۇڭ.

مەندىن كىرگۈزۈشلەرنى سوراڭ، ئاندىن تولۇق سىننى ياساشتىن بۇرۇن ماڭا رېتىم خەرىتىسى ۋە تۆت سۈرەت (ئالماشتۇرۇش، گىرافىك، ھەرىكەت تىپى، ئاخىرلىشىش كارتىسى) نى كۆرسىتىڭ.

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.

سوئال ئېلىندى پوچتا @ultimaxbt.