ParticleScatter

Firefly dots scatter and reform into digits using spring physics. Each of the 35 dots (7x5 grid) animates independently with staggered delays.

GitHub

Install

npm install animated-digit-transitions

Usage

import { ParticleScatter } from "animated-digit-transitions";

export function MyComponent() {
  const [digit, setDigit] = useState(0);
  return <ParticleScatter value={digit} size={64} />;
}

Props

Prop	Type	Default	Description
value	number	0	Digit to display (0-9)
size	number	64	Width in pixels. Height is 1.5x width.