127 Components
Now Playing Waveform
MotionSpotify-style music player featuring dancing multi-octave equalizer frequency bars, spinning vinyl cover artwork, scrubbable progress bar with hover time tooltip, and playback controls.
Spotify Now Playing WaveformLive Visualizer
Reactive animated frequency equalizer, scrubbable timeline, and Spotify Connect
Sonos Era 300 · Hi-Fi Lossless
MasterHurry Up, We're Dreaming
Midnight City
M83
1:044:03
Switch Song:
Audio Engine: 44.1kHz PCM Synthesizer
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/now-playing-waveform.json"
Props
TypeScript props supported by <NowPlayingWaveform />.
| Prop | Type | Default | Description |
|---|---|---|---|
| tracks | TrackItem[] | — | Array of music track objects with metadata, colors, and duration. |
| initialPlaying | boolean | true | Whether the audio playback visualizer starts in active playing state. |
| className | string | — | Optional custom CSS classes for the container wrapper. |
Key Features
- 32 reactive audio equalizer bars oscillating dynamically to simulate real-time audio playback.
- Rotating vinyl sleeve simulation with dynamic track-specific background glow halos.
- Scrubbable timeline with precision cursor hover tooltip and simulated playback progression.
- Comprehensive media controls: Play/Pause, Next/Prev, Shuffle, and 3-state Repeat.
- Quick track switcher allowing seamless preview of different music genres and color themes.
Keyboard & Accessibility
- Full semantic button labeling with dynamic play/pause state communication.
- Scrubber input accessible via click, drag, and standard volume sliders.
- Equalizer animation gracefully responds to paused states without layout shifts.