UI shape-morph motion design video made with Claude Opus 5.5: Claude Opus launch video

Originally posted by @demonugc on X · posted Sep 25, 2026 · curated by MotionHunt, updated Oct 16, 2026

In short

A motion-design video in which one UI shape morphs through a sequence of interface states (button, loader, check, dynamic island, music player, slider, toggle, tabs, chart, command palette, toast) on a 120 BPM, 7-bar beat grid. The author says it is entirely code with no After Effects and is sharing the prompt template.

How it was made

The author says the video was made with Opus 5.5 and that it is entirely code with 0 After Effects. The post shares a build template describing a single HTML file driven by time in seek(t), closed-form spring step responses, numpy beat analysis of a royalty-free song, and Playwright rendering with 4 subframes per frame blended by ffmpeg tmix into 60fps motion blur. The author did not share the time or cost of production.

Tools: Claude Opus

Shot breakdown

Order 1Button, then loader, then check: the single black-and-white shape morphs its size, radius and color as its content swaps.
Order 2Shape becomes a dynamic island.
Order 3Shape becomes a music player with a play/pause morph.
Order 4Cursor scrubs the progress bar, which then becomes a volume slider that stretches when dragged past max.
Order 5A toggle flips on the beat, and its knob becomes a liquid tab indicator.
Order 6Tabs open into a chart that draws itself, with a tooltip on hover.
Order 7Shape collapses into a ⌘K command palette; typing filters the list.
Order 8Enter is pressed and a toast appears.
Order 9The toast returns the shape to the starting button, so the last frame matches the first for a loop.

Breakdown written by AI from the prompt and post, reviewed by MotionHunt.

Why it works

One element morphs through every state and is never cut, which keeps the piece visually continuous.
Every change is tied to the 120 BPM grid, with something happening on every beat across 7 bars.
Springs are closed-form and the tab and toggle edges use different springs, so the leading edge stretches ahead of the trailing one.
Drags are direct manipulation: the value follows the cursor and springs back on release.
Text swaps use their own enter and exit timing with a short blur so they do not overlap during morphs.

Remix it for your product

Create a square motion-design piece for [PRODUCT] using one shape that never cuts. It morphs its size, radius and color through these UI states, in order: [FEATURES]. Use a light warm-gray canvas, black and white components, and one clean UI font. Use springs with at most a tiny overshoot, and no bouncy easing, glows, gradients on UI chrome, or particle effects. Every change is driven by a cursor with real clicks and drags. Sync every change to a 120 BPM song with 7 bars, starting on a downbeat with something happening on every beat. Zoom the camera so each state fills the frame. The last frame must match the first, including cursor position and speed, so it loops.

Fill in your product, set the direction and add screenshots. Copy the brief or download a ZIP for Claude Code.

Customize this prompt