Scroll-driven hero
ARCHIVE 001 reveals garment by garment as you scroll.
Design note
Editorial pacing, not a carousel. Each piece gets the full viewport, the way a lookbook gives each garment a spread.
Apparel E-Commerce
Drape
Considered clothing, shown in real 3D.
A fashion store where every garment is a rotatable 3D model. Numbered runs in loopwheel jersey, Merino and European linen — documented, not photographed.
Visit the live siteapldigital.in/drape
Open ↗Loading Drape…
Role
Designer & Front-end Developer
Timeline
Feb – Aug 2025
Scale
7 pages
Built with
React · Three.js · Tailwind · Framer Motion
7
Pages, fully functional
3D
Rotatable model per product
9
Pieces across 4 categories
The problem
Online clothing has one unfixable flaw: you cannot feel the fabric or see how a garment hangs. Flat product photography hides fit, weight and drape — precisely the things that cause returns and kill repeat purchase.
The approach
I made the garment itself the interface. Every product is a real 3D model the customer rotates, zooms and inspects. The homepage is a scroll-driven archive that reveals the collection piece by piece, so browsing feels like walking a rail rather than scanning a grid.
What shipped
A seven-page store where the 3D viewer is the product page rather than a widget bolted onto it. Categories, cart, checkout and the collection narrative all run on live data.
Process
How it came together
Category study
Audited how existing apparel sites handle fit and fabric, and found every one of them relying on photography plus a size chart.
3D feasibility
Prototyped the garment viewer first to confirm it could load fast enough to be the primary product view, not an enhancement.
Editorial system
Built the type and spacing system around lookbook pacing rather than catalogue density.
Commerce build
Wired categories, cart, checkout and the archive narrative into one continuous flow across seven pages.
Design system
Colour & type
Colour system
Ink
#121216
Base surface & type
Paper
#FFFFFF
Product canvas
Zinc
#71717A
Secondary text & metadata
Archive Amber
#F59F0A
Drop badges & accents
Bone
#F4F4F5
Light sections
Charcoal
#1C1C22
Raised cards
Typography
Display
Aa
Inter Tight — Bold, tight tracking
Body
Aa
Inter — Regular
Deliberately monochrome and typographic. When the product is the only colour on screen, the interface has to get out of the way — so the type does the styling instead.
Key screens
What each screen has to do
3D product page
Drag to rotate, scroll to zoom, switch colourway.
Design note
The model replaces the image gallery entirely. There is no fallback carousel to fall back into — the 3D is the source of truth.
Category browse
Tees, Shirts, Knitwear, Outerwear with live piece counts.
Design note
Counts are shown because runs are numbered and finite. Scarcity is real here, so the interface states it plainly.
Approach section
'Fewer things, made properly' — the making story.
Design note
Placed between browse and bestsellers, so the justification for the price lands before the price does.
Design decisions
What got cut, and why
Product imagery
Rejected
A conventional five-image gallery with a zoom-on-hover lightbox.
Shipped
One rotatable 3D model as the entire product view.
Why
A gallery still leaves the customer guessing about drape and volume. If the 3D is good enough to replace photography, keeping photography beside it just signals doubt.
Homepage structure
Rejected
A standard e-commerce grid of product cards above the fold.
Shipped
A scroll-driven archive that reveals one garment at a time before any grid appears.
Why
The brand sells consideration over convenience. A dense grid communicates the opposite of 'fewer things, made properly'.
Colour
Rejected
A warm fashion palette with seasonal accent colours per drop.
Shipped
Near-monochrome ink and zinc, with amber reserved for drop badges only.
Why
The garments carry the colour. Any interface colour competes with the product it is meant to sell.
What I owned
3D product viewerScroll-driven archiveFull commerce flowBrand identity
It's live. Go use it.
Every screen described here runs in production — real routing, real data, real interactions.
Open DrapeNext up
Kinetic