# Now Playing

A music player on the Card tray, with an equalizer, live progress and a compact mini player.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/now-playing
```

## Usage

```tsx
import { NowPlaying } from '@/components/fetaui/now-playing'

export function Example() {
  return <NowPlaying track={{ title: 'Low Tide', artist: 'Pale Harbor', length: 192 }} defaultElapsed={72} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| track | { title, artist, length, cover } | required |
| playing | boolean |  |
| defaultPlaying | boolean | true |
| onPlayingChange | (playing) => void |  |
| elapsed | number |  |
| defaultElapsed | number | 0 |
| onSeek | (seconds) => void |  |
| onNext | () => void |  |
| onPrevious | () => void |  |
| onShuffleChange | (shuffle) => void |  |
| onRepeatChange | (repeat) => void |  |
| onMore | () => void |  |
| compact | boolean | false |
| animated | boolean | true |

## When to use

- For audio that plays alongside other content.
- Compact when it docks to a corner or a sidebar.

## When not to use

- For a full player with a queue: build a page.
- For a short sound or a voice note: use Voice.

## Accessibility

- Every control is a labelled button, and Shuffle and Repeat use aria-pressed.
- Progress is a native slider that reads like 1:12 of 3:12.
- The equalizer is decorative, and the words Now playing or Paused say the state.

## Motion

- The equalizer bars rise and fall out of phase on a 900 ms loop, and pause offscreen.
- Pausing settles the bars at 3 px and morphs the icon in 200 ms.
- Progress keeps its place, and follows the pointer while seeking.
- With reduced motion, the bars stay still and the icon swaps.