Components•Video scroll hero
Components•Video scroll hero
Video scroll hero
A scroll-reactive video hero that scales a media surface from a small cinematic frame into a full hero moment. The component listens to scroll progress and applies GPU-friendly transforms.
Dependencies
Copy below cli
npx shadcn add @bjork-ui/video-scroll-heroHow to use
import { VideoScrollHero } from "@/components/isaiahbjork/heroes/video-scroll-hero";export function Demo() { return <VideoScrollHero startScale={0.25} />;}
Scroll to Scale
Watch as the video expands with your scroll