ScrambleCounter

A scramble animated number counter

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

A scramble animated number counter