A buttery-smooth, scroll-driven animation that renders 65 sequential frames of AirPods Pro on an HTML canvas as you scroll, inspired by apple.com.
| Layer | Technology |
|---|---|
| Framework | Astro (SSG) |
| Animation | GSAP + ScrollTrigger |
| Styling | Tailwind CSS v4 |
| Rendering | HTML Canvas API |
| Hosting | Vercel |
- 65 PNG frames are preloaded from Apple's CDN.
- GSAP ScrollTrigger maps scroll progress (0 - 100 %) to a frame index.
- On every scroll tick the matching frame is drawn to an HTML
<canvas>, creating the illusion of a 3D product rotation synced to the user's scroll.
# Clone
git clone https://github.com/davillafer/airpods.git
cd airpods
# Install dependencies
pnpm install
# Start dev server (localhost:4321)
pnpm dev
# Production build
pnpm build