@raex-ui/particle-scatter

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

Install

npm install @raex-ui/particle-scatter

Usage

import { ParticleScatter } from "@raex-ui/particle-scatter";

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

Props

| Prop | Type | Description | |------|------|-------------| | value | number | Digit to display (0–9) | | size | number | Width in pixels. Height is automatically 1.5× width. |

Peer Dependencies

• react >=18
• react-dom >=18
• framer-motion >=10

No Tailwind CSS required.

License

MIT