Preview link: https://important-video-031584.framer.app/

Cinematic Scroll-Scrubbing for Framer: Apple-Style Video in Seconds

Ditch the heavy GIFs and complex animations. Transform static pages into interactive experiences by locking video playback directly to your user's scrollbar.

Give your visitors the wheel. Let them scrub, reverse, and control the pacing of your visual story without writing a single line of code.

Use Cases

Hardware product teardowns and 3D rotations.

Interactive software UI walkthroughs.

Step-by-step feature reveals.

Dynamic, scroll-triggered background headers.

Cinematic storytelling and documentary-style articles.

Use Cases

The Apple-Style Hardware Page If you are launching a physical product, standard images don't do it justice. Render a high-quality 3D video of your product rotating or exploding into its core components. As the visitor scrolls down the page, the product visually unpacks itself perfectly in sync with the text descriptions fading in next to it.

The Interactive Software Tutorial Instead of forcing users to click play on a YouTube embed, record a flawless walkthrough of your app's user interface. Use the component's scroll-scrub feature so that as the user reads your feature list, the app interface literally clicks and types along with their scroll pace, showing them exactly how it works.

The Editorial Documentary Experience For long-form journalism, agency portfolios, or storytelling, use the component to hold a static hero frame. The moment the user begins to read, the background video subtly scrubs forward, matching the emotional tone and pacing of the article. If they scroll back up to re-read a paragraph, the video perfectly rewinds with them.

Ideas for How to Use It The Sticky Split-Screen: Set your video width to 50% and stick it to the right side of the screen. On the left side, create a tall track of text blocks. As the user scrolls through the text, the video on the right scrubs through a visual demonstration of what they are reading.

The Living Hero Section: Drop the component at the very top of your site. Set the Width to "Fill" and the Height to "Viewport", and switch the behavior to "Auto Play". You instantly have a cinematic hero background that automatically pauses itself when the user scrolls past it, saving browser performance.

The Suspended Reveal: Upload a video that starts in total darkness and slowly reveals a logo or product. Set the "Idle Image" to the Start Frame. The site looks completely empty until the user scrolls, at which point the video scrubs forward and the subject emerges from the shadows.

Requirements to Use This Component To ensure this component works flawlessly on any Framer website, you need to meet a few simple requirements:

A Framer Project: This is a native React code component built specifically for Framer's environment and uses the framer-motion library.

Keyframe-Optimized Video: This is the most important requirement. Standard MP4 videos only save full image frames every 2 to 3 seconds, which will cause the scroll-scrubbing to lag or freeze. You must re-encode your video using a free tool like HandBrake, setting the "Keyframe Interval" (or Keyint) to 1. This ensures every single frame is a complete image, allowing for buttery smooth forward and backward scrubbing.

Proper Formatting: The video should be an .mp4, .webm, or .mov file.

Direct Hosting: For the best performance and to avoid browser cross-origin (CORS) security blocks, the video file should be uploaded directly into the Framer property panel via the drag-and-drop file uploader, rather than linking to a random external URL.