ScrambleCounter
Bring your stats to life with a number counter that scrambles through random digits before resolving to the real value — triggered automatically when the component scrolls into view.
How it works
When the element enters the viewport, the counter starts from zero and counts up to your target value. Throughout the animation, digits briefly flash as random characters before snapping into place — like a cipher decoding in real time. The scramble effect fades naturally as the number approaches its final value, so the ending always lands clean.
Features
Scroll-triggered — fires when the component enters the viewport
Prefix and suffix support — add $, %, +, x, or anything else
Fully customizable font via Framer's native font picker
Separate color controls for the number and prefix/suffix
Adjustable animation duration and delay per instance
Decimal support for values like 4.2, 98.6, 3.4x
Animate once or repeat every time the element re-enters view
Aathif Thajudeen
