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.
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.
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.
Elevate your storytelling. Lock your videos to the scrollbar and let your users drive the experience.
Get it $15