Back to templates
Spotify-themed product UI motion graphics film made in code with Claude Opus 5.5
Prompt from @brainextends on X · ♥ 41
SaaSClaude OpusKinetic typeProduct UI
Watch the video 
Why it works
- Match-position transitions keep the hero artwork in the same relationship through search, album detail, brand tile, and zoom, so the eye tracks one object.
- The persistent player bar at the bottom links the changing shots while staying visually secondary to the artwork.
- Masked vertical reveals and staggered rows give text and lists a fast, clean entrance without overlapping outgoing titles.
- Controlled motion blur is limited to the fastest zoom, while stationary text and artwork stay sharp.
- Pacing is built on roughly one-second ideas with continuous easing, which suits a tightly edited product film.
Reference prompt
Remix template
Create a complete, polished [PRODUCT]-themed motion graphics video from the following brief. This prompt is self-contained: no reference video or supplied assets are required.
<deliverables> An 18-second MP4 at 1920x1080 and true 60 fps, with music and subtle sound effects. Complete editable source. Build, render, inspect, and refine the animation before delivering it. </deliverables>
<art_direction>
A premium product film inside a large, nearly black rounded rectangular stage, roughly 80% of canvas width and 75% of its height, centered horizontally and slightly below the vertical center. Outside the stage, a soft atmospheric brand-aligned gradient fading to near-black at the bottom.
Inside the stage: near-black background, white primary typography, muted gray secondary text, one accent color for emphasis and controls, one clean sans-serif font, consistent icon strokes, restrained shadows. Compact centered compositions with substantial negative space. Text should feel like product advertising, not oversized headings. No outer caption, watermark, footer, or progress counter.
</art_direction>
<artwork> Create original square hero artwork for a fictional track, edge to edge, with no text, logo, or border, used consistently throughout the film. Create additional designed sleeves with bold typography and simple geometric motifs in complementary colors. Feature these in the layout: [FEATURES]. </artwork>
<timeline> Describe each beat in seconds: icon arrival, masked vertical identity reveal, a desktop interface rising with a perspective tilt that settles frontal, a move closer to featured covers with titles, a compact list with staggered rows, a horizontal strip sliding sideways with cropped edge cards, a search field and typed query, a selected cover that expands and slides left with track info, a brand-color fill and contracted tile, a dramatic zoom with controlled motion blur, a typographic statement with one white and one accent line, a sleeve layout that spreads and tilts, floating covers with depth ordering, and a final convergence into a logo beside a wordmark that holds to the end. </timeline>
<persistent_player> One narrow rounded player bar near the bottom of the inner stage: small artwork thumbnail, title and artist, play and skip controls, thin progress track, volume icon, subdued dark translucent styling with a fine border. Visually secondary to the artwork. </persistent_player>
<motion_quality> Match the energy of a tightly edited premium product film. Most ideas last about one second, with smooth transitions and continuous acceleration and deceleration. Favor critically damped springs or carefully tuned easing. No bouncing or large overshoots. Use match-position transitions, coordinated scaling, masked reveals, and perspective. Outgoing titles disappear before incoming titles occupy the same space. Avoid overlapping text, camera resets, long blank intervals, and full-frame crossfades. Clip oversized covers cleanly to the rounded stage. No particles, lens flares, camera shake, or stock footage. </motion_quality>
<audio> Commercially usable electronic music around 120 BPM with a clean pulse, warm bass, restrained melodic elements, and subtle transition accents. Align entrances, selections, zooms, and the logo reveal with musical events. Effects quieter than music. No voiceover. No copyrighted tracks without permission. </audio>
<implementation_and_validation> Build a deterministic animation driven by absolute time through an async window.seek(t) function. Every transform, opacity, mask, and UI state must be reproducible in any seek order. No live timers or CSS transition state during export. Render true 60 fps with spatial antialiasing and 3-5 temporal subframes. Keep stationary text and artwork sharp. Inspect contact sheets and moving playback, verify frame timestamps and full duration, and fix defects before delivering the MP4 and editable source. </implementation_and_validation>Customize this prompt for my productOnly your product name is required. Nothing is uploaded.