Opus 5.5 turns a single prompt into a Dribbble-level motion system
The author shares a full prompt template that has Opus 5.5 build a continuous 12-state UI animation in one HTML file, with spring curves, beat-driven timing and ffmpeg rendering.
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>
This post quotes another post: x.com/unicodef1wn/status/2102375891875581966