Spotify-themed product UI motion graphics film made in code with Claude Opus 5.5

Originally posted by @brainextends on X · posted Sep 26, 2026 · curated by MotionHunt, updated Oct 16, 2026

In short

An 18-second Spotify-themed motion graphics video in a rounded dark stage on a green gradient. The author says it is all code with no After Effects. The brief specifies 1920×1080 at 60 fps, and the author shared that full prompt.

Prompt

Reconstructed

Create a complete, polished Spotify-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 1920×1080 and true 60 fps, with music and subtle sound effects Complete editable source Build, render, inspect, and refine the animation before delivering it Do not stop at a storyboard, still images, or an implementation plan </deliverables>
<art_direction>
A premium music-product film presented inside a large, nearly black rounded rectangular stage
The stage occupies roughly 80% of the canvas width and 75% of its height, centered horizontally and slightly below the vertical center
Outside the stage, use a soft atmospheric green background: luminous emerald near the upper-left corner, deeper forest green toward the sides, fading to near-black at the bottom
Inside the stage:
Near-black background
White primary typography
Muted gray secondary text
Spotify green # 1ED760 for emphasis and controls
One clean sans-serif font, such as Geist or Inter
Consistent icon strokes and restrained shadows
Keep compositions compact and centered, with substantial negative space
Text should feel like music-product advertising, not oversized presentation headings
Do not add an outer caption, creator watermark, decorative footer, or progress counter
</art_direction>

<artwork> Create original square album artwork for a fictional track called “Glass Tides” by “AURA”
The hero cover is an abstract macro image of flowing pearlescent liquid silk and molten glass
Use pastel lavender, powder cyan, blush pink, champagne gold, and subtle mint
Include broad three-dimensional folds, realistic reflective highlights, delicate striations, and a prominent sweeping S-shaped fold
Fill the square edge to edge
No text, logo, or border on this hero artwork
Use this same artwork consistently throughout the film

Create additional designed playlist sleeves:
“Late Nights” in mustard yellow
“Good Energy” in pink
“Deep Focus” in blue
“Daily Mix 1”, “Daily Mix 2”, and “Daily Mix 3” in complementary colors

These should look like finished graphic-design covers, with bold typography and simple geometric motifs
</artwork>

<timeline> 0.0–0.6 seconds: A green Spotify icon grows smoothly into the center of the dark stage Give it a confident arrival with minimal overshoot
0.6–1.5 seconds:
The icon transitions into a small Spotify identity above two centered lines:
“Discover”
“new music”
The first line is white; the second is green
Reveal them with short masked vertical movements
1.5–2.4 seconds:
A stylized Spotify desktop interface rises into view
Show a slim sidebar, “Made for you”, three album cards, and small supporting rows
Use a subtle perspective tilt during the entrance, settling toward a frontal view
2.4–3.2 seconds:
Move closer to the three featured covers
Show “New for you” above them
Keep the artwork crisp, with short album titles beneath
A narrow rounded player bar now anchors the bottom of the stage
3.2–4.0 seconds:
The featured cards withdraw into a compact “Fresh finds” list
Reveal four song rows with a slight stagger
Each row contains a thumbnail, short track title, artist, and a small menu icon
4.0–4.9 seconds:
Transition into a horizontal strip of colorful playlist covers
Heading: “Every mood”
Supporting line: “Find what moves you”
The strip slides smoothly sideways, with edge cards partially cropped by the stage
4.9–5.8 seconds:
A compact search field appears
Type “Glass Tides”
Reveal one selected result beneath it, with the iridescent artwork, “AURA”, and a green play icon

5.8–6.6 seconds:
The selected artwork expands into a large centered cover
Reveal “Glass Tides” underneath, followed by “AURA” in green
Keep the player bar visible
6.6–7.5 seconds:
The same cover slides left
Track information appears on the right:
“Glass Tides”
“AURA”
“A new frequency”
Add a rounded green Play button
Coordinate the cover movement and text reveals
7.5–8.3 seconds:
A brief brand-color transformation fills the inner stage with green
The artwork contracts into a smaller centered tile
Place a small dark Spotify identity underneath
The player briefly recedes
8.3–9.8 seconds:
Return to the dark stage
The same artwork expands dramatically toward the camera, becoming oversized and cropped by the rounded stage
Restore the player at the bottom
Use controlled motion blur during the fastest part of the zoom

9.8–11.2 seconds:
The artwork clears into a centered typographic statement:
“Find your”
“rhythm”
Use white for the first line and green for the second
The player remains visible and stable beneath it

11.2–12.5 seconds:
Show “Made for your every day”
Three playlist sleeves enter with gentle perspective and small opposing tilts
They spread into six smaller sleeves across the stage
Supporting line: “Your sound, always evolving”

12.5–14.0 seconds:
The playlist layout transitions into four floating album covers
Include the iridescent hero artwork
Use restrained rotation, perspective, depth ordering, and overlap
Keep their movement coordinated rather than randomly floating

14.0–15.2 seconds:
The covers converge toward the center and fold around a green Spotify icon
The artwork withdraws as the icon becomes the focal point
Fade the player away
The Spotify icon must emerge from the same central position as the converging covers

15.2–18.0 seconds:
The icon moves slightly left and settles beside a large white “Spotify” wordmark
Keep the icon and letters separated throughout the movement
Reveal:
“Discover new music”
“every day”
The first line is white; the second is green
Hold the finished composition cleanly through the end
</timeline>
<persistent_player>
For most of the middle sequence, keep one narrow rounded player bar near the bottom of the inner stage
Include:
Small hero-art thumbnail
“Glass Tides” and “AURA”
Play and skip controls
A thin progress track
A small volume icon
Subdued dark translucent styling with a fine border
This recurring player connects the changing shots
It must remain visually secondary to the artwork
</persistent_player>

<motion_quality>
Match the energy of a tightly edited premium product film
Most visual ideas last approximately one second, but transitions remain smooth
Use continuous acceleration and deceleration
Favor critically damped springs or carefully tuned smooth easing
No repeated bouncing or large elastic overshoots
Preserve the hero artwork’s identity and position relationships through search, album detail, brand tile, and zoom
Use match-position transitions, coordinated scaling, masked reveals, and perspective
Outgoing titles must disappear before incoming titles occupy the same space
Avoid overlapping text, sudden camera resets, long blank intervals, and arbitrary full-frame crossfades
Clip every oversized cover and camera move cleanly to the rounded stage
No particles, shockwave rings, lens flares, camera shake, or unrelated stock footage
</motion_quality>

<audio> Create or select commercially usable electronic music around 120 BPM Use a clean pulse, warm bass, restrained melodic elements, and subtle transition accents Align important entrances, selections, zooms, and the logo reveal with musical events Keep effects quieter than the music No voiceover Do not use copyrighted commercial tracks without permission </audio>

How it was made

The author says the video is entirely code with zero After Effects and was one-shotted with Opus 5.5. The shared brief asks for a deterministic animation driven by absolute time through a seek(t) function, rendered at 60 fps with 3–5 temporal subframes for motion blur. The brief also asks for electronic music around 120 BPM. The author did not share the rendering tool, the music source, or timing costs.

Tools: Claude Opus
Effort: One shot, per the author; built entirely in code with no After Effects

Shot breakdown

0:00-1.5A green Spotify icon grows into the center of the dark stage, then transitions into a small identity above masked-in lines: white "Discover" and green "new music".
1.5-2.4A stylized Spotify desktop interface rises in with a subtle perspective tilt that settles frontal, showing a slim sidebar, "Made for you", three album cards, and small rows.
2.4-3.2The camera moves closer to the three featured covers, "New for you" appears above them with short titles beneath, and a narrow rounded player bar anchors the bottom.
3.2-4.0The featured cards withdraw into a compact "Fresh finds" list, with four song rows revealed on a slight stagger, each with a thumbnail, title, artist, and menu icon.
4.0-4.9A horizontal strip of colorful playlist covers slides sideways under the heading "Every mood" and supporting line "Find what moves you", with edge cards cropped by the stage.
4.9-5.8A compact search field appears, "Glass Tides" is typed, and one result appears with the iridescent artwork, "AURA", and a green play icon.
5.8-7.5The selected artwork expands into a large centered cover, then slides left while track information appears on the right, including "A new frequency" and a green Play button.
7.5-8.3The inner stage briefly fills with brand green, the artwork contracts into a small centered tile with a dark Spotify identity beneath, and the player recedes.
8.3-9.8The same artwork zooms toward the camera until it is oversized and cropped by the rounded stage, with controlled motion blur at the fastest point, and the player returns.
9.8-12.5The artwork clears into a centered statement, "Find your" in white and "rhythm" in green. Then "Made for your every day" appears, three sleeves tilt in and spread into six smaller sleeves, with the line "Your sound, always evolving".
12.5-14.0The layout becomes four floating album covers, including the iridescent hero artwork, with restrained rotation, perspective, depth ordering, and overlap.
14.0-18.0The covers converge and fold around a green Spotify icon, the player fades, the icon moves slightly left beside a large white "Spotify" wordmark, and "Discover new music" / "every day" resolve (first line white, second green) and hold to the end.

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

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.

Remix it for your product

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>

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

Customize this prompt