statsIntermediatescroll

Count-Up Stats

Three large stats that animate from zero to their value when scrolled into view.

Live preview

Claude prompt

Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.

Build a count-up stats row: three large numeric stats with small uppercase labels. When the row enters the viewport (IntersectionObserver, threshold 0.4), each number animates from 0 to its target value over ~1.4s with an ease-out cubic. Read targets from data-to attributes, support optional data-prefix (e.g. $) and data-suffix (e.g. %, M). Use tabular-nums so digits don't shift width.

Code

html

<div class="spacer">Scroll down ↓</div>
<section class="stats">
  <div class="stat"><span class="num" data-to="12834">0</span><label>Users</label></div>
  <div class="stat"><span class="num" data-to="99.9" data-suffix="%">0</span><label>Uptime</label></div>
  <div class="stat"><span class="num" data-to="480" data-prefix="$" data-suffix="M">0</span><label>ARR</label></div>
</section>