FORMA – 3D Fashion E-commerce Template with Product Configurator (Next.js, React Three Fiber)

FORMA is a 3D e-commerce template for footwear, apparel and accessories brands, built with Next.js 16, React 19, three.js and React Three Fiber. Every product on the shop has a real-time 3D viewer, the home page is a scroll-choreographed 3D story, and the whole store (shop, product, cart, wishlist, search and a four-step checkout) is already wired together. FORMA is a fictional brand; swap one brand file and one catalogue file to make it yours.

Try the live demo from the button on this page, watch the video tour, or step through the screenshots at desktop, tablet and phone sizes.

The 3D home page

• Floating sneaker hero. A real-time sneaker floats over huge kinetic type that stretches with scroll velocity. The colourway picker recolours the shoe with a heel-to-toe shader wipe and floods the whole stage with a liquid circle reveal.
• The new-season drop, then category tiles with a WebGL hover distortion that blends the main image into the alternate one.
• A pinned horizontal "studio edit" rail of products.
• Exploded anatomy. Scrolling pulls the sneaker apart into outsole, midsole, upper and laces with tongue, each with a live 3D callout pinned to the part.
• A parallax lookbook, a marquee band and the footer.

A product configurator on every product page

• Drag to rotate, pinch or ⌘/ctrl + wheel to zoom, or use the on-screen buttons.
• Colourways: the shoe uses the glTF KHR_materials_variants extension, so the three variants in the model are read straight from the file, and extra colourways recolour the texture in the shader (light, accent and dark panels).
• Finishes: Knit, Suede and Patent change the physical material (roughness, sheen and clearcoat) live.
• Size selector with sold-out sizes, add to bag with a fly-to-cart animation, wishlist, accordions and related products. The product card image morphs into the viewer as a shared element using React's <ViewTransition>.
• Procedural apparel: tees, a hoodie, a jacket, shorts, socks, a tote, a cap and a beanie are generated in code from 2D silhouettes, with sheen fabric, a knit normal map and a gentle sway, so the template ships no stock photos.

The rest of the store

• Shop and category pages with category, size, colour-family and max-price filters plus sort. Filter changes animate cards in, out and into new slots.
• Cart drawer and bag page with quantities, remove, subtotal and a free-shipping progress bar, persisted on the device.
• Wishlist, a search overlay (⌘K or /), page wipe transitions, a custom cursor, Lenis smooth scroll and a mobile menu.
• Demo checkout in four steps (information, delivery, payment, review) and a confirmation screen. It never collects or sends payment data and is labelled as a demo throughout. The README shows where to plug in a Stripe Checkout Session and a real catalogue (Shopify Storefront API, Medusa, Sanity or your own database).

Performance, accessibility and responsiveness

• Device pixel ratio is capped for the WebGL canvases, and the product images are rendered from the 3D models as WebP.
• prefers-reduced-motion turns off smooth scroll, marquees, wipes, the custom cursor and auto-rotation; colour changes then apply instantly.
• Layouts are tuned for desktop, tablet and phone, with a touch 3D viewer and a sticky add-to-bag bar on mobile.

Rebrand in minutes

• config/brand.ts – name, tagline, season, currency and locale, free-shipping threshold, shipping and tax, navigation, social links and the colour tokens that become CSS variables.
• config/fonts.ts – display, serif and mono fonts through next/font (the display font's width axis drives the kinetic type).
• data/products.ts – the typed catalogue: 15 sample products across footwear, apparel and accessories, plus categories, lookbook and colour families.
• Swap in your own GLB models, or point product images at real photos.

What's in the download

• The complete Next.js source (App Router, TypeScript), with the 3D sneaker model, rendered product images and lookbook images
• scripts/render-products.mjs to re-render catalogue images from the 3D models, and a visual QA screenshot script
• Documentation/index.html and README.md
• Licence note: the sneaker is the "MaterialsVariantsShoe" sample model © Shopify, licensed CC BY 4.0 via the Khronos glTF Sample Assets. Keep the credit (it is already in the footer and README) or replace the model with your own. All other models, renders and copy are original to the template.

Requirements

• Node.js 20.9 or newer and npm
• No environment variables or API keys are needed
• Deploys to Vercel or any Node host, or as a static export

Read how we built FORMA for the design decisions behind the 3D store.