iPod Classic

Features

• Click wheel scrolling that speeds up as you spin.
• Crossfade between songs and wheel click sounds.
• Settings and volume persist between visits.
• Hidden Brick game: hold Select on About for 5 seconds.

Use cases

• Playful music player on a personal site.
• Easter egg on a 404 page.

Installation

pnpm dlx shadcn@latest add @ncdai/ipod-classic

CLI only. Browse the source on GitHub.

Usage

import { IpodClassic, type IpodLibrary } from "@/components/ipod-classic"

const library: IpodLibrary = {
  songs: [
    { id: "1", name: "Song", artistName: "Artist", previewUrl: "/song.m4a" },
  ],
  playlists: [{ id: "favorites", name: "Favorites", songIds: ["1"] }],
}
 
<IpodClassic library={library} />

API reference

IpodClassic

Extends div props.

IpodLibrary

IpodSong

IpodPlaylist

Accessibility

• Arrow keys move, Enter and Space select, Escape goes back.
• Wheel buttons are labeled, and status changes are announced.

Credits

• Apple
• KingDuane

License and usage

• Free to use and modify in both personal and commercial projects.
• Attribution is appreciated but not required.
• Released under the MIT License.