Opus 5.5 оказался крутым моушн-дизайнером. Новая модель Claude умеет генерировать стильные ролики с динамичными интерфейсами.
Кто хочет повторить, вот промт: <inputs> Ask me for: 8 to 12 UI states I want the shape to become (e.g. button, loader, player, slider, toggle, tabs, chart, command palette, toast), pure black and white or one accent color, and a royalty-free song around 120 BPM (e.g. Mixkit, free for commercial use). </inputs>
<direction> Dribbble-level UI motion. One shape, never cut: every state is the same element morphing its size, radius and color while its content swaps with a short blur. A cursor drives every change with real clicks and drags. Light warm-gray canvas, black and white components, one clean UI font (Geist). Springs everywhere, a tiny overshoot at most. The camera zooms so each state fills the frame. The last frame is the first frame, so it loops. Banned: bouncy easing, particle bursts, glows, gradients on UI chrome, mismatched icon strokes, dead time, anything that looks like a template. </direction>
<structure> 120 BPM, 7 bars, something happens on every beat. Button → loader → check → dynamic island → music player with a play/pause morph → scrub the progress bar → it becomes a volume slider that stretches when dragged past max → a toggle flips on the beat → the knob becomes a liquid tab indicator → the tabs open into a chart that draws itself, with a tooltip on hover → it collapses into ⌘K → type to filter → enter → toast → back to the button. </structure>
- <build>
- One HTML file, square 1440x1440. Every style is computed from time inside seek(t): no CSS transitions, no timers, no state carried between frames.
- Springs are closed-form step responses. A value that changes target many times is the sum of one spring per change, so it stays a pure function of time.
- The tab indicator's two edges ride different springs, so the leading edge stretches ahead of the trailing one. Same trick for the toggle knob.
- Drags are direct manipulation: while the cursor is held, the value is computed from its position. On release it springs back from wherever it was.
- Analyze the song with numpy for the beat grid and start on a downbeat. Place every UI sound by its measured peak.
- Render with Playwright: 4 subframes per frame, blended with ffmpeg tmix for motion blur at 60fps.
- Render one frame per beat before the full render. Fix anything off the grid, cramped or hard to read.
- </build>
<gotchas> Never put will-change on anything the camera scales or the text renders blurry. Text that swaps inside a morphing container needs its own enter and exit timing or it overlaps. Make the last frame identical to the first, cursor position and speed included, or the loop stutters. </gotchas>
<start> Ask me for the inputs, then show me the state list on the beat grid before you write any code. </start>
Соберет анимации, подберет фоновый трек, сделает лайв-запись и смонтирует финальное видео.
Комментарии