Digit Count

Rasuke has no Odometer / jQuery counter. Number ticks are a GSAP module, src/effects/digit-count.js, used by the stats sections — for example Number1 on About and Fact1 on Home 3, fed by number1.json / fact1.json.

How it works

• The module finds every .digit-count element and splits the target number into individual digit columns.
• Each digit rolls from digit − offset up to the final digit (default offset 2 — e.g. 84 → 8 rolls 6→8, 4 rolls 2→4). Override per element with data-digit-offset.
• Columns alternate direction: the 1st rolls bottom→top, the 2nd top→bottom, and so on.
• The roll starts when the element enters the viewport (IntersectionObserver with a −10% bottom margin), with duration and stagger read from the CSS tokens --motion-duration-digit-count (1800ms) and --motion-duration-digit-count-stagger (120ms) so SCSS and JS can never drift apart.
• If prefers-reduced-motion: reduce is on, the final number is written immediately with no animation.
• destroyDigitCount() disconnects the observer, kills the tweens, and restores the original number text so React can unmount safely.

Markup

<span class="digit-count" data-count="84">84</span>

<!-- optional custom roll distance -->
<span class="digit-count" data-count="128" data-digit-offset="3">128</span>

Put the final value in data-count (sections usually render it from their JSON data). That value is both the no-JS fallback and the number the module animates to.

Styling

Digit windows, ribbons, spacers, and the static / done state come from the section SCSS that owns the counter. Do not style counters with leftover utility classes — use the section's BEM class and tokens.

Do not

• Do not add Odometer or jQuery just to drive counters.
• Do not animate the number with a plain text tween — the masked ribbon keeps the digit height stable.