Optimized for: Gemini / ChatGPT / Claude
Advanced AI Prompt for Sticky Video Scrubbing on Scroll
Use this engineered prompt to drastically optimize your workflow and output.
Required Variables
- ✦
[VIDEO_URL] - ✦
[SCRUB_SMOOTHNESS] - ✦
[FRAME_RATE_TARGET] - ✦
[FALLBACK_IMAGE]
sticky-video-scrubbing-scroll-framer-motion.txt
Engineer a React component that scrubs through a video file based on scroll position using Framer Motion and the HTML5 Video API. The video at [VIDEO_URL] should be sticky. Map scrollYProgress to the 'currentTime' property of the video. Implement a 'smoothing' layer using useSpring with [SCRUB_SMOOTHNESS] to prevent frame jumping. Include logic to preload the video and show [FALLBACK_IMAGE] during loading. Optimize for [FRAME_RATE_TARGET] by throttling the update frequency. Document the necessary video encoding settings (e.g., frequent keyframes) required for this effect to work smoothly in browsers.
Example Output
"The AI will generate a component where the user 'plays' a video forward or backward by scrolling, creating a highly interactive cinematic experience."