AI PROMPT · 71
动态设计系统提示词
<inputs> 请向我询问以下内容：开场切换按钮的简短标签、一个核心词汇、图表的百分比数值、最终卡片上的文本、一种强调色，以及一段节奏清晰的音轨。 </inputs> <direction> 制作一部 16:9 比例的 2D 动态设计短片。使用暖色调米白色画布、近黑色背景、粗体排版和鲜明的橙色作为强调色。橙色圆点是连接每个场景的核心元素：它始于 UI 界面，演变为字母上方的点，描绘出弹簧曲线图，生长为形状，并在结尾卡片中回归。光标操作让开场的点击动作显得真实自然。保持运动锐利且受控，包含微小的弹簧过冲效果，杜绝任何无效的时间停顿。 禁止使用：库存素材、渐变、光晕、粒子爆发、随机转场，以及与屏幕上已有元素无关联的运动。 </direction> <structure> 总时长约 15 秒，每个主要节拍都伴随视觉变化。 开场：光标点击“Reduce Motion”旁边的橙色切换按钮。字母弯曲并移动归位，直到仅剩下“Motion”，且橙色圆点位于“i”上方。 弹簧：圆点从单词处跳离，落在图表上。其路径绘制出弹簧响应曲线，越过目标值后稳定在“+22%”标注旁。 形状：圆点沿线条快速移动，生长为橙色圆形并填满画面。一个黑色圆角方形在其内部旋转，随后拉伸成胶囊形。场景收缩为黑底上的单个橙色圆点。 排版：“SPRINGS”、“EASING”、“KINETIC TYPE”、“3D”和“SOUND”等词汇围绕圆点轨道运行。文字圆圈向外展开，形成由微小圆点构成的场域。 揭示：半调网点场域扩展并翻转为黑色，显现最终卡片：“Opus 5.5”、“Motion designer.” 和 “0 keyframes”。 回归：橙色圆点穿过半调网点、图表和切换按钮回到原点。使最后一帧与第一帧匹配，确保视频无缝循环。 </structure> <build> 1. 生成一个 HTML 文件，分辨率为 1920x1080，帧率为 60fps。所有视觉效果均基于 seek(t) 中的时间计算得出：不使用 CSS 过渡、计时器或跨帧状态保留。 2. 对切换按钮、弹跳圆点和图表使用闭式弹簧公式。使用驱动圆点运动的同一弹簧函数来绘制图表。 3. 逐个动画处理字母，以实现从“Reduce Motion”到“Motion”的转换。在圆点开始跳跃之前，保持橙色圆点始终附着在“i”上。 4. 将橙色圆形、旋转方形和胶囊形视为同一形状的不同状态。在每次变换过程中保持其位置和运动轨迹的连续性。 5. 将环绕的文字放置在圆形路径上，然后将它们的字母向外移动，将画面交接给半调网格。 6. 将半调图案绘制为由大小随橙色圆点变化的圆点组成的网格。在显示结束卡片之前，让其生长至超出画面边缘。 7. 将点击、圆点落地、图表峰值、形状变化和最终标题同步到测量出的节拍上。
VIDEO PREVIEW
视频预览
PROMPT
<inputs> 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. </inputs> <direction> 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. </direction> <structure> 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. </structure> <build> 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.