BodyBarrel
A luxury Korean-inspired skincare DTC e-commerce storefront featuring interactive 3D WebGL physics, pinned routine transitions, and high-conversion checkout.
WebGL render target
Performance score
Interactive canvas
Problem & Context
BodyBarrel is an advanced DTC bodycare and cosmetic brand engineered around cellular skincare science and biodegradable surfactants. The project required creating an ultra-premium digital flagship that merges editorial beauty aesthetics with cutting-edge web technologies—including real-time 3D WebGL product visualization, smooth inertial scrolling, dynamic ingredient interactions, and a persistent shopping bag.
High-end beauty consumers demand fluid, tactile, editorial-grade digital interactions. Achieving 60 FPS WebGL rendering, physics-based glass simulations, and pinned multi-step routine sections without sacrificing mobile responsiveness or page load speeds posed a substantial engineering challenge.
Engineering Strategy
Architected a high-performance web storefront combining Next.js 16 App Router with React 19, Three.js, and React Three Fiber. Implemented Lenis smooth inertia scrolling, GSAP ScrollTrigger for pinned formulation steps, an optimistic Zustand shopping bag store, and serverless edge caching for instantaneous checkout transitions.
Built on Next.js 16 with React 19 and Tailwind CSS v4. Leveraged React Three Fiber, Drei, and OGL for 3D glass bubble simulations and shader effects. Powered on the backend by Supabase / PostgreSQL via Prisma ORM for inventory and product specifications, with Stripe checkout webhooks and Cloudflare edge network deployment.
Architectural & Technical Choices
Leveraged React Three Fiber with custom post-processing shaders for interactive 3D product visuals with sub-50ms paint times.
Built pinned multi-step routine breakdown using GSAP ScrollTrigger with scrubbed timeline animations.
Engineered a lightweight, persistent client cart with Zustand supporting instant slide-out drawers and optimistic updates.
Adopted Tailwind CSS v4 and dynamic client-component code splitting to achieve near-perfect Core Web Vitals.
Engineering Challenges Overcome
⚠️ Challenge: 3D WebGL shaders and heavy geometry dropping frames on mid-tier mobile GPUs.
✓ Solution: Implemented dynamic level-of-detail (LOD) scaling, disabled computationally expensive post-processing passes on mobile viewports, and deferred non-critical canvas renders.
⚠️ Challenge: Maintaining instant cart interactions and preventing layout shift during complex slide-out transitions.
✓ Solution: Utilized Zustand with local storage persistence and Framer Motion spring physics for smooth, non-blocking drawer animations.