Falling

A customizable falling animation

Installation

npm install falling

yarn add falling

Usage

<Falling
  flowerCount={50}
  flowerImage="/custom-flower.png"
  fallSpeed={-3}
  spreadWidth={2000}
  spreadHeight={2000}
  colors={["#FF0000", "#00FF00", "#0000FF"]}
/>

Example

//Nextjs - pages/index.js

"use client";
import React from "react";
import Falling from "falling";

const FallingDemo = () => {
  return (
    <div
      className="bg-purple-100"
      style={{
        backgroundColor: "#000",
        width: "100%",
        height: "100vh",
        position: "relative",
        overflow: "hidden",
      }}
    >
      <Falling flowerCount={50} flowerImage="/flow.png" fallSpeed={-3} />
    </div>
  );
};

export default FallingDemo;

Props

License

MIT © trinhminhhieu