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

Technical Prompt for Framer Motion Viewport-Triggered Counter Lab

Customize the variables below to instantly engineer your prompt.

Required Variables

framer-motion-viewport-triggered-counter.txt
Act as a Frontend Micro-interaction Specialist. Build a performant React component that animates a numerical counter rapidly ascending from 0 to [TARGET_NUMBER] exactly when it crosses the viewport threshold. Utilize Framer Motion's `useInView` hook (attached to a `useRef`) to trigger the animation boolean. Employ the imperative `animate` function from `framer-motion` to transition a raw `MotionValue` from 0 to the target over [DURATION_SECONDS], applying a specific [EASING_TYPE] bezier curve for a natural deceleration. Chain a `useTransform` hook to continuously format the raw float output to precisely [DECIMAL_PLACES] and inject it into the DOM. Ensure the animation logic is wrapped to either run exclusively once, or reset upon leaving the viewport, based on a `triggerOnce` boolean prop. Deliver the component in strict TypeScript with comprehensive interface definitions for all props.

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

More Web Components Prompts

View all →

Frequently Asked Questions

What is the "Technical Prompt for Framer Motion Viewport-Triggered Counter Lab" prompt used for?

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.

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.