Apple-Style Canvas Image-Sequence Scrub Hero

What this builds

A full-viewport hero section where scrolling drives a frame-by-frame product reveal rendered into a <canvas>. The section is sticky-pinned for the duration of the scroll budget, text overlays fade in/out at specific scroll keyframes, and a loading skeleton holds space until the initial frames are decoded. This is the technique Apple uses on product pages to let users "scrub" through a 3D product rotation or transformation sequence.

• Sticky-pinned section with configurable scroll budget (300-500vh)
• Priority preloader: eager first batch, then stream remaining sorted by proximity to current scroll position
• createImageBitmap() for off-main-thread decode
• rAF-throttled canvas draw bound to scroll progress
• Text overlay system with keyframed opacity/transform tied to scroll sub-ranges
• Loading skeleton that fades out when the eager batch completes
• Video currentTime scrub fallback for smaller payloads
• Responsive frame sourcing (mobile/tablet/desktop resolution tiers)