ConceptE-CommerceConcept3D / WebGLWatersportsNext.jsStorefront2026
Wooster Core
A concept storefront for a 3D-printed kitesurfing hardware brand — a real-time WebGL FDM print builds the product in front of you, layer by layer.
ClientConcept — 3D-printed kitesurfing hardware brand
LocationAustralia
RoleSolo (concept, design, development, deployment)
01
Overview
Wooster Core is a self-initiated concept storefront for a performance kitesurfing-hardware brand — built to show what C4 ships before a brief exists. Its centrepiece is a bespoke real-time WebGL scene that 3D-prints the product in front of the visitor: a travelling gantry lays the part down layer by layer, a live print HUD ticks through layers, Z-height and nozzle temperature, and as each component finishes it surfaces its own annotated spec label. Around that hero sits a complete commerce experience — product grid with colour variants, a savings-calculated bundle, an exploded-view system diagram, a technical spec sheet, a slide-in cart, a dedicated cart page and a Stripe Checkout flow with a print-themed order-confirmation screen. The whole thing is engineered on the latest Next.js App Router with a disciplined eye on performance and accessibility (code-split 3D, ref-driven HUD with zero re-renders, reduced-motion fallbacks, structured data). It's a showcase build, available to license or commission as a starting point for a real watersports or hardware brand.
02
Screenshots
03
What I Delivered
- Full single-page marketing storefront plus dedicated cart and order-confirmation pages (Next.js App Router)
- Bespoke real-time WebGL hero that 3D-prints the product layer-by-layer, with a live print HUD
- Interactive 3D component explorer — clickable spy-line markers reveal part numbers and functions
- Brand design system: Tailwind v4 theme tokens (Signal Orange on near-black) and a Bebas Neue / DM Sans / JetBrains Mono type stack
- Sticky navigation with scroll-state styling and scroll-spy active-section highlighting
- Product grid with in-stock/SKU chips, colour-variant selection and add-to-cart
- Savings-calculated "Ultimate Bundle" card and a coming-soon product lineup
- Exploded-view system diagram with leader-line annotations (desktop) and a stacked list (mobile)
- Technical spec sheet and material-science cards
- Animated marquee CTA section and a process-timeline / testimonials / packaging showcase
- Slide-in cart drawer and a standalone cart page with quantity controls and live totals
- Stripe Checkout integration via a server route handler, with a print-themed success page
- Newsletter signup UI, SEO metadata + JSON-LD structured data, and full responsive/mobile layouts
- Site-wide animated "Designed by C4 Studios" credit badge
04
Key Features
- Real-time FDM print simulation: clipping-plane reveal (printed solid below / ghost wireframe preview above), a molten "hot band" at the print line, and custom GLSL layer striations
- Travelling gantry + nozzle that smoothly chases the cluster currently being printed, throwing additive-blended spark particles
- Live print HUD (layer count, Z-height in mm, nozzle/bed temperature, % progress) driven directly from the render loop with zero React re-renders
- Auto-showcase cycle that walks through each component until the visitor takes over by dragging or tapping
- Camera intro dolly and a custom hover-to-zoom zone that never hijacks page scroll; coarse-pointer detection swaps it for +/- buttons on touch
- Completion payoff: emissive surge that cools off, a rolling shockwave ring and a "COMPLETE" HUD state, plus a one-tap reprint
- Colour-variant swatches with accessible pressed state; bundle savings computed from component prices
- Scroll-spy nav, animated mobile menu, and on-scroll reveal animations throughout (Framer Motion in-view)
- Graceful image fallbacks (icon-only in compact contexts) when product photography is missing
- Stripe Checkout Sessions with shipping-address collection (AU/NZ/US/GB) and success/cancel redirects
05
Stack & Tooling
- Next.js 16.2.2 (App Router, Turbopack build)
- React 19.2.4 / React DOM 19.2.4
- TypeScript 5 (strict)
- Tailwind CSS v4 (@tailwindcss/postcss, CSS-first @theme tokens)
- three.js 0.183 with @react-three/fiber 9.5 and @react-three/drei 10.7 (OrbitControls, Html, Grid)
- GSAP 3.14 + @gsap/react 2.1 (hero intro timeline, C4 badge animation)
- Framer Motion 12.38 (scroll-reveal, cart drawer, mobile menu)
- Stripe — stripe ^22 server SDK and @stripe/stripe-js ^9
- Zustand 5.0.12 (in the dependency set; cart state currently implemented with the React Context API)
- next/font/google (Bebas Neue, DM Sans, JetBrains Mono), next/image
- ESLint 9 + eslint-config-next; hosted on Vercel
06
Integrations & Backend
- Stripe Checkout — server-side Checkout Session creation via the /api/checkout Route Handler (Node runtime), with server-side price/variant validation
- Vercel — deployment target; canonical URL derived from SITE_URL with VERCEL_PROJECT_PRODUCTION_URL / VERCEL_URL fallbacks
- Google Fonts via next/font (self-hosted, swap display)
- Schema.org / JSON-LD ItemList product structured data
- Newsletter signup (front-end form present; email-service backend not yet wired)
- C4 Studios animated footer credit badge
07
Performance / SEO / Accessibility
- The entire 3D scene is dynamically imported with ssr:false and code-split, so it never blocks first paint or runs on the server
- GSAP is dynamically imported in the hero to avoid SSR issues and keep it out of the initial bundle
- Print HUD updates are written straight to DOM refs from the frame loop — no React re-renders per frame
- WebGL tuned for performance: device-pixel-ratio clamped to [1, 1.5], high-performance power preference, and explicit geometry/material/texture disposal on unmount
- next/image with responsive sizes and graceful error fallbacks; layout/work kept off the main thread where possible
- Accessibility: aria-labels on icon buttons, aria-pressed on variant swatches, aria-expanded on the mobile menu, semantic landmarks, descriptive alt text, focus-visible outlines, and aria-hidden on decorative canvas/marquee layers
- Reduced-motion honoured globally (CSS @media plus per-component guards, including the C4 badge)
- SEO: title/description/keywords/canonical/OpenGraph metadata, metadataBase from the resolved site URL, themeColor, and JSON-LD; pages prerendered as static content
08
Challenges & Constraints
- Building a believable real-time 3D printer: synchronising clipping planes, a molten hot-band, injected GLSL striations, a path-finding nozzle and the numeric HUD so they all advance off a single print-height value
- Making the spy-line markers appear exactly as their part is printed — each marker shares the print clipping plane, then plays a staged line-draw + info-card animation
- A scroll-to-zoom interaction that controls the camera without ever stealing the page scroll, plus a coarse-pointer fallback to +/- buttons on touch devices
- Embedding the portable C4 badge (which ships without a "use client" directive) into the Server-Component App Router layout via a thin Client wrapper — the documented Next.js third-party-component pattern
- Graceful checkout degradation: the API returns a clear 503 when STRIPE_SECRET_KEY is absent, so the concept deploys and demos without live keys
09
What I'd Improve Next
- Persist the cart to localStorage (it is currently in-memory and resets on reload) — a natural fit for the already-installed Zustand with its persist middleware
- Wire the newsletter form to a real ESP (Klaviyo / Mailchimp / Resend)
- Add Stripe webhooks + order persistence, and an inventory / fulfilment backend
- Replace placeholder imagery with real product photography and per-product detail routes
- Introduce tax/shipping-rate calculation and additional payment methods at checkout
- Add real rider testimonials and product analytics (e.g. Vercel Analytics)