statsIntermediateanimation
Number Marquee
Infinite-scrolling row of giant stat numbers with labels — Stripe-style.
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 Stripe-style infinite-scrolling stat marquee: a single horizontal row of giant Bebas Neue numbers (e.g. $2.4B, 99.99%, 120+, 42ms, 8.4M) each followed by a tiny uppercase JetBrains Mono label. Numbers use a vertical white→gray gradient via background-clip:text. The track is 2× the items duplicated, animated translateX from 0 to -50% over 30s linearly, infinite. Each item has a 1px left border separator. Wrap the marquee in a horizontal mask-image gradient so items fade in/out at the edges. Pause on hover.
Code
html
<!--
Source: Vibedex
https://vibedex.io
License: MIT
Surfaced via https://vibedex.io/components/vbx-stripe-marquee
-->
<section class="marquee"><div class="track"><div class="item"><span class="num">$2.4B</span><span class="lbl">Processed monthly</span></div><div class="item"><span class="num">99.99%</span><span class="lbl">Uptime SLA</span></div><div class="item"><span class="num">120+</span><span class="lbl">Countries</span></div><div class="item"><span class="num">42ms</span><span class="lbl">P50 latency</span></div><div class="item"><span class="num">8.4M</span><span class="lbl">Daily active users</span></div><div class="item"><span class="num">$2.4B</span><span class="lbl">Processed monthly</span></div><div class="item"><span class="num">99.99%</span><span class="lbl">Uptime SLA</span></div><div class="item"><span class="num">120+</span><span class="lbl">Countries</span></div><div class="item"><span class="num">42ms</span><span class="lbl">P50 latency</span></div><div class="item"><span class="num">8.4M</span><span class="lbl">Daily active users</span></div></div></section>