Case study
Frontend animation / Experiment
AeroKnit X1
A cinematic product story rendered from a 192-frame Canvas sequence, synchronized to scroll without React re-renders.
- Role
- Creator · Creative development
- Year
- 2026
- State
- Live experiment
System / routing
Scroll to examine
Project snapshot
The condition
Challenge
High-end product decomposition effects often depend on proprietary tooling or animation libraries. The challenge was to build a smooth, responsive sequence with a transparent asset pipeline and no framework work on every scroll frame.
The response
Architecture
A Next.js 14 experience preloads 192 JPEG frames extracted with FFmpeg, maps scroll progress to a frame index, and paints only changed frames through requestAnimationFrame. A device-pixel-ratio-aware Canvas keeps the sequence sharp across viewports.
What shaped it
Key decisions
Render outside React
Refs hold progress and requestAnimationFrame schedules Canvas paints only when the target frame changes, avoiding state updates during scroll.
Precomputed visual sequence
FFmpeg exports numbered 1920×1080 JPEG frames and a manifest so runtime playback remains deterministic.
Responsive, accessible playback
Device-pixel-ratio scaling, object-cover centering, progressive preload, and a reduced-motion first-frame state protect visual quality and usability.
How it feels
Experience
As visitors scroll, the AeroKnit X1 separates into six named product layers at deliberate breakpoints. Responsive object-cover framing preserves the composition, while the sequence can fall back to a static first frame for reduced motion.
What resolved
Outcome
A live, library-free scroll experiment with a repeatable FFmpeg extraction pipeline, deterministic frame control, and an alternative video-scrubbing implementation.
- 192-frame sequence
- Live experiment
System composition
Technology, deliberately chosen.
- Next.js 14
- React 18
- TypeScript 5
- Canvas 2D
- FFmpeg
- RAF