橙点运动系统

请告诉我：开头切换按钮的简短标签、一个主打词、图表的百分比、最后一张卡片的文字、一种强调色以及一首节奏清晰的歌曲。

一部16:9比例的二维动态设计影片。使用温暖的米白色画布、近乎黑色的背景、醒目的字体，以及一个鲜艳的橙色点缀。这个橙色圆点贯穿所有场景：它从用户界面开始，变成字母上的圆点，沿着弹簧曲线移动，最终变成一个形状，并在片尾再次出现。光标使开头的点击动作显得真实。保持动作流畅、控制精准，弹簧的过冲幅度要小，并且避免任何停顿。
禁止使用：素材片段、渐变、发光、粒子爆发、随机转场以及与屏幕上已有元素无关的运动。

大约持续 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.