ORBIT
A concept online store for a fictional running-shoe brand, where the product is a real-time 3D shoe: it floats in the hero, turns as you scroll, and spins in your hand on the product page.
What we made
- Landing, collection & product pages
- Real-time 3D shoe in every view
- Colourway morph shader
- Scroll-driven feature story & X-ray scan
- Drag-to-rotate viewer with hotspots
- Bag with sizes & quantities
Stack
This is the real site, running live. Drag the shoe, switch colourways, scroll through the story, or open it full screen.
The story behind ORBIT.
The idea
Most online stores show a product as a row of flat photos. ORBIT asks what a store feels like when the product itself is live 3D: a shoe you can spin, inspect from the sole up, and watch change colour in front of you. We built it for a fictional running-shoe brand to show what that does for a launch.
The shoe does the selling
The landing page opens on the shoe floating in orbit rings, following your cursor. Pick a colourway and the new colour sweeps across it from heel to toe with a glowing edge. Scroll, and the shoe turns to show each feature in turn, then an X-ray scan wipes it down to its wireframe.
A store that works
The collection page puts all six colourways on a turning 3D ring above a filterable grid, and every card has its own live shoe. The product page has a viewer you drag to rotate, quick angles for side, top, heel and sole, hotspots that explain the materials, and a working bag with sizes and quantities.
Under the hood
It all renders through a single WebGL canvas: every 3D block on a page is drawn into its own region of that one canvas, so a page with ten shoes costs about as much as a page with one. The shoe model is Shopify’s open sample asset (CC BY 4.0); the colourways, lighting, shaders, animation and the store around it are ours. Built with React, Three.js and React Three Fiber, and hosted on Cloudflare Pages.
More 3D projects.
Velvra Glow Serum
A 10-second vertical launch reel for a fictional skincare serum: a glass dropper bottle in a dark, foggy set that turns bright and weightless.
View projectNOCTARE
A 13-second launch film for a fictional cologne: a cleaved black-glass bottle, liquid amber and one slow-motion spray burst, lit like a jeweller’s window at midnight.
View project