Optimized for: Gemini / ChatGPT / Claude
Technical Prompt for Framer Motion Viewport-Triggered Counter Lab
Use this engineered prompt to drastically optimize your workflow and output.
Required Variables
- ✦
[TARGET_NUMBER] - ✦
[DURATION_SECONDS] - ✦
[EASING_TYPE] - ✦
[DECIMAL_PLACES]
framer-motion-viewport-triggered-counter.txt
Build a React component that animates a numerical counter from 0 to [TARGET_NUMBER] when it enters the viewport. Use Framer Motion's useInView hook to trigger the animation. Use the animate function from framer-motion to transition a motion value over [DURATION_SECONDS] with a [EASING_TYPE] curve. Use the useTransform hook to format the output to [DECIMAL_PLACES] and update the display. Ensure the animation only runs once or resets based on a 'triggerOnce' prop. Provide the component in TypeScript with proper typing for the props.
Example Output
"The AI will create a 'Stats' component that counts up to a specific number with smooth easing as soon as the user scrolls down to that section."