# Now Playing
URL: https://remocn.dev/docs/product-scenes/now-playing

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

- Install: `npx shadcn@latest add @remocn/now-playing`
- Vibe: social
- Natural length: 268f @ 30fps

## Installation

```bash
npx 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.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `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` | `number` | `165` | 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` | `number` | `1` | 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 |

## Use when
- A music, podcast or audio-app launch where the player UI plus lyrics carry the story.
- A product video that wants a warm gradient background tied to the cover-art color via `tint`.
- A vertical or square cut using the `mini` variant that expands a mini player into the full view.

## Don't use when
- You want incoming alerts instead of playback — use `notification-avalanche`.
- You want a video player with subscribe and like — use `video-watch-page`.
- You need a lock-screen status with a progress bar — use `live-activity`.