Now Playing · Ovio

<NowPlaying variant="minimal" />Clean surfaces and measured motion.

Installation

Use the shadcn CLI to copy the component source and its dependencies into your own project. Installs motion and @number-flow/react, plus the Ovio theme, world, motion, keys, rolling-number, toy items.

npx shadcn add JanaSundar/ovio/now-playing

↳You own the source. Ovio components arrive in your codebase so you can edit any part of their style, behavior, or data flow.

Usage

Set the visual world on the component, or wrap the page in an OvioProvider to set a default for everything inside it.

TSXvariant="minimal"

import { NowPlaying } from "@/components/ovio/now-playing/now-playing"

<NowPlaying
  variant="minimal"
  track={track}
/>

Built with: CSS · Motion for React
Motion in Minimal: Small springs, opacity and layout shifts that show state.

Data

Fetch it on the server with getNowPlaying([spotify(), lastfm()]) and pass the result as props. The helper is lib/music.ts, added with the CLI.

npx shadcn add JanaSundar/ovio/music

Source	Any music service: the first attached one answers with what's playing, or what played last. Spotify and Last.fm come ready-made; musicService({ name, url, map }) adapts any other JSON API.
Auth	Per service, read from the environment. Spotify: SPOTIFY_CLIENT_ID, SPOTIFY_CLIENT_SECRET and SPOTIFY_REFRESH_TOKEN. Last.fm: LASTFM_API_KEY and LASTFM_USER. A service without them is skipped.
Limits	Spotify: a token and one or two calls per refresh, with the token reused for 50 minutes. Last.fm: two calls.
Caching	Cached for 30 seconds by default, since what's playing changes by the minute. A spent limit throws RateLimitError with the time it resets.
This demo	Live data from the attached music service, through the same helper. If the API fails, the sample shows instead.

Props

Control the data, selected world, animation behavior, and callbacks.

Prop	Type	Description
track	{ title; artist; album?; duration; artwork? }	Current track. duration in seconds; artwork is a cover image URL.
variant	\| "minimal" \| "craft" \| "retro" \| "toy"	Which world to render. Defaults to the nearest OvioProvider, then minimal.
playing / defaultPlaying	boolean	Playing state, controlled or not. Plays by default.
onPlayingChange	(playing: boolean) => void	Play or pause.
progress / defaultProgress	number	Seconds elapsed. Ticks once a second while playing.
onProgressChange	(progress: number) => void	Fires on each tick and seek.
volume / defaultVolume	number	0–10, default 6. Turned with the Toy knob.
onVolumeChange	(volume: number) => void	Volume changed.
onPrevious / onNext	() => void	Transport keys. onNext also fires when the track ends.
className	string	Merged onto the root.