Generate a Spotify Canvas (8-second loop) from HTML

Spotify Canvas — the 3-to-8-second looping vertical video that plays behind a track when it's the active "Now Playing" — is one of the highest-impression pieces of visual real estate in music. Tens of millions of plays per popular track per week. And almost no indie artist ships one, because the format is awkward (vertical, short, must loop seamlessly) and the production path is "find a video editor."

The HTML render path solves all of that.

The Canvas spec, briefly

• Aspect ratio: 9:16 (vertical).
• Resolution: 1080×1920 minimum.
• Duration: 3-8 seconds.
• Format: MP4, h.264, no audio.
• Loop: must be seamless — last frame ≈ first frame.

The HTML template

A vertical scene with three layers, top to bottom:

1. A heading or lyric snippet. Big, kinetic.
2. A visual element. Could be the album art zooming gently, an abstract shape, a typographic ribbon.
3. The artist name + track name. Quiet, at the bottom.

The composition is 9:16, so the type wraps differently than horizontal video. Headlines that work at 16:9 (one wide line) want to be 2-3 stacked lines at 9:16.

The loop trick

The hardest part of a Canvas video is the loop. The video plays end-to-end then jumps back to the start, with no crossfade. If frame N is different from frame 0, the loop bumps and the viewer notices.

Two reliable ways to author for it:

1. Periodic motion. Build the animation as a sin/cos function of t / 8 * 2π. The first and last frames are identical by construction. This is the right move for abstract / typographic content.
2. End-on-start. Reset every animation to its initial state at t = 7.9. Add a 100ms "fade to start" at the end. The loop seam becomes the fade.

Option 1 is cleaner. Option 2 is more flexible.

Per-track automation

This is where it gets interesting. If your label or DSP has 500 tracks, you don't want to design 500 Canvas videos. Template the lot:

track_id,artist,title,lyric_hook,palette
t-001,"Marcus Tate","Midnight Cross","I've been waiting for a sign","#ff3b1f,#1a1a1a"
t-002,"Maya Lin","Slow Year","oh, what a slow year","#e8c547,#0e1419"
...

Each row drives one render. The template is the same; only the variables change.

The vertical-specific design moves

Three things to remember:

1. The middle third is the readable zone. Phone UI covers the top (status bar, play controls) and bottom (track info, like button). Your content has to land in the middle 60% vertically.
2. Big type. The viewer is holding the phone at arm's length and the playable area on screen is ~3 inches tall. Type below ~60pt at 1080×1920 is illegible.
3. No subtitles below the safe zone. Anything below 88% vertical is covered by the UI.

The vertical-video rules also show up in the TikTok 9×16 example — same shape, different surface.

The export

From the playground, set dimensions to 1080×1920, duration to 8s, fps to 30, h.264 baseline. The Canvas spec doesn't care about most encoding details; default settings work.

The output file goes to your Spotify for Artists dashboard. Per-track upload is manual; per-batch upload is currently API-restricted (only major label / DSP integrations have batch).

The bigger "render per-row from CSV" pattern is in batch personalized videos from CSV. The vertical-video format specifically is in social media cards every ratio.

A close

Spotify Canvas is the rare format where supply hasn't caught up to demand — most tracks still show static cover art because the production path is too clunky for independent artists. An HTML template + a renderer collapses that path to "edit one file, render one MP4." The artists who figure this out get a free differentiator on the most-played app in the world.