Apple Motion
A cinematic showcase for five Apple products, replayed in image sequences as you scroll
Context
Design a product showcase where scroll literally becomes the hand turning the object between the visitor's fingers, without the drawbacks of a real-time 3D engine: lost WebGL contexts, graphics-driver bugs, quality capped by whatever a low-end device can hold at 60 frames per second.
Solution
Each product plays back as a reel of 180 pre-rendered photographs on a 2D canvas, rather than a 3D model loaded live in the browser. GSAP ScrollTrigger drives playback by writing the scroll position into a plain ref, never into React state, to hold 120 frames per second with no re-renders. An internal pipeline (a /render route never exposed to visitors) automates capturing every frame via Playwright from a compressed glTF model, with a crop computed from the union of every frame's transparent bounds so the product never "breathes" between frames.
Technical architecture
- Render PipelineInternal Next.js /render route driven by a real browser via Playwright: 180 captures per product from a compressed glTF model, automatic cropping and WebP encoding
- Player & MemoryGSAP ScrollTrigger writes scroll position into a ref to avoid ever re-rendering React; frames stored as ImageBitmap, with only the active section and its neighbors kept decoded, progressive wave-based loading
- Quality & AccessibilityBilingual EN/FR site sized against the longer French copy, axe-core scans at eight scroll depths, dedicated Safari testing, network weight budget checked in CI on every build
Previews
Measured performance
- Performance96
- Accessibility100
- Best practices100
- SEO100
Every project follows eco-design standards: advanced caching, lazy-loading, next-gen image formats, and low-carbon-footprint hosting.