Hero with live 3D
'Feel every stride' over a shoe you can drag immediately.
Design note
The interaction is available before any copy is read. Grabbing the shoe is the fastest possible proof that this store is different.
Footwear E-Commerce
Kinetic
Feel every stride.
High-performance footwear shown in real 3D. Drag to spin, scroll to zoom — inspect the sole, stitching and silhouette before you commit.
Visit the live siteapldigital.in/kinetic
Open ↗Loading Kinetic…
Role
Designer & Front-end Developer
Timeline
Feb – Aug 2025
Scale
7 pages
Built with
React · Three.js · Tailwind · Framer Motion
7
Pages, fully functional
10
Performance technologies
360°
Product inspection
The problem
Performance footwear sells on engineering — carbon plates, supercritical foams, outsole geometry. None of that is visible in a catalogue photo, so the buyer is asked to accept a spec sheet on faith and pay ₹15,000 for it.
The approach
I anchored the engineering claims to the object. Each shoe spins in true 3D, and the technology callouts sit on the part of the shoe they describe — the plate at the midsole, the outsole at the tread. A claim you can rotate towards is a claim you can check.
What shipped
A store where the technology story and the buying flow are the same interaction. Four categories, a race-day hero collection, and full cart-to-checkout on live data.
Process
How it came together
Spec audit
Catalogued how performance brands communicate engineering and found the claims consistently detached from the product view.
Anchor mapping
Mapped each technology to the physical component it lives in, so callouts could be positioned rather than listed.
Performance budget
Set a load budget that let the 3D stream in without blocking first paint on mid-range Android.
Commerce build
Shipped four categories, the race-day collection, and the full cart-to-checkout path across seven pages.
Design system
Colour & type
Colour system
Track Ink
#121216
Base surface
Kinetic Blue
#2A66F4
Brand & primary action
Deep Blue
#0B45CB
Hover & pressed states
Zinc
#71717A
Spec text & metadata
Ice
#ECF1FE
Tech callout backgrounds
Amber
#F59F0A
Bestseller badges
Typography
Display
Aa
Inter — Bold, tight tracking
Body
Aa
Inter — Regular / Medium
Tight, technical, no flourish. Spec tables and marketing headlines share one family so performance numbers never look like an afterthought.
Key screens
What each screen has to do
Technology rail
Ten technologies scroll continuously beneath the hero.
Design note
A marquee rather than a static list — it reads as a spec sheet in motion, matching the brand's performance register.
3D inspection
Drag to rotate, scroll to zoom into weave and stitching.
Design note
Zoom depth was tuned so the outsole lug pattern is legible — that is the detail trail runners actually check.
Race-day collection
The Velocity Pro given a dedicated full-bleed section.
Design note
One hero product carries the engineering story; the rest of the range inherits its credibility.
Design decisions
What got cut, and why
Technology presentation
Rejected
A specifications table below the product images, as every footwear retailer does.
Shipped
Callouts anchored to the 3D model at the exact component they describe.
Why
A spec table asks the buyer to trust a list. Anchoring the claim to the part makes the engineering inspectable instead of asserted.
Brand colour
Rejected
Neon volt green — the default cue in the running category.
Shipped
Electric blue on near-black, with amber reserved for commerce badges.
Why
Volt reads as one specific competitor. Blue kept the performance signal while leaving the brand room to be its own thing.
3D loading
Rejected
Load the full 3D model on page entry for maximum impact.
Shipped
Static hero paints first, model streams in behind it.
Why
On Indian mobile connections a blocking 3D load costs more customers than the effect wins. The interaction still arrives — just not before the page does.
What I owned
3D shoe viewerTechnology storytellingCommerce flowPerformance brand system
It's live. Go use it.
Every screen described here runs in production — real routing, real data, real interactions.
Open KineticNext up
BrightMinds Academy