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