Opus 5.5 一句话生成 Dribbble 级动效系统
作者给出完整提示词模板，让 Opus 5.5 用一个 HTML 文件做出 12 个 UI 状态的连续动效短片，含弹簧曲线、音乐节拍驱动与 ffmpeg 渲染。
OPUS 5.5 IS JUST F*CKING INSANE AT MOTION DESIGN. I gave it a motion system spec that would normally take hours in After Effects - and it turned the whole thing into a clean, code-driven animation. No After Effects. No manual keyframes. Just one prompt → one HTML file → a full Dribbble-level motion system. I’m dropping the exact prompt template below. ↓ <inputs> Give me: 8–12 UI states, each with a one-line description; the palette and font; and one royalty-free music track around 120 BPM. </inputs> <direction> Dribbble-quality UI animation. One continuous object, zero cuts. Warm-gray canvas, clean typography, consistent spacing. Use Geist. Every transition should feel intentional: springs, momentum, subtle overshoot. Banned: bouncy easing, unnecessary glows, gradients, inconsistent icon strokes, dead time. </direction> <structure> 120 BPM, 7 bars, with a meaningful action on every beat. Button → loader → check → dynamic island → music player → volume slider → toggle → tab indicator → chart → ⌘K → toast → button. </structure> <build> 1. One HTML file, square 1440×1440. Calculate every visual property from time inside seek(t). No CSS transitions, timers, or state carried between frames. 2. Use closed-form step responses for spring motion instead of relying on animation libraries. 3. Give every animated property its own spring so motion stays independent and controllable. 4. Handle direct manipulation with pointer input and make dragged elements respond naturally. 5. Analyze the music with numpy to extract timing and use the beat grid to drive the animation. 6. Render through Playwright, then use ffmpeg tmix to create subtle temporal smoothing. <gotchas> Don’t use will-change as a shortcut. Text changes should happen cleanly without flicker or layout jumps. The final frame must match the initial frame perfectly so the animation loops seamlessly. </gotchas> <start> Ask me for the inputs first, then show me the complete state list mapped to the beat grid before writing any code. </start>
这条是引用着另一条写的：x.com/unicodef1wn/status/2102375891875581966