Back to templates
UI morph motion design video made with Claude Opus 5.5
Prompt from @twoclipping on X · ♥ 12.7k
OtherClaude OpusProduct UI
Watch the video 
Why it works
- One continuous element morphs between states, so every change reads as the same object rather than a cut.
- Springs are closed-form and kept to a tiny overshoot, avoiding bouncy easing as the template requires.
- Two edges of the tab indicator and the toggle knob ride different springs, which creates a liquid stretch.
- Drags compute the value directly from cursor position, then spring back from the release point, so interaction feels physical.
- Changes are placed on a 120 BPM beat grid, with something happening on every beat across 7 bars.
Reference prompt
Remix template
Ask me for: [FEATURES] as the UI states I want the shape to become, a pure black and white or single accent color scheme, and a royalty-free song around 120 BPM. Dribbble-level UI motion for [PRODUCT]. 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. 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. Structure: 120 BPM, 7 bars, something happens on every beat, moving through [FEATURES] in order and ending back at the starting state. Build: one HTML file, square 1440x1440, every style computed from time inside seek(t) with no CSS transitions, timers, or carried state. Springs are closed-form step responses; a value that changes many times is a sum of one spring per change. Drags compute the value from cursor position while held and spring back on release. 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 at 4 subframes per frame, blended with ffmpeg tmix for motion blur at 60fps. Render one frame per beat before the full render and fix anything off-grid, cramped, or hard to read. Gotchas: never put will-change on anything the camera scales; give swapping text its own enter and exit timing; make the last frame identical to the first, including cursor position and speed.Customize this prompt for my productOnly your product name is required. Nothing is uploaded.