Number Slot Machine — Free HTML CSS JS Snippet

<div class="scene">
  <div class="display">
    <div class="slot-wrap" id="display"></div>
    <span class="currency">USD</span>
  </div>
  <div class="btns">
    <button class="btn" onclick="spinTo(Math.floor(Math.random()*9000+1000))">Random</button>
    <button class="btn accent" onclick="spinTo(99999)">Max</button>
    <button class="btn" onclick="spinTo(0)">Reset</button>
  </div>
  <p class="hint">Each digit spins independently to its target</p>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #0f172a; display: flex; align-items: center; justify-content: center; min-height: 100vh; }

.scene { display: flex; flex-direction: column; align-items: center; gap: 28px; }

.display { display: flex; align-items: center; gap: 10px; }
.slot-wrap { display: flex; gap: 6px; }

.slot {
  width: 52px; height: 72px;
  background: #1e293b; border: 1px solid #334155;
  border-radius: 10px; overflow: hidden;
  position: relative;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.3);
}
.slot-inner {
  position: absolute; left: 0; right: 0; top: 0;
  transition: transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
}
.digit {
  height: 72px; display: flex; align-items: center; justify-content: center;
  font-size: 36px; font-weight: 800; color: #f1f5f9;
  font-family: 'Courier New', monospace;
}
.slot::before,.slot::after {
  content: ''; position: absolute; left: 0; right: 0; height: 20px; z-index: 2; pointer-events: none;
}
.slot::before { top: 0;    background: linear-gradient(to bottom,#1e293b,transparent); }
.slot::after  { bottom: 0; background: linear-gradient(to top,#1e293b,transparent); }

.currency { font-size: 13px; font-weight: 700; color: #475569; letter-spacing: 1px; }

.btns { display: flex; gap: 10px; }
.btn { padding: 9px 20px; font-size: 13px; font-weight: 600; border-radius: 8px; cursor: pointer; font-family: inherit; background: #1e293b; color: #64748b; border: 1px solid #334155; transition: all 0.15s; }
.btn:hover { border-color: #6366f1; color: #6366f1; }
.btn.accent { background: #6366f1; color: #fff; border-color: #6366f1; }
.btn.accent:hover { background: #4f46e5; }

.hint { font-size: 12px; color: #334155; }

const DIGITS = 5;
let current = Array(DIGITS).fill(0);

function buildSlots() {
  const wrap = document.getElementById('display');
  wrap.innerHTML = '';
  for (let i = 0; i < DIGITS; i++) {
    const slot = document.createElement('div');
    slot.className = 'slot';
    const inner = document.createElement('div');
    inner.className = 'slot-inner';
    inner.id = 'slot-' + i;
    for (let d = 0; d <= 9; d++) {
      const div = document.createElement('div');
      div.className = 'digit';
      div.textContent = d;
      inner.appendChild(div);
    }
    slot.appendChild(inner);
    wrap.appendChild(slot);
  }
}

function spinTo(num) {
  const padded = String(num).padStart(DIGITS, '0').slice(-DIGITS);
  padded.split('').forEach((ch, i) => {
    const target = parseInt(ch);
    const extra  = Math.floor(Math.random() * 2 + 1) * 10;
    const total  = extra + target;
    const pct    = -(total / 10) * 100;
    const inner  = document.getElementById('slot-' + i);
    inner.style.transition = `transform ${0.5 + i * 0.08}s cubic-bezier(0.25,0.46,0.45,0.94)`;
    inner.style.transform  = `translateY(${pct}%)`;
    setTimeout(() => {
      inner.style.transition = 'none';
      inner.style.transform  = `translateY(${-target * 10}%)`;
    }, (0.5 + i * 0.08) * 1000 + 50);
    current[i] = target;
  });
}

buildSlots();
setTimeout(() => spinTo(12345), 300);