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