## Mini Player (S—060)

A now-playing card with generated cover art, a morphing play/pause, skip and a scrubber.

- URL: https://sundaeui.dev/components/mini-player
- Category: UI components · Art direction: Expressive
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/mini-player.json`
- Tags: controls, player, music, audio, podcast, media

The cover lifts and an equaliser starts when playing; play morphs into pause by animating the path itself.
It keeps its own clock for demos; in production feed it from an <audio> element.

### Usage

```tsx
import { MiniPlayer } from '@/components/sundae/mini-player'

<MiniPlayer tracks={[{ title: 'Afterglow Avenue', artist: 'Halcyon Drive', duration: 214, colors: ['#2f5fd0', '#e8e4da', '#2f5fd0'] }]} />
```

### Props

- `tracks` (`Track[]`, required): Title, artist, duration and cover colours.
- `autoPlay` (`boolean`, default `false`): Start playing.
- `layout` (`'row' | 'stack'`, default `'row'`): Horizontal or stacked.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Podcast, music and voice-note players.

### When not to use

- Video: use a video player with captions.

### Accessibility

- Seek is a native range input with aria-valuetext ("0:38 of 3:34").
- Play, previous and next are labelled buttons.
- Reduced motion stops the equaliser and path morph.

### Keyboard

- Tab: Move between controls
- ← / →: Seek (on the scrubber)