Wooster Core
A concept storefront for a 3D-printed kitesurf handle, designed as the product’s own box: the lid is the hero, the foam tray is the shop, and a live print is the line drawing.
Overview
Wooster Core is a self-initiated concept storefront for Arty Design’s 3D-printed kitesurf handle, built to show what C4 ships before a brief exists. The October 2026 redesign is built around the product’s own box. The hero is the lid, laid out like the real one, with a live WebGL print standing in for its line drawing: the handle builds layer by layer with an orange trace at the nozzle, down to the bolts and washers in the kit. Below it the kraft foam tray, from a real top-down photo, is the shop: point at a line in the packing list and its part lights up in the tray. A spec panel uses real close-ups of the print, and the close shows the real boxes. Every colour is sampled from the product photos, and the concept is hidden from search.
In motion
Screenshots
What I Delivered
- A single-page storefront redesigned around the product box, plus cart and checkout routes (Next.js App Router)
- The live WebGL print as the hero, with an orange trace and nozzle on the layer being printed, the kit’s bolts and washers, and a poster frame for first paint
- A shop built from the real tray photo, with a mask per part so each one can light on its own
- A spec panel using real close-ups of the printed part
- A cart drawer and cart page
- Noindex across the site; the unsourced testimonials, the newsletter form that signed nobody up and the dead links removed
Key Features
- Box-lid hero laid out like the real lid and lettered in the silver ink measured off it: the name over a rule, PERFORMANCE BIG AIR, the price and the kit, ENGINEERED BY ARTY DESIGN
- Real-time FDM print in three.js: the part builds layer by layer, with an orange hot trace and nozzle at the print line
- First paint shows a pre-rendered poster of the print, and the 3D takes over from the same frame
- Packing list linked to the tray photo: point at a line and its part lights up; each part has its own link
- Prices in Australian dollars, with a bundle for the handle and the Woo Mount
- Stripe Checkout through a server route
Stack & Tooling
- Next.js 16.2.2 (App Router)
- React 19.2.4
- TypeScript
- Tailwind CSS v4
- three.js 0.183 with @react-three/fiber 9.5 and @react-three/drei 10.7
- Lexend for the box lettering, Archivo and Martian Mono, via next/font
- Framer Motion in the cart drawer; GSAP only in the C4 footer credit
- Stripe server SDK and Stripe.js
- Vercel hosting
Integrations & Backend
- Stripe Checkout, created server-side by the /api/checkout route handler
- Schema.org ItemList product data
- C4 Studios footer credit
Performance / SEO / Accessibility
- The 3D scene loads client-side only, behind a poster frame that matches its first frame, so first paint never waits on WebGL
- Every page ships noindex in the page and the response header
Challenges & Constraints
- Keeping the live print as the centrepiece while the page around it became the box it ships in
- Lighting single parts in one photograph: each part has its own mask cut from the real tray photo
- Not inventing riders: the rider story is built, and held off the page until real riders can be named
What I'd Improve Next
- Real rider stories for the held “Built by riders” section
- Keep the cart between visits (it resets on reload)
- A photo of the standalone Woo Mount
- Contact details confirmed by Arty Design