Optimized for: Gemini / ChatGPT / Claude
Technical AI Prompt for Scroll-Driven Gradient Text Tracking
Use this engineered prompt to drastically optimize your workflow and output.
Required Variables
- ✦
[GRADIENT_COLORS] - ✦
[TEXT_STRING] - ✦
[TRACKING_SPEED] - ✦
[HOVER_INTERACTION]
scroll-driven-gradient-text-tracking.txt
Design a React component that features [TEXT_STRING] with a background-clip: text gradient. Use Framer Motion to move the gradient position (background-position) based on the user's scroll progress. The [GRADIENT_COLORS] should flow across the text at a [TRACKING_SPEED] relative to scroll. Add an optional [HOVER_INTERACTION] where the gradient reacts to the mouse position simultaneously. Use useScroll and useSpring for the scroll-linkage. The component should be highly performant, using CSS variables updated by motion values to minimize repaints.
Example Output
"The AI will generate a component where the text's color gradient shifts and shimmers as the user moves down the page, creating a dynamic metallic or neon effect."