Now Playing

A music player taps play, likes the track, then scrolls synced lyrics that light up one line at a time.

Installation

$ pnpm dlx shadcn@latest add @remocn/now-playing

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { NowPlaying } from "@/components/remocn/now-playing";
 
const NowPlayingScene = () => (
  <NowPlaying
    title="Launch Day"
    artist="Acme"
    tint="#B8553A"
    lyrics={["Shipped it at midnight", "and the build came green"]}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="NowPlaying"
    component={NowPlayingScene}
    durationInFrames={300}
    fps={30}
    width={1280}
    height={720}
  />
);

A phone rises showing the player: a cursor taps play, the heart is liked, the lyrics panel opens and each line lights up in turn as the list scrolls. Pass title, artist, lyrics and tint (the gradient color); with variant="mini" the scene starts from a mini player that expands. Pass src for your own cover art, or omit it for the built-in artwork.

The ground is a live gradients.sh shader (GshGround), installed with the component as @remocn/gsh. Pick another look with the ground preset prop.

Props12

Prop	Type	Default
title	string"Launch Day" Track title
artist	string"remocn" Artist name
playlist	string"Launch Week Mix" Playlist name in the playing-from line
src	string— Cover art image URL; a built-in artwork shows when omitted
tint	string"#B8553A" Color driving the gradient background
lyrics	string[]DEFAULT_LYRICS Lyric lines highlighted one after another
duration	number165 Track length in seconds for the progress readout
variant	"full" \| "mini""full" Start as a full player or a mini player that expands
accent	string"#3B5BFD" Accent color for highlights, buttons and progress
speed	number1 Playback speed multiplier for the whole timeline
ground	GshPresetId— gradients.sh preset id for the backdrop shader
groundParams	Partial<GradientParams>— Overrides for the backdrop shader parameters

titlestring
Track title
Default"Launch Day"
artiststring
Artist name
Default"remocn"
playliststring
Playlist name in the playing-from line
Default"Launch Week Mix"
srcstring
Cover art image URL; a built-in artwork shows when omitted
tintstring
Color driving the gradient background
Default"#B8553A"
lyricsstring[]
Lyric lines highlighted one after another
DefaultDEFAULT_LYRICS
durationnumber
Track length in seconds for the progress readout
Default165
variant"full" | "mini"
Start as a full player or a mini player that expands
Default"full"
accentstring
Accent color for highlights, buttons and progress
Default"#3B5BFD"
speednumber
Playback speed multiplier for the whole timeline
Default1
groundGshPresetId
gradients.sh preset id for the backdrop shader
groundParamsPartial<GradientParams>
Overrides for the backdrop shader parameters