@viktoroddy
Hero section
✦ClaudeHero section
Scroll-scrubbed video hero (Framer Motion)
A fixed background video scrubbed by scroll position with lerp smoothing in Framer Motion.
Build a full-screen hero section with a fixed background video (position: fixed, object-cover, muted, playsInline, preload="auto"). Tie video playback to scroll using Framer Motion's useScroll hook - map scroll progress (0-1) to video.currentTime via targetTimeRef, then smoothly interpolate with requestAnimationFrame loop using lerp (currentTimeRef += diff * lerpFactor). Add a dark overlay (bg-background/50) on the video. Create multiple text sections that fade in/out based on scroll position using useTransform for opacity, Y translation, and blur. Make the hero container h-[300vh] with a sticky top-0 h-screen inner wrapper so content scrolls over the fixed video. Include a scroll indicator at the bottom that fades out on scroll (useTransform(scrollYProgress, [0, 0.05], [1, 0])).