UI motion design film made with Claude Opus 5.5: Claude Opus launch video

Ask me for: a target value for the slider, three short notification messages, a reply to type, one accent color and a royalty-free track around 120 BPM. If I skip anything, use 100, "Slider - Reached 100", "Gravity - Something is falling", "Messages - What now?", "retry" and electric blue.

<direction>
A 10-second 2D UI motion film in 16:9. Place everything on a near-black canvas with a faint dot grid. Use charcoal controls, sharp white text, one blue accent and a white ball that moves through the entire film. A real cursor makes the opening click feel physical; the ball guides each transition that follows. Keep the UI clean and the impacts precise, with only small spring overshoots. Move the camera through one continuous layout so every interaction fills the frame.

Banned: hard cuts, stock footage, glows, particle bursts, disconnected transitions, excessive bouncing and blurry text during camera moves.
</direction>

<structure>
Around 10 seconds, with something happening on every major beat.

Toggle: the cursor clicks a blue switch. Its white ball springs free, and the camera follows it toward a horizontal slider.

Slider: the ball lands on the knob and moves it along the track. The blue fill stays attached, while a value bubble above the knob climbs to 100.

Notifications: hitting 100 sends the ball onward and brings in three dark cards: "Slider", "Gravity" and "Messages". Each arrives on its own beat. The camera follows the ball down to "What now?".

Reply: the small "Reply" pill stretches into a text field. A keyboard rises below it as part of the same scene.

Keyboard: the ball strikes the keys while "retry" appears in the field. It lands on Return, the blue send button activates and the reply contracts into a small blue message.

Return: the camera pulls back to show the toggle, slider, cards and keyboard together in one world. The ball travels back to the first switch. Match its position, the cursor and the switch state to the opening frame so the film loops cleanly.
</structure>

<build>
1. Make one HTML file at 1920x1080 and 60fps. Calculate every visual from time inside seek(t): no CSS transitions, timers or state carried between frames.
2. Arrange all UI components in one world. Use a single camera transform with position and log-space zoom, making each close-up a move through that world.
3. Give the white ball one continuous route between the toggle, slider, cards and keys. Use closed-form springs for landings and a brief squash on impact.
4. Calculate the slider fill and number from the ball's horizontal position. Keep the tooltip centered over the knob until it reaches 100.
5. Give every key press a fixed time. Show the reply as the portion typed by that moment, so any frame can be rendered independently.
6. Align the click, slider movement, card arrivals, key taps, send and return with measured beats. Add a subtle UI sound to each contact.
7. Render one still per beat to check pacing and readability, then export the full film with Playwright at 60fps. Inspect fast camera moves and the loop boundary frame by frame.
</build>

<gotchas>
Never let the ball teleport between components: show the path of every handoff. Keep the value bubble attached to the slider knob. Leave enough space for the notifications to stay readable during camera moves. The keys the ball presses must match the text appearing in the field. Match the first and last frames, including the ball's direction and cursor position, to prevent a loop stutter.
</gotchas>

<start>
Ask me for the inputs, then show me the beat map and four stills (toggle, slider, notifications, keyboard) before building the full video.
</start>

How it was made

The author credits Opus 5.5 and says the motion uses 0 keyframes. The shared prompt specifies one HTML file at 1920x1080 and 60fps, with every visual calculated from time inside seek(t), no CSS transitions or timers, and a Playwright export at 60fps. The author shares no cost or render-time details.

Tools

Claude Opus

Shot breakdown

1. Beat 1Toggle: a cursor clicks a blue switch, and its white ball springs free while the camera moves toward a horizontal slider.
2. Beat 2Slider: the ball lands on the knob and moves it along the track. The blue fill stays attached and a value bubble above the knob climbs to 100.
3. Beat 3Notifications: reaching 100 sends the ball onward and three dark cards arrive one at a time: Slider, Gravity and Messages. The camera follows the ball down to 'What now?'.
4. Beat 4Reply: the small Reply pill stretches into a text field, and a keyboard rises below it as part of the same scene.
5. Beat 5Keyboard: the ball strikes the keys while 'retry' appears in the field. It lands on Return, the blue send button activates and the reply contracts into a small blue message.
6. Beat 6Return: the camera pulls back to show the toggle, slider, cards and keyboard together. The ball travels back to the first switch, matching the opening cursor and switch state for a seamless loop.

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

Why it works

• A single continuous ball route links every component, so each handoff reads as motion rather than a cut.
• One camera moves through a shared layout, so each close-up is a move within the same world.
• Closed-form springs with small overshoot and a brief squash keep landings precise without excessive bounce.
• Key presses at fixed times, with typed text matching the keys struck, keep the reply readable and consistent frame to frame.
• Matching the first and last frames (ball direction, cursor position, switch state) prevents a loop stutter.

Related videos

• Image-to-video motion graphics test made with Claude Opus@_topi_003
• Motion design launch video for supasito.com made with Claude Opus 5.5@wozu_co
• Motion graphics showreel tutorial made with the Hyperframes skill and Claude Opus@thayto_dev
• Beat-synced 3D sphere drop animation built with three.js and Claude Opus@gorden_sun
• History of Indian civilisation video made with Opus 5.5 and a film generation skill@buildfastwithai
• Explainer motion graphics video on the First & 10 Yellow Line, made with Opus@blueoctopusai