Nothing playing
—
A spinning record fixed to the edge of your page — peeks out by a third, slides further on hover. The cover sits at the label, pauses when you pause.
A compact pill with cover, title, artist, time and a faux control set. Sized to slot into a nav bar or sidebar.
npx spotlive init detects your Next.js App Router project, writes the component + API route, and runs the OAuth flow for you.
Grab Client ID and Secret from the Spotify developer console. The CLI opens the auth flow for you.
Import the component, pick a variant, and ship.
The bundled route handler refreshes your access token on its own schedule. You set it once and forget about it.
SpotLive polls every 10s and animates the progress bar client-side between fetches. Smooth and kind to your rate limit.
Switch between variant="vinyl" and variant="player" with one prop. Both are pure Tailwind — no external UI library.
When nothing's playing, the widget shows the last track with a soft "off-air" stamp instead of an empty box.
Pure component code. The CLI is the only thing that ships extras, and it's devDependency only.
The server component fetches the current track; the client component handles the animation. Hydration is clean.
One command, one component, one record spinning quietly on your homepage while you sleep.