scroll scrub video

Name: scroll scrub video
Price: 7 USD
Availability: InStock
Author: Agensi

by Mate I

Turn videos into high-performance, frame-perfect scroll-scrub animations for Next.js using GSAP and Canvas.

30-day refund guarantee

Secure checkout via Stripe

0 installsSecurity scanned

See it in action

You say

I have hero.mp4 in my project. I want to create an Apple-style hero section where this video scrubs as I scroll down the page.

Your agent does

I've scaffolded the ScrollScrub toolkit and the extraction script. Run `node scripts/extract-scroll-frames.mjs --input hero.mp4 --slug hero-main` then use the `` component in your page.

What you get

Create a pinned hero section that plays video based on scroll positionGenerate mobile-optimized image sequences from raw video files automáticamenteSync Lenis smooth scroll with GSAP ScrollTrigger for fluid canvas animationsImplement 'prefers-reduced-motion' fallbacks for complex scroll effects

About this skill

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.