A cinematic, immersive web experience dedicated to the discography of Radiohead.
The Radiohead Interactive Discography is a premium, fan-made web application designed to present the band's extensive catalog—ranging from their studio albums to massive archives like the 18-hour MiniDiscs—in a visually stunning, cinematic, and highly interactive interface.
Goal/Purpose: To transcend traditional music player interfaces by blending high-end web design with deep musical archives, offering fans an engaging way to explore Radiohead's history, lore, and music.
User Experience: Users are greeted with an atmospheric "Enter" overlay that sets the mood via ambient background audio. The app features smooth page transitions, custom cursors, film-grain overlays, and cinematic scroll animations. A persistent, floating audio player provides gapless playback, complete with a real-time Web Audio API visualizer and synchronized lyrics.
Technical Vision: Built for extreme performance despite handling gigabytes of local audio data. The application leverages modern React Server Components, aggressive server-side caching, and lightweight client state management to ensure a buttery-smooth 60fps experience.
- Cinematic Landing Page: Atmospheric hero section, interactive band timeline, and parallax band member showcases.
- Studio Albums Showcase: Deep dives into each studio album with rich metadata, historical context, and tracklists.
- B-Sides & Rarities Archive: A comprehensive collection of non-album singles and hidden gems, parsed dynamically from the file system.
- MiniDiscs Archive: An expansive UI to navigate the legendary 18-hour OK Computer MiniDisc leaks.
- Advanced Floating Player:
- Persistent global playback across page navigations.
- Real-time Audio Visualizer tapping into the Web Audio API.
- Interactive Equalizer Panel for custom sound sculpting.
- Real-time Lyrics Panel (parsing
.txtand LRC files).
- Custom UI Physics: Bespoke custom cursor interactions, film grain overlays, and fluid Framer Motion page transitions.
- Ultra-Fast Metadata Extraction: Custom APIs that extract ID3 tags concurrently from large media libraries, heavily optimized via persistent file-system caching.
| Technology | Purpose |
|---|---|
| Next.js 16 | Core React framework. Utilizes App Router for optimized server-rendered pages and fast API routes. |
| React 19 | UI component architecture. Leverages the latest React concurrent features. |
| TypeScript | End-to-end type safety, eliminating runtime errors and improving developer experience. |
| Tailwind CSS v4 | Utility-first styling for rapid, highly-responsive, and maintainable UI design. |
| Framer Motion | Orchestrates complex orchestrations, page transitions, and micro-interactions. |
| Zustand | Lightweight, fast global state management. Used extensively for the persistent global Audio Player state. |
| music-metadata | Server-side extraction of ID3 tags and audio metadata from raw .mp3 files. |
| Lucide React | Clean, modern iconography system. |
- App Router Paradigm: The app uses Next.js
app/directory. Pages are kept as lightweight as possible. - Persistent Layouts:
src/app/layout.tsxwraps the application in theFloatingPlayerandPageTransitionwrappers, ensuring audio never stops when the user navigates.
The core of the application's interactivity is src/store/player-store.ts.
- User interacts with a track (e.g., clicks "Play" on the B-Sides page).
- Action dispatched to Zustand (
playTrack(album, track)). - Store updates global state (
currentTrack,isPlaying,audioContext). - FloatingPlayer reacts to the state change, dynamically loading the audio source via Next.js API routes and triggering the Web Audio API visualizers.
- Client components fetch metadata via standard
fetchto Next.js API routes (e.g.,/api/minidiscs). - Metadata Parsing: The API routes read directories (like
songs/MINI DISKS/), parse MP3/FLAC ID3 tags on the server, and return JSON arrays of tracks. - Caching Strategy: To prevent the server from choking on gigabytes of audio, the API routes utilize a custom persistent JSON cache layer, reducing 2-second load times down to
1ms.
radiohead-app/
├── public/ # Static assets (fonts, images, shadows)
├── songs/ # Local storage for all audio archives
│ ├── B-side/ # B-side audio files and lyrics
│ ├── MAIN ALBUMS/ # Studio albums storage
│ ├── MINI DISKS/ # Massive MiniDisc archives
│ └── TOWERING ABOVE THE REST/# 24-CD comprehensive compilation
├── src/
│ ├── app/ # Next.js App Router root
│ │ ├── albums/ # Album showcase routes
│ │ ├── api/ # Backend API Routes (metadata, audio streaming)
│ │ ├── b-sides/ # B-sides catalog route
│ │ ├── minidiscs/ # MiniDiscs catalog route
│ │ ├── towering/ # Towering Above the Rest catalog route
│ │ ├── layout.tsx # Root layout (injects global UI/Player)
│ │ └── page.tsx # Landing Page
│ ├── components/
│ │ ├── home/ # Hero, Timeline, Band Members components
│ │ ├── layout/ # Header, EnterOverlay, CustomCursor, Grain
│ │ └── player/ # FloatingPlayer, Visualizer, Equalizer, Lyrics
│ ├── data/ # Hardcoded static data (Album descriptions, etc)
│ ├── store/ # Zustand global stores (player-store.ts)
│ └── types/ # Global TypeScript interfaces
└── package.json
- Node.js (v18 or higher)
- npm, yarn, or pnpm
- Valid audio files placed in the
songs/subdirectories (e.g.,songs/B-side,songs/MINI DISKS).
-
Clone the repository:
git clone https://github.com/your-username/radiohead-app.git cd radiohead-app -
Install dependencies:
npm install
-
Populate Audio Directories: Ensure you have your
.mp3or.flacfiles inside thesongs/B-sideandsongs/MINI DISKSfolders.For the "Towering Above the Rest" Archive: You can download the full 24-CD collection from this Google Drive link: Download Towering Above the Rest
Once downloaded, extract the contents directly into:
songs/TOWERING ABOVE THE REST/. The application will automatically detect the folders and audio files. -
Start the Development Server:
npm run dev
The app will be available at http://localhost:3000.
-
Build for Production:
npm run build npm run start
Create a .env.local file in the root directory.
| Variable | Purpose | Required |
|---|---|---|
NODE_ENV |
Dictates caching behavior inside API routes (development/production). | No |
NEXT_PUBLIC_API_URL |
Base URL for fetching internal APIs if deployed externally. | No |
(Currently, the application is heavily reliant on local file-system APIs and requires minimal environment configuration).
| Command | Description |
|---|---|
npm run dev |
Starts the Next.js Turbopack development server with hot-reloading. |
npm run build |
Compiles the application into highly optimized static and server-rendered chunks. |
npm run start |
Boots the production server serving the compiled .next build. |
npm run lint |
Runs ESLint to strictly enforce code quality and styling rules. |
- Design Philosophy: "Digital brutalism meets cinematic elegance." High contrast, stark typography, and atmospheric elements.
- Typography: Uses a combination of stark Sans-serif for UI elements and stylized, chaotic fonts (e.g., "Rock Salt") for artistic accents (like band member names).
- Layout System: CSS Grid and Flexbox powering responsive, snap-scrolling sections.
- Animation System:
Framer Motionhandles stagger animations, scroll-linked parallax (e.g., theBandHistorysection), and fluid mounting/unmounting of track details. - Micro-Interactions: A custom cursor tracks mouse movement, transforming to indicate interactive zones.
- Theme: Strict Dark Mode to emphasize the cinematic vibe.
- API Caching Optimization: Initial load times for massive directories (like the 1.5GB MiniDiscs folder) were optimized from 2.5s down to 1ms by implementing persistent
fsJSON caching (minidiscs-cache.json). - Concurrent Processing: ID3 tag extraction leverages
Promise.allto parse multiple audio files simultaneously rather than sequentially. - Code Splitting: Next.js automatically code-splits routes, ensuring the user only downloads Javascript necessary for the current view.
- Image Optimization:
next/imageis utilized to serve appropriately sized, WebP-compressed images.
- Path Traversal Protection: API routes explicitly
join(process.cwd(), "specific_folder")and filter for.mp3or.txtextensions, preventing malicious users from accessing sensitive server files via the audio streaming APIs. - XSS Protection: React natively escapes all metadata strings parsed from the audio files before rendering them to the DOM.
- Purpose: Fetches metadata and lyrics for all B-sides.
- Behavior: Parses ID3 tags. If
bsides-cache.jsonexists, it serves the payload in 1ms.
- Purpose: Fetches metadata for the MiniDisc archive.
- Behavior: Extracts duration and titles, utilizing
minidiscs-cache.jsonto prevent server CPU thrashing.
- Purpose: Serves embedded ID3 cover art or static images associated with a specific file ID.
This application intentionally operates without a traditional database.
- It acts as a localized File-System CMS.
- Storage Logic: The file system serves as the database.
music-metadataqueries the files, and Node.jsfswrites to.jsoncache files to mimic database indexing.
Deploying this application requires a platform that allows local file-system access or mounting of volumes (due to the gigabytes of audio files).
Recommended: Docker & Traditional VPS (DigitalOcean / AWS EC2)
- Dockerize the application.
- Mount the
songs/directory as an external Docker volume. - Serve via NGINX reverse proxy.
Note: Standard Vercel/Netlify deployments are NOT recommended because serverless functions have a 50MB-250MB size limit, which cannot accommodate gigabytes of local .mp3 files.
- Maintainability: The codebase strictly separates concerns: layout wrappers, atomic UI components, global state stores, and isolated API backend routes.
- Scalability: Adding new albums or archives requires zero code changes. Simply drop new
.mp3files into the respective folders, delete the JSON cache, and the app automatically indexes them. - Engineering Quality: Strict TypeScript typing across the entire application prevents runtime data-flow errors.
- User Authentication: Allow users to create accounts to save custom playlists or "favorite" specific tracks.
- Spotify/Apple Music Integration: Fallback to streaming APIs if the user does not possess the local
.mp3files. - WebSockets: Implement a "Listening Party" feature allowing multiple users to sync their players in real-time.
- Issue: Tracks are taking 5+ seconds to load in development.
- Fix: Ensure you haven't deleted the
*-cache.jsonfiles. If you added new files, the first load will take time to rebuild the cache.
- Fix: Ensure you haven't deleted the
- Issue: "Return statement is not allowed here" in Next.js Turbopack.
- Fix: Turbopack may hold onto stale cache. Completely restart the dev server (
Ctrl+C->npm run dev).
- Fix: Turbopack may hold onto stale cache. Completely restart the dev server (
- Issue: Audio visualizer isn't moving.
- Fix: The Web Audio API requires a user interaction to unlock. Ensure you have clicked the "Enter" overlay or clicked a play button manually.
The Radiohead Interactive Discography represents the intersection of passionate fandom and elite web engineering. By combining high-performance metadata parsing, persistent file-system caching, and a highly polished framer-motion powered UI, it delivers a deeply immersive, desktop-class application experience directly in the browser.
“Everything in its right place.”