A detailed prompt for Claude Opus 5.5 to create a sophisticated, loopable UI motion design video using HTML/Canvas, featuring spring physics and beat-synced transitions.
Prompt
<inputs>
Ask me these 3 things: 8-12 UI components that morph into each other (e.g., button, loader, music player, volume slider, toggle switch, tab, chart, command palette, notification), color scheme (strict black and white or one accent color), and a royalty-free track around 120 BPM (e.g., from Mixkit).
</inputs>
<direction>
Create polished screen motion worthy of Dribbble. Use only one shape; never cut scenes. Represent all states by the same shape changing size, corner radius, and color, swapping content with short blurs. The cursor drives all changes via real clicks and drags. Background is warm light gray, components are black and white. Text is in Japanese (Noto Sans JP) and English/symbols (Geist). All motion uses natural spring physics with minimal overshoot. Camera zooms to fill the screen for each state. Loop perfectly (last frame matches first). Forbidden: bouncy motion, particle explosions, glow effects, gradients on components, inconsistent icon weights, dead air, template-like aesthetics.
</direction>
<structure>
120 BPM, 7 bars (~14 seconds), something happens every beat.
Button -> Loader -> Checkmark -> Dynamic Island style -> Music Player play/pause morph -> Scrubber drag -> Volume slider stretch -> Toggle switch sync -> Liquid tab selection -> Tab opens to self-drawing chart -> Collapses to Command Palette -> Type/Search -> Enter -> Notification -> Back to Button.
</structure>
<build>
1. Single HTML file, 1440x1440 square. Compute all visuals inside seek(t). No CSS transitions/timers. Stateless between frames.
2. Springs as closed-form step responses. Superpose calculations for changing targets.
3. Tab selection: separate springs for left/right edges, leading edge extends faster.
4. Dragging: direct manipulation while held, spring return when released.
5. Analyze audio with numpy for beat grid. Sync sounds to measured peaks.
6. Render with Playwright. Export 4 subframes per frame, blend with ffmpeg tmix for motion blur at 60fps.
7. Preview one frame per beat before full render to fix timing/readability issues.
</build>
<gotchas>
Never use will-change on camera-zoomed elements (causes text blur). Give entering/exiting text unique timings to prevent overlap. Ensure last frame matches first exactly (cursor position/speed included) for smooth looping.
</gotchas>
<start>
First ask for inputs, then show me the beat-by-beat state list before writing code.
</start>
How to use this prompt
1
Copy the full prompt above.
2
Open a platform that supports Claude Opus 5.5, such as YouMind, and paste the prompt in.
3
Swap the subject, style, or details to fit your idea, then generate.
This is a free AI prompt from YouMind's prompt library. Explore thousands more video prompts, all free to copy and adapt.
Let AI search through tens of thousands of prompts. Filter by model, time range, keywords, and sort by engagement — views, bookmarks, reposts and more.
Turn any photo into a detailed AI image prompt. The free image to prompt converter analyzes composition, style, and lighting so you can recreate any look in seconds.
