Back to prompts
✦ClaudeDesign
Scroll-scrubbed video hero (Framer Motion)
A fixed background video scrubbed by scroll position with lerp smoothing in Framer Motion.
Loading the original X post…
Open original on XA fixed background video scrubbed by scroll position with lerp smoothing in Framer Motion.
The prompt
✦Claude (AI builder)
| 1 | 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])). |
What this prompt is good for
Visual direction
Moodboards, style guides, and design briefs
Marketing creative
Hero artwork and high-converting visual assets
Brand identity
Consistent aesthetics across typography and form
Rapid prototyping
Iterate variations in seconds with precision
