Case Study · Headless Shopify Hydrogen & 3D Digital Craft
Mindful hydration rituals meet
bleeding-edge headless commerce.
Noukai Tokyo needed an e-commerce flagship matching the precision, calm, and tactile elegance of luxury Japanese skincare. We engineered a sub-second headless platform on Shopify Hydrogen 2025 and Shopify Oxygen edge workers, integrating interactive scroll-driven 3D WebGL bottle exploration, 4K streaming media, and dynamic Storefront API state management.
Executive Summary & Results
Sub-second luxury engineering at the global edge.
Noukai Tokyo is a high-end Japanese skincare atelier designed around the philosophy of mindful hydration rituals and botanical bio-science. To convey the poise and tactile calm of Japanese craftsmanship, the brand required a digital presence far beyond pre-built Liquid templates.
As lead full-stack engineer on the storefront architecture, we built an edge-native headless storefront running on Shopify Hydrogen 2025 deployed directly to Shopify Oxygen edge workers. The architecture delivers 60 FPS interactive 3D bottle orbits, sub-second page transitions, and zero-layout-shift 4K video playback.
60 FPS
Scroll-linked 3D WebGL bottle rotation
<0.9s
Largest Contentful Paint (LCP) with 0.00 CLS
100%
Edge-rendered SSR on Shopify Oxygen
2 Phases
Strategic delivery lifecycle (Dec '25 & Aug '26)
Brand Vision & Philosophy
Tactile minimalism, botanical bio-science, and Japanese calm.
The brand philosophy honors the centuries-old Japanese tradition of seasonal renewal and deep dermal replenishment:
- Aesthetic Harmony: A soothing visual language rooted in deep Japanese indigo (
#163860), warm organic washi paper tones (#e7e0d6), frosted glass textures, and authentic bilingual typography pairing Kozuka Gothic for Japanese kanji/kana with Fieldwork Geo for clean architectural latin headings. - Hero Botanical Formulation: "Haru Intense Hydration Serum" (Serum 22) — engineered with high-altitude Snow Mushroom (Tremella), multi-weight Sodium Hyaluronate, Ectoin, Madecassoside, and skin-identical multi-weight Ceramides.
- The Digital Objective: Craft a digital flagship that feels as tactile, fluid, and rejuvenating as applying the serum itself — eliminating choppy animations, clunky page reloads, and rigid e-commerce layouts.
The Project Evolution & Timeline
Delivered in two distinct strategic phases separated by a creative hiatus.
Rather than rushing compromised creative assets into production, the engineering and creative teams coordinated around a planned 5-month interval:
Headless Architecture & Oxygen Edge Foundation
Architected the core Shopify Hydrogen 2025 monorepo with Vite, TypeScript, and Tailwind CSS v4. Engineered custom Oxygen edge CI/CD deployment pipelines, resolved Cloudflare Worker Rollup polyfills, integrated GraphQL Storefront API schemas, and crafted the optimistic slide-over cart drawer and glassmorphic UI system.
3D CAD Synthesis & Cinematic Production
With a bulletproof headless foundation locked in, the industrial design and branding teams produced photorealistic 3D product CAD/Blender models (serum22.blend), captured 4K cinematic macro video footage of formulation droplets, iterated on physical bottle glass finishes, and perfected bilingual Japanese brand narratives.
Interactive 3D WebGL & Pre-Launch Scale
Integrated @google/model-viewer with GSAP ScrollTrigger for 360° scroll-linked camera orbits. Deployed 4K Cloudinary video streaming with zero-layout-shift poster preloading, configured strict cryptographic CSP nonces, and automated edge-native pre-launch lead capture using the Shopify Admin API.
Decoupled Speed Without Regression
Because Phase 1 established a battle-tested headless engine, Phase 2 creative innovations were integrated smoothly into production in weeks without modifying, refactoring, or destabilizing the underlying checkout and commerce state.
The Technical Architecture
An edge-native stack engineered for performance.
Every layer of the platform was selected for minimal client overhead, deterministic styling, and extreme edge resilience:
Shopify Oxygen Edge Runtime
Deployed across Cloudflare-powered Shopify Oxygen edge nodes worldwide. Server-rendered responses stream directly from the nearest edge datacenter with sub-50ms TTFB.
Shopify Hydrogen 2025 & Remix / RR7
React Router v7 / Remix streaming architecture with progressive hydration, React Server Components, and zero-runtime CSS via Tailwind CSS v4.
WebGL Model Viewer & GSAP ScrollTrigger
Client-side dynamically hydrated @google/model-viewer synchronized with GSAP ScrollTrigger, mapping vertical scroll depth directly into 3D bottle rotation and ingredient callouts.
Cloudinary 4K Media & Shopify APIs
Adaptive bitrate 4K video delivery via Cloudinary paired with Shopify Storefront GraphQL queries and Shopify Admin API customer creation webhooks.
Engineering Highlights
Custom innovations built for luxury digital storytelling.
🍶 Scroll-Driven 3D Formulation Reveal
Engineered ProductBlendScroll.tsx, locking the viewport as users scroll vertically through the hero ritual section. The 3D bottle's camera orbit rotates continuously from -30° to 330° while synchronizing staggered opacity and upward slide animations for Snow Mushroom, Ceramides, Madecassoside, and Ectoin.
⚡ Edge-Safe WebGL Hydration
Overcame fatal Shopify Oxygen worker crashes caused by @google/model-viewer extending HTMLElement at module load time. Configured Vite SSR externalization (ssr.external: ['@google/model-viewer']) and lazily mounted the WebGL runtime exclusively inside browser-side useEffect lifecycle hooks.
🎥 Zero-CLS 4K Cinematic Video Streaming
Served macro serum video footage through Cloudinary with automated format and quality negotiation (f_auto,q_auto:best). Built an instant high-resolution poster preload strategy with a CSS crossfade transition, guaranteeing zero cumulative layout shift (CLS: 0.00) and an LCP under 0.9s.
📬 Pre-Launch Lead Engine via Admin API
Engineered an edge-rendered coming-soon portal (app/routes/_index.tsx) communicating directly with the Shopify Admin API (/admin/api/2024-04/customers.json). Automatically captures pre-launch leads with accepts_marketing: true, customer segmentation tags (Newsletter, Coming Soon), and graceful duplicate handling.
🛒 Optimistic Cart Drawer & State Sync
Developed an interactive slide-over cart drawer with real-time GraphQL line-item count synchronization, instant quantity modifiers, and direct checkout redirection while strictly preventing mounting state loops during rapid user interactions.
✨ Glassmorphism & Japanese Washi UI
Crafted the modular GlassButton design system component with multi-layered backdrop filters (backdrop-blur-xl), subtle multi-directional rim lighting, liquid hover states, and smooth snap-scrolling ingredient carousels honoring Japanese tactile materials.
Technical Challenges & Solutions
Solving complex edge runtime & animation constraints.
Challenge 1: WebGL Custom Elements in an SSR Edge Worker
The Problem: @google/model-viewer and its underlying Lit dependency touch the global window and HTMLElement objects immediately upon evaluation. When Oxygen edge workers booted the server bundle, the missing DOM environment caused fatal SSR crashes.
The Solution: Marked the library as external in vite.config.ts so the server bundle completely skips evaluation. On the client, wrapped the custom element registration inside a dynamic import('@google/model-viewer') inside a React useEffect hook, keeping Oxygen SSR lightning fast while enabling full 60fps WebGL in the browser.
Challenge 2: Streaming SSR with Cryptographic CSP Nonces
The Problem: Loading third-party 4K media from Cloudinary, 3D glTF/GLB models, and WebAssembly shaders required strict Content Security Policies (CSP) to prevent XSS without tripping security violations on edge workers.
The Solution: Implemented Hydrogen's createContentSecurityPolicy in entry.server.jsx paired with React's renderToReadableStream. Injected cryptographically secure request-scoped nonces via NonceProvider, explicitly authorizing Cloudinary video streams, Shopify CDN blobs, and WASM shaders without compromising security.
Challenge 3: Seamless Scroll-Synchronized 3D Camera Math
The Problem: Standard scroll triggers produced stuttering camera motion and asynchronous timing when trying to keep narrative ingredient callouts aligned with the 3D bottle's front and back labels.
The Solution: Built a parametric transformation function mapping normalized viewport scroll progress (0.0 to 1.0) into continuous camera azimuth angles from -30° to 330°, with calibrated entrance/exit fractions (ENTER_EXIT_FRACTION = 0.22) that create an effortless, gallery-grade exhibition feel.
Technology Stack
Battle-tested tools and frameworks.
The Result
The pinnacle of modern e-commerce engineering.
Noukai Tokyo represents what is possible when the delicate aesthetics of Japanese skincare rituals are paired with bleeding-edge web technologies. By unifying Shopify Hydrogen, Oxygen edge workers, GSAP-controlled 3D WebGL models, and 4K media streaming, we proved that high-fidelity luxury digital experiences can be delivered with sub-second performance, zero layout shift, and enterprise-grade reliability.
Ready to engineer a
headless commerce
flagship?
Ready for a
headless store?
Let's discuss how Shopify Hydrogen, 3D WebGL, and custom edge architectures can elevate your brand.
Free 30-min call. No commitment. No templates.
Book your free call →The craft in every click.