Counting Number Element
The Counting Number element creates an animated counter that increments numbers from a starting point, perfect for showcasing statistics and growth.
Live Preview
Counting Number Preview
Specifications
The Counting Number element provides a dynamic way to show numeric metrics:
- Target Value: Set the final Number that the counter will reach upon completing its animation.
- Start Point: Optionally define a From Number to control where the counting begins.
- Prefix & Suffix: Add Text Before (e.g., "$", "+") or Text After (e.g., "%", "k") to provide context.
- Counter Styling: Control the font size, weight, and color through custom classes, making stats pop.
- Trigger: The count begins automatically once the element enters the viewport.
AI Guidance
How to prompt for Counting Numbers:
- Add a counter that reaches '1k+' for the users metric.
- Create a thick blue number counter that counts from 0 to 100 with a percent sign.
- Insert a statistics section using the secondary font and a large counting number.