Lab Experiment / 02
React + Tailwind CSS + Framer Motion

Animated Spotify Music Player

A modern Spotify-inspired music player component built with React, Tailwind CSS, and Framer Motion. Features animated album art, playback controls, progress bar, smooth track transitions, and responsive UI.

Media Playerstable

Blinding Lights

The Weeknd

0:243:20
Blinding Lights album art
Prerequisites & Install

Install the npm dependencies this component relies on.

framer-motionnpm i motion
lucide-reactnpm i lucide-react
File Structure
src/lab/experiments/spotify-player/SpotifyPlayer.tsxSpotify player component with animated album art, playback controls, and progress bar.
Usage
import SpotifyPlayer from "@/src/lab/experiments/spotify-player/SpotifyPlayer"; <SpotifyPlayer />
Props
NameTypeDescription
tracksTrack[]Array of music tracks containing title, artists, album artwork, accent color, and duration.

More Experiments

Interactive Mood Calendar
Exp / 01
Interactive Mood Calendar

A customizable calendar component with day and mood view toggles, inline mood logging, and smooth state transitions.

Calendar4 deps