A number slot machine animates digits rolling like a slot machine — each digit column spins through 0-9 and settles on the target number. Used on count-up hero sections, lottery-style reveals, and any metric display that benefits from a reveal animation.

The digit column structure

Each digit position is a container showing one digit at a time (overflow: hidden). Inside is a column of divs for digits 0-9. The visible digit is controlled by translateY(-index * height) — translating the column up to reveal the digit at the target index.

The roll animation

When a new number is set, each digit column animates from its current position through several random intermediate values before settling on the target digit. The animation uses requestAnimationFrame with easing, and each column has a slightly different timing to create the authentic slot machine feel where digits settle at different moments.

Use cases

Live counters that update when new data arrives, lottery number reveals, and score displays all benefit from this animation pattern.

The column scroll mechanism

Each digit column contains all 10 digits (0-9) stacked vertically. To show digit 7, the column translates to translateY(-700%). The CSS transition: transform 0.3s cubic-bezier(0.4,0,0.2,1) animates the column scrolling to the target digit. overflow: hidden on the digit window clips the column to show only one digit at a time. For a multi-digit display, each column animates independently with a small staggered delay creating the cascading slot machine roll effect.

Triggering and reset

A spin() function picks random target digits and sets each column transform. A staggered animation-delay per column creates the sequential reveal. For a score or counter display, animate to the actual value instead of a random number — compute the target digit for each column position from the number string.

Sound integration

For a complete slot machine experience, add a Web Audio API click sound on each column stop. Create a brief 440Hz tone that fades in 0.02s and out in 0.03s using an OscillatorNode and GainNode. Trigger one sound per column as each settles, staggered by the same delay as the visual animation.

The column scroll mechanism

Triggering and reset

Sound integration

Build with AI

Build, Understand, Optimize, and Extend It With AI

You don't need to reverse-engineer the two-phase transform swap on your own. Paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to explain exactly why spinTo computes an extra multiple of 10 percent on top of the target digit before the transition, and why a second setTimeout then snaps the transform to negative target times 10 percent with transition set to none rather than leaving the eased transition to finish on its own. The same assistant can help optimize it — for example asking whether rebuilding buildSlots on every load is wasteful compared to keeping the ten-digit columns permanently in the DOM, or whether the per-digit staggered duration (0.5 plus i times 0.08 seconds) scales sensibly if you extend DIGITS well past five. It's also useful for extending the effect: ask it to only spin the digits that actually changed between calls, add a Web Audio click on each column's settle, or drive spinTo from a live counter instead of the demo buttons. Treat the code less like a finished artifact and more like a starting point for a conversation.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text

Build a "slot machine" style rolling digit display in plain HTML, CSS, and JavaScript using only CSS transforms and transitions for the motion — no requestAnimationFrame loop.

Requirements:
- A fixed number of digit slots, each an overflow-hidden container holding one inner column div that itself contains ten stacked digit elements for 0 through 9 in order.
- A spinTo(number) function that pads the number to the slot count with leading zeros, and for each digit position computes a target index 0-9 plus a random extra multiple of ten (so the column visibly scrolls past several full 0-9 loops before landing), expressed as a single translateY percentage on that column's inner element.
- Give each digit column a slightly different transition duration based on its position (e.g. a base duration plus an increasing offset per index) so columns settle at staggered times rather than all at once, mimicking a real mechanical slot machine.
- After each column's transition duration elapses, snap its transform directly to the exact target position with the transition temporarily disabled, so the column ends up exactly aligned regardless of any rounding from the randomized extra spin distance.
- Add fade gradients at the top and bottom edge of each slot window (via pseudo-elements or overlays) so digits appear to scroll in and out smoothly rather than clipping abruptly.
- Include buttons that call spinTo with a random number, a max value, and zero, to demonstrate the roll animation on demand.

Step by step

How to Use

1
Watch the digits rollThe number slot machine spins each digit through 0-9 before settling on the target number.
2
Click to generate a new numberClick the button to spin to a new random number.
3
Change the number of digitsUpdate const DIGITS = 5 in the JS panel.
4
Set a specific target numberReplace the random logic with a specific number: spinTo([1,2,3,4,5]).
5
Change spin speedUpdate the animation timing values in the spin logic in the JS panel.
6
Export in your formatClick "HTML" for a standalone file, "JSX" for a React component, or "Tailwind" for a React + Tailwind version.

Real-world uses

Common Use Cases

Lottery and prize reveal animations

Animate a prize draw by spinning to the winning number. The slot machine aesthetic adds anticipation.

Live score and counter displays

Animate score changes in a game or points system. The rolling digit communicates that the value has updated — for a simple ticking total, the count-up counter is lighter weight.

OTP and verification code reveals

Animate one-time code display alongside an OTP input — each digit rolls in sequentially for a more engaging code presentation.

Learn CSS translateY digit column technique

The slot uses translateY to scroll through a column of digits. Edit the column height and translateY calculation to understand the positioning.

Dashboard metric animated updates

When a live metric updates, spin the changed digits only — the unchanged digits remain still while updated ones roll to new values.

Countdown timer with slot animation

Wire to a countdown timer: update the digit arrays each second and call spinTo(). The rolling animation makes countdown timers more visually engaging.

Got questions?

Frequently Asked Questions

Each slot position has an overflow: hidden container showing one row. Inside is a column with divs for each digit 0-9. translateY(-index * rowHeight) scrolls the column to show the digit at that index position.

Before transitioning to the target digit, the column first scrolls through several random intermediate digit values. The rapid changes create the visual "spinning" before the final slow settle.

Replace the random digit generation with your target: const target = [7,4,2]; // for 742. Pass this array to the spin function. The digits roll and settle on exactly these values.

Track the previous value and only trigger the spin animation on columns where the digit changed. Keep unchanged columns at their current translateY position.

Yes. Click "JSX" for a React component. Manage the digit array in useState. Trigger the animation in a useEffect when the values change, using CSS transitions on the column elements via useRef.

After every third digit from the right, insert a separator element between the slot columns in the HTML. Style it as a static comma character between the animated digit columns.

Loading…