راه‌اندازی: سیستم حرکتی نقطه نارنجی

از من بخواهید: یک برچسب کوتاه برای دکمه شروع، یک کلمه برجسته، یک درصد برای نمودار، متن برای کارت آخر، یک رنگ تأکیدی و یک آهنگ با ضرب آهنگ واضح.

یک فیلم طراحی حرکت دوبعدی با نسبت تصویر ۱۶:۹. از یک بوم سفید مایل به کرم گرم، پس‌زمینه‌های تقریباً مشکی، تایپوگرافی جسورانه و یک لهجه نارنجی زنده استفاده کنید. نقطه نارنجی هر صحنه را به هم متصل می‌کند: از رابط کاربری شروع می‌شود، به نقطه‌ای روی یک حرف تبدیل می‌شود، یک نمودار فنری را ترسیم می‌کند، به شکل تبدیل می‌شود و در کارت پایان برمی‌گردد. مکان‌نما باعث می‌شود کلیک اولیه واقعی به نظر برسد. حرکت را تیز و کنترل‌شده نگه دارید، با جهش‌های فنری کوچک و بدون زمان تلف‌شده.
موارد ممنوعه: تصاویر استوک، گرادیان‌ها، درخشش‌ها، انفجار ذرات، انتقال‌های تصادفی و حرکتی که به عنصری که از قبل روی صفحه نمایش است متصل نیست.

حدود ۱۵ ثانیه، با یک تغییر بصری در هر ضرب‌آهنگ اصلی.
باز کردن: مکان‌نما روی ضامن نارنجی کنار «کاهش حرکت» کلیک می‌کند. حروف خم می‌شوند و در جای خود قرار می‌گیرند تا زمانی که فقط «حرکت» باقی بماند، و نقطه نارنجی بالای «i» قرار گیرد.
جهش: نقطه از کلمه جدا شده و روی نمودار قرار می‌گیرد. مسیر آن یک پاسخ جهشی را رسم می‌کند، از هدف فراتر می‌رود و کنار علامت «+۲۲٪» قرار می‌گیرد.
شکل: نقطه از یک خط عبور می‌کند، به یک دایره نارنجی تبدیل می‌شود و قاب را پر می‌کند. یک مربع گرد سیاه درون آن می‌چرخد، سپس به شکل یک قرص کشیده می‌شود. صحنه به یک نقطه نارنجی منفرد روی زمینه سیاه خلاصه می‌شود.
تایپ: کلماتی مانند "فنر"، "تسکین دهنده"، "نوع جنبشی"، "سه بعدی" و "صدا" دور نقطه می‌چرخند. دایره تایپ به میدانی از نقاط کوچک باز می‌شود.
آشکار شدن: فیلد نیم‌رنگ گسترش می‌یابد و به رنگ سیاه درمی‌آید و کارت نهایی را آشکار می‌کند: «Opus 5.5»، «Motion designer» و «0 keyframes».
بازگشت: نقطه نارنجی از میان نیم‌رنگ‌ها، نمودار و ضامن به عقب حرکت می‌کند. فریم آخر را با فریم اول مطابقت دهید تا ویدیو به طور واضح تکرار شود.

۱. یک فایل HTML ، ۱۹۲۰x۱۰۸۰ با سرعت ۶۰ فریم در ثانیه. محاسبه هر تصویر از نظر زمان درون seek(t): بدون انتقال CSS ، تایمر یا حالت که بین فریم‌ها منتقل می‌شود.
۲. از فنرهای فرم بسته برای نقطه جهشی، نقطه جهنده و نمودار استفاده کنید. نمودار را از همان تابع فنری که نقطه را حرکت می‌دهد، رسم کنید.
۳. حروف را به صورت جداگانه برای تبدیل «کاهش حرکت» به «حرکت» متحرک کنید. نقطه نارنجی را تا زمانی که «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.

دستور العمل گرفته شده از پست @ultimaxbt.