YUNMAKAI

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.

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.

Yunmakai is an immersive digital universe for an indie music project · a single interactive 3D environment where music releases and physical/digital products live together as objects in a scene. Open the site, drop into a Southern Gothic Noir motel room (Ozark / Twin Peaks / motel photography as the visual reference), and the room is the store. The TV is the product grid. The posters are listings. The lamp lights drive the mood. Music streams through a persistent global audio player that survives navigation.

The brief from the client was unusual: replace a traditional storefront with a place. Buying a record should feel like picking it up off a shelf, not adding a SKU to a cart. So every interaction is anchored to a 3D object · hover a poster outline, the cursor sharpens; tap the TV, the camera auto-zooms; tap a product, the scene transitions into a detail page without breaking spatial continuity. Round-trip back to the room and you land exactly where you left.

The cart is a floating panel that overlays the scene. Checkout hands off to Shopify hosted checkout for PCI scope reasons. Auth, music library, and admin live behind Supabase with RLS and role-gated routes for the artist to upload tracks, manage product images, and seed releases.

Next.js 16 with the App Router and React 19, TypeScript strict mode, Tailwind 4 with custom design tokens in globals.css. The 3D layer is React Three Fiber on Three.js 0.172 with drei utilities and a postprocessing stack (Bloom, Vignette, ChromaticAberration, custom SplitToningEffect). GLB models load via useGLTF with a Draco decoder. Hotspot mesh names in the motel room are load-bearing · Room, TV, TV_Screen, Poster, Lamp · and drive every interaction.

State runs on Zustand stores: auth, cart, music, env. The music store wraps a singleton HTMLAudioElement and survives route transitions for uninterrupted playback. The cart store persists to localStorage by cart_id and uses a mutex queue for cart mutations to prevent race conditions during rapid add/remove.

Backend is Supabase: PostgreSQL with RLS as the primary access layer, Auth with cookie-based sessions, and Storage for audio files. Middleware refreshes sessions and gates /admin behind role checks. An API route at /api/tracks/[id]/stream-url generates signed Storage URLs with a 120s TTL, rate-limited to 30 req/min per IP, and the music store auto-refreshes the URL 30s before expiry.

Commerce is Shopify Storefront API (GraphQL, 2025-01) via a typed client. Cart mutations go through GraphQL with optimistic UI; checkout redirects to Shopify hosted checkout. Stripe is wired but dormant. Hosting is handled by the client; the public portfolio embeds only a sandboxed scene viewer.