Blenra
Optimized for: Gemini / ChatGPT / Claude

Technical Prompt for Scroll-Driven Image Filter & Blur Transitions

Use this engineered prompt to drastically optimize your workflow and output.

Required Variables

  • [MAX_BLUR]
  • [GRAYSCALE_TOGGLE]
  • [SATURATION_RANGE]
  • [IMAGE_URL]
scroll-driven-image-filter-blur-framer-motion.txt
Create a React component using Framer Motion that manipulates image filters based on scroll depth. As the user scrolls into the section containing [IMAGE_URL], the image should transition from a blur of [MAX_BLUR] to 0. Simultaneously, if [GRAYSCALE_TOGGLE] is true, transition from 100% grayscale to full color. Link the [SATURATION_RANGE] to the scroll progress as well. Use useTransform to create a combined filter string: 'blur(x px) grayscale(y%) saturate(z%)'. Apply this to a motion.img element. Ensure the image is 'sticky' or 'fixed' while the filter transition occurs to maximize the visual impact.

Example Output

"The AI will generate a component that reveals a clear, vibrant image from a blurry, black-and-white state as the user scrolls specifically through the image's container."