Blenra LogoBlenra
Optimized for: Gemini / ChatGPT / Claude
#React

Technical Prompt for Scroll-Driven Image Filter & Blur Transitions

Customize the variables below to instantly engineer your prompt.

Required Variables

scroll-driven-image-filter-blur-framer-motion.txt
Act as a Visual Effects Frontend Developer. Create a React component utilizing Framer Motion that programmatically manipulates heavy CSS image filters based on scroll depth. As the user scrolls deep into the section housing [IMAGE_URL], the image must fluidly transition from a gaussian blur of [MAX_BLUR] down to `0px`. Concurrently, if [GRAYSCALE_TOGGLE] evaluates to true, transition the image from 100% grayscale to full, vibrant color. Bind the [SATURATION_RANGE] directly to the scroll progress tracker. Utilize `useTransform` to construct a dynamic, combined CSS filter string: ``blur(${x}px) grayscale(${y}%) saturate(${z}%)``. Apply this dynamic string to a `motion.img` element. The image must be anchored via `position: sticky` while the filter transition executes across the scroll track to maximize the cinematic visual impact.

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

More Web Components Prompts

View all →

Frequently Asked Questions

What is the "Technical Prompt for Scroll-Driven Image Filter & Blur Transitions" prompt used for?

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.

Which AI tools work with this prompt?

This prompt is optimized for Gemini / ChatGPT / Claude, but works great with ChatGPT, Claude, Gemini, and other large language models. Simply copy it and paste it into your preferred AI tool.

How do I customize this prompt?

Use the variable fields above to fill in your specific details. The prompt will auto-update as you type, ready to copy instantly.

Is this prompt free?

Yes! All prompts on Blenra are free to copy and use immediately. No account required.