slot-counter-animation

Viewport-triggered slot-machine counter animation (vertical rolling digits). Zero dependencies. Builds ESM + UMD and ships a separate CSS file.

Install

npm i slot-counter-animation
# or
pnpm add slot-counter-animation
# or
yarn add slot-counter-animation

Usage

1) HTML

Single counter:

<div class="container-number">
  <span class="number" data-counter="5"></span>
  <span class="unit">時間/月</span>
</div>

Multiple counters:

<div class="stats">
  <div class="container-number">
    <span class="number" data-counter="12"></span>
    <span class="unit">Projects</span>
  </div>

  <div class="container-number">
    <span class="number" data-counter="250"></span>
    <span class="unit">Clients</span>
  </div>

  <div class="container-number">
    <span class="number" data-counter="99"></span>
    <span class="unit">%</span>
  </div>
</div>

2) CSS import

import 'slot-counter-animation/style.css';

3) JS init

import { initSlotCounter, SlotCounter } from 'slot-counter-animation';

// Simple
initSlotCounter();

// Or class instance
const sc = new SlotCounter({
  selector: '[data-counter]',
  duration: 1400,
  delayStep: 90,
  extraRounds: 2,
  triggerOnce: true,
  autoInit: false
});
sc.mount();

Options

{
  selector?: string;                 // default: "[data-counter]"
  duration?: number | (digitIndex, totalDigits, el) => number;     // default: 1400
  delayStep?: number;                // default: 90
  extraRounds?: number | (digitIndex, totalDigits, el) => number;  // default: 2
  triggerOnce?: boolean;             // default: true
  autoInit?: boolean;                // default: true
  rootMargin?: string;               // default: "0px 0px -15% 0px"
  threshold?: number | number[];     // default: 0
}

Notes on CSS / Styling

• Package CSS is fully scoped under .slotcounter and child classes.
• The plugin does not set font-size / font-family. You can style your number element as usual:

.number {
  font-size: 54px;
  font-weight: 600;
  line-height: 1;
}

Supported values

• Integers: "5", "12", "999"
• With separators: "1,000", "9.5", "-12"

Separators (., ,, +, -) are rendered as static characters; only digits animate.

Build (for contributors)

npm install
npm run build

Outputs:

• dist/index.js (ESM)
• dist/index.umd.cjs (UMD)
• dist/style.css

Publish to npm

1. Ensure you own the package name (or change name in package.json).
2. Login:

npm login

3. Publish:

npm publish --access public