</yunmakai>
</the problem>
Indie music projects sell merchandise through generic Shopify themes that look identical to every other artist storefront. There is no spatial identity, no narrative, no reason to linger. Listeners arrive, buy, leave — and never return between releases.
</my approach>
Built a single interactive 3D environment where the entire catalog lives. The room IS the storefront. Music plays continuously through a global audio player. Products are objects you interact with, not SKUs in a grid. Commerce splits cleanly: Shopify owns checkout and inventory, Supabase owns identity and content.
</key features>
3D motel room as storefront
Hotspot-driven navigation. TV is the product grid, posters are listings, lamps drive mood lighting.
Persistent global audio player
Music survives route transitions via a singleton audio element. Signed Storage URLs with auto-refresh.
Spatial continuity
Round-trip navigation preserves exact camera position. TV auto-zoom replaces hard cuts.
Shopify + Supabase split
Shopify owns money and inventory via hosted checkout. Supabase owns auth, music library, and admin uploads.
Privacy-respecting auth
Cookie-based Supabase sessions with middleware refresh. Admin routes gated by role checks at the edge.
Production performance
GLB budget enforced. Sequenced loader doubles as boot sequence. Draco decoded, postprocessing stack tuned per scene.
</what i learned>
3D as storefront is a UX commitment, not a visual flourish. Every transition has to preserve spatial continuity or the illusion breaks.
Splitting commerce between Shopify and Supabase is the right boundary for indie clients — best in class on both sides with a clean integration seam.
Mesh names in GLB files are load-bearing infrastructure. Treat them as a versioned contract between the 3D artist and the engineer.