scroll scrub video

The problem

Native video seeking for scroll-based animations is throttled by browsers, especially on Safari and iOS. Trying to sync a standard <video> element to scroll position results in stuttering, jank, and a broken user experience.

What it does

• Extracts high-quality frame sequences from source videos using ffmpeg.
• Sets up a canvas-based rendering engine that maps scroll progress to specific image frames.
• Configures GSAP ScrollTrigger and Lenis smooth scrolling for fluid, judder-free motion.
• Automates mobile-specific optimization by generating lighter frame tiers for touch devices.
• Provides a reusable React component with pinning and scroll-reveal modes.

Frameworks & tools

Next.js App Router, TypeScript, Tailwind CSS v4, GSAP, Lenis, and ffmpeg.

Why this beats prompting it yourself

Manually orchestrating frame extraction, manifest generation, and canvas-to-scroll synchronization is error-prone and time-consuming. This skill handles the complex math and performance guardrails, like IntersectionObserver-gated preloading and reduced-motion support, out of the box.

Use cases

• Building Apple-style cinematic product hero sections that unfold as the user scrolls.
• Creating scroll-driven data visualizations or dashboard walkthroughs.
• Implementing high-performance video reveals that work perfectly on mobile devices.

Known limitations

Requires ffmpeg and ffprobe to be installed on your system PATH. Best suited for short, high-impact video clips rather than long-form content.