Works with the AI tools you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIGitHub CopilotGitHub CopilotGemini CLIGemini CLI+20 more

    scroll scrub video

    2

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

    $7

    Secure checkout via Stripe

    30-day refund guarantee

    Converts to your local currency at checkout

    0 installsSecurity scanned
    scroll scrub video

    scroll scrub video

    Example session with this skill installed

    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.

    • Read your context and instructions
    • Compiled the scroll scrub video
    • Generated the UI component

    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 <ScrollScrubVideo slug="hero-main" mode="pin" isHero /> component in your page.

    scroll-scrub-video.tsx

    TSX · React component

    Generated

    Example file from a real run - the skill writes it into your workspace.

    Connects securely to your tools. The creator never sees your data.

    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.

    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.

    How to install

    Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.

    ~30 seconds
    1. 1

      Download the ZIP

      Free skills download straight away. Paid skills unlock right after purchase.

    2. 2

      Unzip into your skills folder

      Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.

    3. 3

      Ask your agent to use it

      Restart the agent if it was already running. It picks the skill up automatically - no config needed.

    Skills folder by agent

    Click the path to copy it. Create the folder if it does not exist yet.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill passes our trust checks below.

    Security scanned

    Passed our 8-point scan before listing

    Fresh listing

    Recently published to Agensi

    30-day refund

    Not a fit? Get your money back

    Trust & safety

    Security scanned

    Verified clean 2 months ago

    • Passed all security checks, Safe to install

    Listed2 months ago

    What's inside

    Frequently Asked Questions