# falling-particles

> A simple React TypeScript component for creating falling animations (snow, confetti, etc)

Latest version **1.0.6** (published 2026-01-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install falling-particles
pnpm add falling-particles
yarn add falling-particles
bun add falling-particles
```

## Health

**Score 60/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2026-01-16 |
| First published | 2023-11-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 18 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Adam Janicki |
| Maintainers | adamjanicki |
| Keywords | snow, confetti, falling particles |

## Links

- npm: https://www.npmjs.com/package/falling-particles
- Repository: https://github.com/adamjanicki2/falling-particles
- Homepage: https://github.com/adamjanicki2/falling-particles#readme
- Issues: https://github.com/adamjanicki2/falling-particles/issues
- npm.io page: https://npm.io/package/falling-particles

## Recent versions

- 1.0.6 (latest) — 2026-01-16
- 1.0.5 — 2024-09-20
- 1.0.4 — 2023-11-11
- 1.0.3 — 2023-11-11
- 1.0.2 — 2023-11-09
- 1.0.1 — 2023-11-09
- 1.0.0 — 2023-11-09

## README

# Falling Particles

A simple React TypeScript component for creating falling animations (snow, confetti, etc)

_Check out the [demo site](https://adamjanicki.xyz/falling-particles)!_

## Installation

```bash
npm install falling-particles
```

## Usage

You can use this package with the default config, or pass in a lot of customizable props.

### Default

```tsx
import React from "react";
import FallingParticles from "falling-particles";

const App = () => {
  return (
    <div style={{ backgroundColor: "black", width: "100vw", height: "100vh" }}>
      <FallingParticles />
    </div>
  );
};

export default App;
```

### Custom

```tsx
import React from "react";
import FallingParticles from "falling-particles";

const App = () => {
  return (
    <div style={{ backgroundColor: "black", width: "100vw", height: "100vh" }}>
      <FallingParticles
        colors={["magenta", "cyan", "yellow"]}
        numParticles={300}
        xSpeedRange={{ min: 2, max: 4 }}
        ySpeedRange={{ min: 2, max: 4 }}
        shapes={["circle", "square", "triangle"]}
        rotationRange={{ min: 1, max: 4 }}
        sizeRange={{ min: 5, max: 10 }}
      />
    </div>
  );
};

export default App;
```

## Props

| Prop Name       | Type                  | Default Value                | Description                                                                                                                      |
| --------------- | --------------------- | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
| `colors`        | `string[]`            | `["#fff"]`                   | An array of colors to randomly choose from for the particles.                                                                    |
| `shapes`        | `string[]`            | `["circle"]`                 | An array of shapes to randomly choose from for the particles.                                                                    |
| `images`        | `string[]`            | `[]`                         | An array of image urls to randomly choose from for the particles.                                                                |
| `numParticles`  | `number`              | `120`                        | The number of particles to render.                                                                                               |
| `xSpeedRange`   | `Range`               | `{ min: -2.5, max: 2.5 }`    | The range of x-axis speeds to randomly choose from for the particles.                                                            |
| `ySpeedRange`   | `Range`               | `{ min: 1.5, max: 3 }`       | The range of y-axis speeds to randomly choose from for the particles.                                                            |
| `rotationRange` | `Range`               | `{ min: 0, max: 0 }`         | The range of rotations to randomly choose from for the particles.                                                                |
| `sizeRange`     | `Range`               | `{ min: 1, max: 6 }`         | The range of sizes to randomly choose from for the particles. _(Width for images, rectangles & triangles, diameter for circles)_ |
| `style`         | `React.CSSProperties` | See the default style config | A style object to apply to the container `canvas` element.                                                                       |
| `className`     | `string`              | `undefined`                  | A className to apply to the container `canvas` element.                                                                          |

---
_Source: https://npm.io/package/falling-particles · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._