Optimized for: Gemini / ChatGPT / Claude
Technical AI Prompt for Scroll-Progress Circular Indicators
Use this engineered prompt to drastically optimize your workflow and output.
Required Variables
- ✦
[STROKE_WIDTH] - ✦
[INDICATOR_COLOR] - ✦
[SIZE_PX] - ✦
[POSITION_ANCHOR]
scroll-progress-circular-indicator-react.txt
Design a reusable React component that displays a circular scroll progress indicator using Framer Motion. The component should be positioned at [POSITION_ANCHOR]. Use a motion.svg and a motion.circle element. Map the scrollYProgress to the 'pathLength' attribute of the circle. Set the [SIZE_PX], [STROKE_WIDTH], and [INDICATOR_COLOR] as configurable props. Include a text label in the center of the circle that displays the scroll percentage (0-100%). Use useTransform to round the progress value for the text display. Ensure the SVG is optimized and uses 'vector-effect: non-scaling-stroke' if necessary.
Example Output
"The AI will create a fixed UI element that fills a circular border as the user scrolls, providing visual feedback on how much of the page remains."