Introduction
The NumberCounter component brings dynamic counting animations to your projects with extensive customization options. Perfect for timelines, statistics, loading screens, or any interface needing numeric progression, this Framer resource supports both standard numbers and Roman numerals with precise control over appearance and behavior.
Component Features
Replay
Choose whether the counter should replay after reaching its end value and comes into view again if scrolled past.
Loop
Set the counter to continuously cycle through its number range.
Format
Select between numeric or roman values.
Uppercase
Only for roman format, choose between lowercase or uppercase.
Font
Select your preferred font family for the counter numbers.
Font Color
Customize the color of your counter numbers.
Start Number
Define where the counting sequence begins (default: 0).
End Number
Set the final number in the sequence (default: 42).
Prefix
Add text that appears before your numbers.
Prefix Font
Choose a font specifically for your prefix text.
Prefix Color
Set the color for your prefix independently.
Prefix Position
Control the vertical alignment of prefix text relative to numbers. Choose between Top, Middle, Bottom, or Baseline.
Suffix
Add text that appears after your numbers.
Suffix Font
Choose a font specifically for your suffix text.
Suffix Color
Set the color for your suffix independently.
Suffix Position
Control the vertical alignment of suffix text relative to numbers. Choose between Top, Middle, Bottom, or Baseline.
Gap
Adjust the spacing between elements in your counter.
Speed
Control how quickly the animation progresses through numbers.
