PIXLIFY / COMPONENTS LAB
FREE COMPONENT · BY PIXLIFY
STATS · ROLLING DIGITS · ZERO DEPENDENCIES
Your numbers deserve better than a fade-in. Every digit rolls into place like a mechanical counter the moment the section scrolls into view - crisp, tabular and fully accessible.
LIVE PREVIEW - REPLAY ON (PLAY ONCE OFF): ROLLS EVERY TIME IT SCROLLS INTO VIEW
SCREEN READERS HEAR THE FULL VALUE + LABEL
VARIANTS & PRESETS
01 - CENTERED
Two big numbers
Two columns, centred, 88px digits - a confident proof bar.
02 - LIGHT THEME
Ink & orange
Dark numbers with orange prefix/suffix on a light section.
03 - SAAS METRICS
Decimals & separators
99.99% uptime with two decimals, 12,400 customers with a thousands separator, € ARR.
04 - REEL STYLE
Digits on a drum
Reel Style → Visible keeps the digits above and below in view, faded by a gradient. One hero stat, three extra spins, labels hidden.
HOW TO USE
01
Drop it on the canvas
Insert Odometer Stats from Assets and set width to Fill. Height is automatic.
02
Add your stats
Each item in Stats has Value, Decimals, Prefix ($, €, +), Suffix (%, k, +, /5) and a Label.
03
Style the numbers
Number Font and Label Font give full typography control. Colors sets number, prefix/suffix accent, label and divider colours.
04
Lay it out
Layout sets columns, gap, alignment, dividers, thousands separator and the space above labels.
05
Tune the roll
Animation picks the trigger (In View / On Load), duration, stagger between stats, extra spins and whether it plays once.
06
CMS & mobile
Bind Value and Label to CMS number/text fields on template pages. Mobile → Columns reflows the grid below the breakpoint.
PROPERTY CONTROLS
Stats
Array: Value, Decimals, Prefix, Suffix, Label (up to 12).
Number Font / Label Font
Full font controls. Tabular numerals are enforced so digits never jitter.
Colors → Number / Prefix-Suffix / Label / Divider
Colour for each part.
Layout → Columns / Gap / Align
Grid columns (1-6), spacing and text alignment.
Layout → Dividers
Hairline dividers between stats in a row.
Layout → Thousands
1,000 · 1 000 · 1.000 · 1000.
Layout → Label Gap
Space between number and label.
Animation → Trigger
In View (scroll) or On Load.
Animation → Duration / Stagger
Roll length and delay between stats.
Animation → Extra Spins
Full 0-9 rotations before landing (0-4).
Animation → Play Once
Off replays every time the stats re-enter the viewport.
Mobile → Below / Columns
Breakpoint and column count on small screens.
PERFORMANCE
Pure CSS transforms, one IntersectionObserver per instance, no animation loop at all.
MOBILE
Grid reflows to Mobile → Columns. Dividers follow the new rows automatically.
ACCESSIBILITY
Each stat has a visually hidden full value + label; rolling digits are aria-hidden. Reduced motion shows final numbers instantly.
© 2026 PIXLIFY - MADE IN WARSAW
ODOMETER STATS · FREE COMPONENT · BY PIXLIFY