Counter

Animated number with simple, wheel, smooth, fade, and 3D digit effects.

counter
0active users
0px

Customize

Edit props; preview updates instantly.

Customize
Value
12,848
Speed (ms)
1000ms
Effect
Easing
Decimals
0

Props

Props accepted by Counter.

PropTypeDefaultDescription
valuenumber—Number to animate toward.
speednumber1000Animation duration in milliseconds.
easing"linear" | "ease-out" | "ease-in-out""ease-out"Progress easing used by the count animation.
format(value: number) => string—Custom formatter. When provided, it owns the rendered text and overrides `separator` / `decimals`.
separatorstring—Thousands separator, for example `,` or `.`.
decimalsnumber—Fixed decimal places for the animated output.
effect"simple" | "wheel" | "smooth" | "fade" | "3d""simple"`simple` renders text directly, `wheel` rolls digits, `smooth` blends through the shortest wheel path, `fade` pulses only changing digits, and `3d` flips each changed display digit through a small perspective cube.
childrenReactNode—Optional suffix or inline content rendered after the count.
classNamestring—Extra class names merged onto the root span.

Installation

Choose CLI for the one-line shadcn install, or copy the file manually.

npx shadcn@latest add https://2lazyui.com/r/counter.json

Usage

Import the component and drop it into a render.

demo.tsx14 lines
import { Counter } from "@/components/lazy-ui/counter";

export function Demo() {
  return (
    <Counter
      value={12848}
      separator=","
      effect="3d"
      className="text-5xl font-semibold text-neutral-100"
    >
      <span className="ml-2 text-base text-neutral-500">users</span>
    </Counter>
  );
}

Credits

requestAnimationFrameFrame loop for dependency-free number interpolation.