SpotLive/Demo

Already running.

Both widgets are already mounted on this page — cycling through The Weeknd's catalogue as a stand-in for what your own Spotify activity will look like.

NoteThis is mocked data — each track is fast-forwarded to play through in 14 seconds so you can see several covers without waiting. Real playback runs at normal speed.

Heads up

The live widgets — the player in the nav bar and the vinyl peeking from the right edge — are hidden on small screens to keep the layout readable. Please open this site on a desktop browser to see them in action.

variant="player"

That pill in the nav bar.

Compact enough to slot into any header — shows the current track, artist, elapsed time, and a fake set of media controls (decorative only).

app/layout.tsxtsx

// inside your <header> or nav
import { SpotLive } from "@/app/components/SpotLive";

<SpotLive variant="player"/>

variant="vinyl"

That record on the right.

Fixed to the page edge, tilted, peeking out about a third. Hover anywhere over the card and it slides out to reveal the spinning disc.

app/layout.tsxtsx

// drop once in your root layout
import { SpotLive } from "@/app/components/SpotLive";

<SpotLive variant="vinyl" position="right"/>

Sample payload — what the route handler returns

// GET /api/spotify
{
  "isPlaying": true,
  "title": "Blinding Lights",
  "artist": "The Weeknd",
  "albumArt": "https://i.scdn.co/image/…",
  "progress": 42031,
  "duration": 200000
}

Wire it up.

One CLI command, two env vars, a Spotify app — and these widgets show your actual music instead of The Weeknd's.

Read the docs