Blenra
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."