Scroll-Scrub Live Architecture Demo
Pinned viewport mapping user scroll position directly to animation state.
Other Case Demos
Explore luxury horology and dynamic radial mask transition implementations.
Daniel Klein — Exclusive
Multi-stage watch reveal with sticky pinning, gold shader accents, and synchronized feature breakdown.
Vocco Naturals
GSAP radial-mask magic transitions morphing between raw plantation, briquette formation, and retail packaging.
Client Requirements & Technical Considerations
3D product frame sequence specifications (Blender / Cinema 4D) and site loading / performance considerations.
1. Product Frame Sequence Requirements (Blender / Cinema 4D)
To implement 3D product scroll-scrub animations, the 3D team / client needs to render and export an image frame sequence according to the following specifications:
| Specification | Requirement | Notes / Recommendations |
|---|---|---|
| Export Format | .webp or .png sequence |
Lossless/High-quality WebP is strongly preferred (70% smaller file size than PNG). |
| Frame Count | 60 – 120 frames total | 60 frames is usually sufficient for a 360° rotation or disassembly; 120 frames gives ultra-smooth scrubbing. |
| Naming Convention | frame_0001.webp to frame_0120.webp |
Zero-padded 4-digit numeric sequencing simplifies automated programmatic preloading. |
| Background | Transparent (Alpha) OR exact Hex background | If background is transparent, ensure crisp edge anti-aliasing without white halo fringe. |
| Resolution | 1920×1080 (Desktop), 1080×1080 (Square/Mobile) | Crop tightly around the product bounding box to avoid wasted transparent pixels. |
| Camera & Lighting | Locked camera / smooth continuous interpolation | Ensure lighting is baked consistently across all rendered frames with no sudden flicker. |
2. Important Note on Site Loading & Performance
⚠️ Network & Loading Bottleneck Warning
Because scroll-driven frame scrubbing requires pre-rendering multiple image frames (e.g., 60–120 frames), total asset payload can quickly reach 15MB – 40MB+ if not optimized. This will cause noticeable page load delays, high data consumption on mobile, or stuttering during initial scroll if frames are still downloading over slow connections.
💡 Recommended Performance & Optimization Strategy
1. WebP Compression: Keep each frame under 30KB–60KB through WebP compression.
2. Progressive Loading: Load critical keyframes first (every 5th frame), render immediately, and fetch intermediate frames in the background via requestIdleCallback.
3. Canvas Offscreen Buffering: Pre-cache loaded ImageBitmap objects to memory so canvas draws run at consistent 60fps without GC stutter.
4. Mobile Fallback: On mobile devices, serve lower resolution (720p) or a reduced 40-frame sequence to save bandwidth.