falling-particles v1.0.4

Falling Particles

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

Demo site coming soon!

Installation

npm install falling-particles

Usage

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

Default

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

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