Scroll Video
NewPremiumVideo that advances frame-by-frame as the user scrolls. Apple-style product reveal effect with sticky positioning.
scrollvideostickyapple-style
Installation
Terminalbash
npx motion-primitives-website add scroll-videoUsage
scroll-video.tsxtsx
import { ScrollVideo } from "@/components/scroll/scroll-video";
<ScrollVideo src="/product-reveal.mp4" sticky />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| src* | string | — | Video source URL |
| startFrame | number | 0 | Start time in seconds |
| endFrame | number | — | End time in seconds |
| sticky | boolean | true | Enable sticky positioning |
| className | string | — | Additional CSS classes |
Related Components
Parallax Scroll
Parallax scrolling effect with configurable speed and direction.
Infinite Scroll
Continuous horizontal or vertical scrolling content with seamless looping.
Stack Cards
NewCards that stack on scroll with sticky positioning and cascade effect. Each card slides into view and compresses previous ones.
Morphing Nav
NewNavigation that morphs between three modes: full bar, floating pill, and fullscreen overlay. Scroll-aware with direction-aware motion.