MISC5/shelf

Top page
Shared cartridge example
Shelf view
profile page
long length shelf view

Music, given form. MISC5 / SHELF turns browser listening into a personal, explorable 3D music collection. Instead of a flat activity feed, every scrobbled track becomes a tactile cartridge: its album art, palette, printed metadata, material finish, and place in time all live together on a shelf you can inspect, edit, and share.

The problem Listening history is usually a passive list—useful for recall, but emotionally thin. MISC5 / SHELF makes it something you can return to, arrange, and show: a small personal archive that gives music physical presence without asking people to change how they listen.

What it does Connects a companion browser extension through a privacy-conscious device-auth flow—no webhook URL or secret is shown to the listener. Captures music played across the web and places it in a 3D cartridge shelf in listening order. Lets people edit cartridge typography, color palettes, cover art, and layered materials such as lacquer, holo, pearl, carbon, chrome, and glass. Keeps a practical 2D library for moving cartridges between Main and shared shelves, while the primary experience remains a rich 3D collection. Generates an interactive, single-cartridge public poster and high-quality PNG for a track. Supports public profiles, display cases, collaborative shelves, and a mobile-first viewing experience. How it works The web app is built with Next.js, React, React Three Fiber, and Three.js. A GLB cartridge is rendered with physically based materials, custom finish shaders, album textures, and generated silkscreen-style decals. The backend runs on Cloudflare Workers with D1 for account, shelf, and listening-history data; writes are coalesced to keep the archive responsive as it grows. Public poster metadata is generated separately with Vercel OG, so share images do not require storing binary images in the database.

The companion extension uses PKCE device authorization. The browser page only exchanges a one-time code; the extension retains the verifier and stores only hashed device tokens server-side. This keeps setup simple while preserving a clear boundary between the listener, the site, and the extension.