Toggle theme

EN

Skill · Video

Spotify-Themed Motion Graphics Music Film

Claude Opus 5.5 video example. A green background surrounds a dark rounded stage where album art, playlists, search and a player change in sequence. Repeated hero art and a persistent player connect the fast shots. Includes an asset-replacement and staged production guide.

View post ↗ Case study ↓

shader
svg
motion

Quick start

Prompt

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>
<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 when seeking frames in any order
Do not depend on live timers, accumulated physics, or CSS transition state during export

Render true 60 fps with spatial antialiasing
Use 3–5 temporal subframe samples per output frame for restrained motion blur
Keep stationary text and artwork sharp
Inspect contact sheets and moving playback
Check the fast heading changes, artwork handoffs, zoom, cover convergence, and final wordmark spacing
Verify evenly spaced frame timestamps and the full 18-second duration
Fix visual defects before delivering the final MP4 and editable source
</implementation_and_validation>

Overview

What you get

Make a roughly 18-second content-product concept film that carries one hero asset through several usage states.
A product-specific asset list, replacement table and staged AI requests.

Case study

Make a similar video

A green background surrounds a dark rounded stage where album art, playlists, search and a player change in sequence. Repeated hero art and a persistent player connect the fast shots.

Your goal: Make a roughly 18-second content-product concept film that carries one hero asset through several usage states. This work belongs to the Claude Opus 5.5 video collection. Select Claude Opus 5.5 in an AI coding tool that supports it and submit the assets and requests below in stages. The model plans, writes and edits code; the actual project handles preview/export. Voice and music need suitable tools or supplied audio.

The long request specifies absolute-time window.seek(t), reproducible frames and 60fps output. Start with a reduced state chain and check seeking/export; this is not an official Spotify project.

Prepare your assets

One hero cover and three supporting covers with a consistent style.
Product name, main content title, colors and player/action-bar design.
Usable music, sound effects and a fixed timeline brief.

Put files in a directory AI can read, such as assets/, and explain each filename and purpose. Specify ratio, duration and publishing destination. If you supply only a URL, ask what content is accessible before assuming any functionality.

Replace elements for your product

Element in the sample or creator brief	Your replacement
Glass Tides / AURA hero cover	Your main content and creator information
Playlist covers	Your categories or collections
Spotify green and logo	Your own brand system
Persistent player	A persistent action bar suited to your product

A course platform can use a hero course, categories and a continue-learning bar; an ebook tool can use a book cover, shelf and reading progress. Replace content and identity together.

Keep hero identity consistent across search, detail and transitions; hold the player without obscuring content and verify export settings in the actual project.

Start with this shot plan

This is an editorial draft, not a frame-by-frame reconstruction. Approve assets and copy for each scene, adjusting durations to the information load.

0–3s: brand and content list.
3–7s: categories, search and hero selection.
7–12s: enlarged hero and value line.
12–15s: collection converges into the brand shape.
15–18s: logo and positioning hold.

Make it with AI in four steps

Editorial suggestion; not reproduction-tested. Fill in brackets and approve each preview before continuing. The creator’s film is not a downloadable project template.

Check assets and plan shots.

I am using Claude Opus 5.5 to make a video for [my product].
Goal: Make a roughly 18-second content-product concept film that carries one hero asset through several usage states.
Audience: [people]. Ratio and duration: [requirements]. Assets: [directory].
Read my product brief, identity and assets. List confirmed features and missing files.
Use the draft above to plan visuals, short headings, asset files, durations and transitions.
Keep hero identity consistent across search, detail and transitions; hold the player without obscuring content and verify export settings in the actual project.
Provide the shot list before producing the full film.

Make one sample. After approving the plan and file paths, send:

The shot list is approved. Preview the hero cover moving from search result to detail while preserving the same artwork.
Production approach: The long request specifies absolute-time window.seek(t), reproducible frames and 60fps output. Start with a reduced state chain and check seeking/export; this is not an official Spotify project.
Check dependencies and assets in this environment and provide the actual preview method.
Identify missing tools, models or audio rather than presenting placeholders as finished work.
Deliver this sample preview first, then list the files needed for the full film.

Complete the remaining scenes. Approve type, colors, asset proportions and pacing first:

Complete the other shots using the approved sample's visual rules.
Keep hero identity consistent across search, detail and transitions; hold the player without obscuring content and verify export settings in the actual project.
Match headings, actions and audio cues. If audio is unavailable, provide a silent preview first.
Keep product name, logo, screen assets, colors and final action in easily editable configuration.
Provide full playback and key transition stills, identifying unfinished parts.

Review and export. Check copy and assets on a phone, then send:

Apply the approved changes and export, retaining editable source and asset references.
Provide this project's actual export command, prerequisites and output file location.
Check final MP4 duration, ratio, text clipping and audio instead of relying only on browser preview.
Deliver a contact sheet and list remaining limitations.

Revise the film and fix problems

Name the shot and change instead of requesting vague improvements that reset approved pacing:

Replace music with [my content type], using [file] consistently for the hero in search and detail. Replace the player with [my action bar] without covering titles.

For a 9:16 version, recompose headings, the main subject and final action. Preview the new layout rather than cropping the sides. To shorten the film, remove secondary shots or sentences before retiming.

The hero changes between shots: reference one asset rather than generating a new image per scene.
Live playback works but export shifts: test seek(t) in arbitrary order without relying on playback history.

Creator source and reproduction limits

The post attributes the work to Opus 5.5 and shares a detailed brief. 1920×1080, 18 seconds and 60fps are requested specs, not proof that the collected file satisfies them all. View the original post.

Visual descriptions come from the collected video; production details come from the stored request and post. They do not constitute testing of the current product. Shot plans, adaptations and expanded requests are editorial suggestions and have not been generated or tested. Supply your own assets and production environment when the original project is unavailable.

Related skills

Anatomy: Interactive Mechanical Diagrams Looks Like AI Is Building It Planning Manager Event Platform Reel RedShip SaaS Launch Film BridgeMind Merch Launch Video by Opus Code-Only Promo for Ten Indie Apps