SpotiCase

SpotiCase is a browser app for playing music through a 3D model of a CD jewel case. Clicking the case toggles it open, and dragging swings the lid like a friction hinge. Without Spotify credentials the app starts in a Preview mode with fictional sample albums and a simulated transport. It makes no sound, and the interface says so.

The app never fakes playback when you are connected: the disc spins only when Spotify reports that playback is running. The playback engine picks one of four routes depending on the account and browser.

• Browser player. The Spotify Web Playback SDK, for Premium accounts in a browser with DRM support.
• Remote control. The Web API and Spotify Connect, when Spotify is active on another device.
• Embedded player. The Spotify Embed iFrame API, as a fallback for non-Premium accounts or browsers that cannot run the SDK. Shuffle, repeat, and volume are disabled there, with tooltips that explain why.
• Preview. A simulated transport with sample data, used when not connected.

Error handling covers token expiry (one silent refresh, then a retry), revoked access, rate limits, a missing active device, and tracks that cannot be played.

Source: the project README.

All geometry is built in code, at real proportions: a 142 × 125 × 10.4 mm case with a 120 mm disc. The lid sits in a pivot group on the hinge axis and is driven by a spring with hard stops, so it rotates around its real hinge. The disc is a separate set of meshes whose spin is independent of the lid. Disc materials extend a physically based material with a diffraction-grating term, so the rainbow shifts with the viewing angle. Lighting is a procedural studio setup with no HDR download.

Disc finishes include album art, classic silver, gold, holographic, red translucent, a blue-to-violet iris, noir, and custom uploaded artwork that is downscaled and stored locally.

• No backend. Authorization Code with PKCE lets a browser app exchange and refresh tokens without a client secret, so there is nothing for a server to protect.
• Render without re-rendering. The scene reads player state inside the animation loop rather than through React, so playback changes do not re-render the canvas. Textures and materials are created once and disposed on unmount.
• Graceful degradation. A performance monitor lowers the pixel ratio on slow GPUs, and a 2D fallback disc is shown when WebGL is unavailable.

Source: the project README.

Spotify's platform rules shape the app. As the README notes, in Development Mode the app works only while the app owner has Premium and is limited to five users, and playback control needs Premium for the listener too. Playlist track lists are only available for playlists you own or collaborate on.