Scroll Video Scrub

The ultimate Apple-style product reveal technique. This component pins a video to your screen and mathematically maps its currentTime to your scroll progress. Scroll down to play forward, scroll up to rewind in real-time.

Tip: For production use, ensure your video is exported with keyframes on every single frame (e.g., using Handbrake or FFmpeg with keyint=1) to guarantee buttery smooth scrubbing, especially when scrolling backward!

Live Preview

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { ScrollVideoScrub } from "@/components/creative/scroll-video-scrub";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { ScrollVideoScrub } from "@/components/creative/scroll-video-scrub";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <ScrollVideoScrub
        videoUrl="example"
        fallbackImage="example"
        textNodes{/* value */}
      />
    </div>
  );
}