Optimized for: Gemini / ChatGPT / Claude
Expert AI Prompt for Zoom-into-Section Scroll Interaction
Use this engineered prompt to drastically optimize your workflow and output.
Required Variables
- ✦
[INITIAL_SCALE] - ✦
[FINAL_SCALE] - ✦
[CONTAINER_HEIGHT] - ✦
[FOCUS_ELEMENT]
zoom-into-section-scroll-interaction-framer-motion.txt
Create an immersive 'zoom-in' scroll effect in React using Framer Motion. A background container should start at [INITIAL_SCALE] and scale up to [FINAL_SCALE] as the user scrolls through a [CONTAINER_HEIGHT] tall sticky section. The [FOCUS_ELEMENT] should remain centered and fade in content as the scale increases. Map scrollYProgress to scale and opacity. Implement a 'parallax' effect for secondary elements within the zoom container to provide depth. Use useSpring to smooth out the scroll input. This is intended for high-impact landing page sections where an image transforms into a full-page layout.
Example Output
"The AI will output a sticky container component where scrolling down causes an image or div to grow until it fills the screen, revealing hidden text or UI."