Album Canvas – Infinite 3D Music Discovery Experience
The Album Canvas is an immersive WebGL-based web application that transforms Spotify album metadata into a visually stunning, infinite 3D canvas. Users can explore a vast collection of album covers scattered across an endless space, viewable from all angles with smooth auto-panning and manual controls, creating a unique and engaging way to discover music without playing any audio.
🚀 Tech Stack
- Core Library: Three.js (for WebGL rendering and 3D scene management)
- Data Source: Spotify API (metadata only – titles, artists, and cover images)
- Rendering: WebGL via Three.js
- Interactivity: Custom camera controls with auto-pan and scroll-to-zoom/pan functionality
🎨 UI/UX Overview
- Infinite canvas layout with album covers positioned in 3D space for depth and exploration
- Dynamic scattering of covers, allowing views from any angle with natural perspective
- Subtle auto-scroll/auto-pan for passive browsing, with "Auto-Scroll OFF" toggle for manual control
- Tabs for switching between "Songs" and "Podcasts" categories
- Clean, minimal interface focusing entirely on visual immersion without distractions
🔐 Functional Highlights
- Fetches only public Spotify metadata (no audio files or copyrighted content disclosed)
- Responsive 3D navigation: scroll to zoom, drag to pan, with automatic slow panning for discovery
- High-performance rendering of hundreds of textured planes (album arts) in an infinite scene
- Notable decisions: Emphasis on visual-only experience to respect Spotify's API terms, combining creative data visualization with interactive 3D web tech
🔗 Video Demo:
Watch here: video
Whether you're experimenting with Three.js for creative data viz or building immersive music discovery tools, Album Canvas serves as an inspiring example of how WebGL can turn simple metadata into an expansive, exploratory digital art installation.
