JL
Nike Air Archive
[View live]

Nike Air Archive

Scroll into the poster and the camera pushes through it into the room, where you can drag to look around or rest near the edge of the screen and the view keeps turning. Walk up to a rack with a click, and the garment you hover turns to face you while its neighbors slide apart. Click one to see its price, color, and sizes, spin it by hand, and add it to the bag.

  • html5
  • css3
  • javascript
  • three.js
Format
Interactive experience
Platform
Desktop + Mobile
Engine
three.js + GLSL
Type
Concept

How It Works

1
On scroll

Enter

The wheel, a swipe, or the arrow keys scrub a spring-driven zoom through the poster's five depth layers, and a click or a scrub past the commit point hands the rest of the move to the camera.
2
Every frame

Look

A drag or a rest near the edge of the screen turns the view. Every moving value in the scene is a spring, and the render loop stops once they all settle, so an idle store draws nothing.
3
On hover

Turn

At a rack, the hovered garment steps through five frames, which a custom fragment shader warps along baked optical flow. Its neighbors slide aside like hangers on a rail. Brushing the cursor past them swings them as pendulums, each with its own lightly damped spring.
4
On click

Inspect

The product panel opens on a click, a right-hand column on desktop and a bottom sheet on a phone, and the camera reframes the garment in the space the panel leaves. Thumbnails or a sideways drag turn it, and the panel holds keyboard focus until Escape hands it back.

Engineering

  • Garments that turn without a 3D model

    Each garment is a flat plane showing five generated angles, made from its product page photos. Every step between two angles carries an optical flow field baked into one atlas, and a fragment shader warps both frames toward each other as they blend. A standard dense flow pass left a doubled sleeve on the hardest step of one tee, at a mean warp error of 19.5 gray levels. These frames are dark and low in texture, so I switched to a solver that tracks them. That step dropped to 4.1.

  • One color ramp lights the whole room

    The scene has no light objects. Walls, floor, and ceiling each compute a lightness value and look it up in one ramp, built from 11 CSS tokens and interpolated in OKLab, and the steel racks reflect an environment map rendered from that same ramp, so the metal picks up the colors of the walls around it.

  • A store that still opens when a file fails

    The store loads 90 garment files before the room appears. Waiting on all of them together let one failed request hold the preloader up, so I made each file settle on its own, and a complete garment from the same hall replaces any garment missing a frame. If WebGL or the 3D library is unavailable, or no garment arrives whole, the loader stops and shows a retry link.

More projects

SodaView project

Soda

Soda is a 3D product landing page where the can follows the visitor through four sections, turns once between each, and settles with its label facing out.

html5
VHS ShelfView project

VHS Shelf

VHS Shelf is a concept filmography of twelve invented films, which I designed and built as a single page. The film at the center of an endless 3D shelf of worn VHS tapes turns out of the row to show its cover, and a click opens it into a full-screen sheet of paper.

html5

Get in touch

Email me

Working end to end across design, creative, and engineering, where creativity, collaboration, and ownership build toward the company's goals.

jeffkliu@gmail.com