AF1 Motion Lab

• 

  home

• 

  story

• 

  finale

Inspiration

What it does## AF1 Motion Lab

AF1 Motion Lab is a scroll-driven 3D product experience built around the Nike Air Force 1. I wanted to take a familiar sneaker and present it more like an object inside a digital design lab than a normal online store product.

The main idea was simple: as the visitor scrolls, the shoe should travel through the story instead of appearing as the same static image on every page. The text and model alternate from left to right, and each section changes the camera angle so the visitor sees the shoe from a different point of view.

Inspiration

I was inspired by sneaker campaigns, technical product films, and aerospace-style interfaces. I liked the contrast between a clean white shoe and a dark, minimal environment with warm light.

How I built it

The website is built with React, TypeScript, and Vite. The shoe is a native GLB model rendered with Three.js and GLTFLoader, so there is no external 3D viewer frame around it.

I used GSAP and ScrollTrigger for the text transitions and scroll experience. The 3D shoe changes position and camera angle as the visitor moves through the pages. I also added a loading screen so the experience does not appear before the model is ready.

The final section uses a small exploded technical view with callouts for the air cushioning, premium upper, and street outsole.

Challenges

The biggest challenge was making the 3D model feel connected to scrolling without making it move all the time. Early versions had the shoe rotating while the page was still, which distracted from the story. I changed it so the shoe only changes position and view when the visitor scrolls.

Another challenge was the lighting. Because the shoe is white, it could easily look too bright and lose its details. I adjusted the Three.js exposure, directional lights, roughness, and reflections until the stitching and shape were easier to see.

I also learned that small details matter a lot in an immersive site. Removing unnecessary labels, making buttons work, and keeping the layout balanced made the final result much stronger.

Built With

• 3d
• css
• gltfloader
• graphic
• gsap
• react
• scrolltrigger
• three.js
• typescript
• vite
• webgl