FrameScrub ties video playback to scroll position for Framer, mapping viewport entry to frame zero and exit to the final frame.
Scroll down and the video plays forward in sync with scroll, scroll up reverses it, frame by frame. Under the hood, FrameScrub syncs seeks to actually painted frames via requestVideoFrameCallback, not just animation timing, so it never visibly stutters or jumps ahead.
WHAT IT DOES Upload a video file or link one by URL. As the visitor scrolls, playback position maps directly to scroll progress, with configurable start and end trigger offsets. During active scrolling the video seeks immediately to track movement; once scrolling settles, smoothness eases any remaining gap.
KEY FEATURES
Frame-accurate seeking via requestVideoFrameCallback, not just RAF timing
Velocity-aware playback, immediate tracking while scrolling, smooth idle settle
Token-based seek queue prevents race conditions during fast scrolling
Configurable scroll range, start and end offset percentages
Linear or ease-in-out easing for scroll-to-time mapping
Adjustable smoothness for how playback settles after scrolling stops
Cover or contain fit, adjustable border radius
Poster image for the pre-load state
Muted playback control, SSR-safe, full listener cleanup on unmount
Zero third-party dependencies, self-contained code component
WHY IT WORKS Most scroll-video components approximate playback with basic RAF loops, which can lag or jitter during fast scrolling. FrameScrub tracks actual painted frames and adapts to scroll velocity, so it holds up under real, imperfect scrolling.
PERFECT FOR Product reveal pages, cinematic hero sections, storytelling landing pages, and any Framer site that wants scroll-driven video without visible lag.
WHAT'S INCLUDED A single drop-in component. Upload your video, set scroll range and easing, and tune smoothness, fit, and radius through property controls.
Drop it in, upload your video, and let scroll direct the playback.
FrameScrub ties video playback to scroll position for Framer, mapping viewport entry to frame zero and exit to the final frame.
Scroll down and the video plays forward in sync with scroll, scroll up reverses it, frame by frame. Under the hood, FrameScrub syncs seeks to actually painted frames via requestVideoFrameCallback, not just animation timing, so it never visibly stutters or jumps ahead.
WHAT IT DOES Upload a video file or link one by URL. As the visitor scrolls, playback position maps directly to scroll progress, with configurable start and end trigger offsets. During active scrolling the video seeks immediately to track movement; once scrolling settles, smoothness eases any remaining gap.
KEY FEATURES
Frame-accurate seeking via requestVideoFrameCallback, not just RAF timing
Velocity-aware playback, immediate tracking while scrolling, smooth idle settle
Token-based seek queue prevents race conditions during fast scrolling
Configurable scroll range, start and end offset percentages
Linear or ease-in-out easing for scroll-to-time mapping
Adjustable smoothness for how playback settles after scrolling stops
Cover or contain fit, adjustable border radius
Poster image for the pre-load state
Muted playback control, SSR-safe, full listener cleanup on unmount
Zero third-party dependencies, self-contained code component
WHY IT WORKS Most scroll-video components approximate playback with basic RAF loops, which can lag or jitter during fast scrolling. FrameScrub tracks actual painted frames and adapts to scroll velocity, so it holds up under real, imperfect scrolling.
PERFECT FOR Product reveal pages, cinematic hero sections, storytelling landing pages, and any Framer site that wants scroll-driven video without visible lag.
WHAT'S INCLUDED A single drop-in component. Upload your video, set scroll range and easing, and tune smoothness, fit, and radius through property controls.
Drop it in, upload your video, and let scroll direct the playback.
