Music radio — curated birthday playlists

The radio page at /radio is a dedicated music space built from the playlists you define in lib/music-config.ts. Visitors browse playlists, select songs, and enjoy a visual player complete with a spinning album art animation, a five-bar audio visualizer, and floating lyric snippets drifting across the background.

Browsing playlists

The landing view shows a card grid — one card per playlist. Each card displays:

The playlist name and description
A song count
A preview of the first three song titles

Click any playlist card to open it and see the full track list.

The icon shown on each playlist card is derived from the playlist id. Playlists with id birthday-vibes get a cake icon, favorite-songs gets a heart, and all others get a piano icon. Give your playlists meaningful IDs to get the right icon automatically.

The player

When you click a song, the player banner appears at the top of the page. It shows:

A spinning gradient tile (the album art placeholder) with a five-bar visualizer animation in the corner when playing
The song title and artist
The album name, if one is configured
A play/pause toggle button

The currently active song is highlighted in the track list with a pink accent.

Floating lyrics

If a song has lyrics configured, individual lyric lines float up from the background while the player is active. This uses the same CSS float-up keyframe animation as the home page countdown screen.

Song data structure

Songs are defined in lib/music-config.ts. Every song must have at minimum a title and artist. All other fields are optional.

interface Song {
  title: string;
  artist: string;
  album?: string;
  duration?: string;
  coverUrl?: string;
  lyrics?: string;
  backgroundUrl?: string;
  description?: string;
}

Field	Description
`title`	Song name shown in the track list and player.
`artist`	Artist name shown below the title.
`album`	Album name shown in the player when present.
`duration`	Display string (e.g. `"4:12"`) shown at the right of each track row.
`coverUrl`	URL to the album art image. Currently reserved for future use.
`lyrics`	Newline-separated lyric lines. Used for floating lyrics on the radio and report pages.
`backgroundUrl`	Full-bleed background image URL used in the music report song sections.
`description`	A personal note shown on the song card in the report. Falls back to a generic message if unset.

Playlist data structure

interface Playlist {
  id: string;
  name: string;
  description?: string;
  coverUrl?: string;
  songs: Song[];
}

Adding and editing songs

To add songs or create new playlists, edit lib/music-config.ts directly. See Configuring music for a step-by-step guide.

The radio page does not stream audio. It is a visual music experience — songs are displayed and animated but not played back through the browser’s audio API. Real audio playback can be added by wiring coverUrl or a separate audioUrl field to an HTML <audio> element.

Get Started

Features

Customization

Music radio — curated birthday playlists

Browsing playlists

The player

Floating lyrics

Song data structure

Playlist data structure

Adding and editing songs

​Browsing playlists

​The player

​Floating lyrics

​Song data structure

​Playlist data structure

​Adding and editing songs

Browsing playlists

The player

Floating lyrics

Song data structure

Playlist data structure

Adding and editing songs