Scroll Video

NewPremium

Video that advances frame-by-frame as the user scrolls. Apple-style product reveal effect with sticky positioning.

scrollvideostickyapple-style

Installation

Terminalbash
npx motioncraft add scroll-video

Usage

scroll-video.tsxtsx
import { ScrollVideo } from "@/components/scroll/scroll-video";

<ScrollVideo src="/product-reveal.mp4" sticky />

Props

PropTypeDefaultDescription
src*stringVideo source URL
startFramenumber0Start time in seconds
endFramenumberEnd time in seconds
stickybooleantrueEnable sticky positioning
classNamestringAdditional CSS classes

Related Components