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

| Prop | Type | Default | Description | | ------------ | -------- | ------------------------------- | ------------------------------ | | flowerCount | number | 30 | Number of flowers to render | | flowerImage | string | '/flow.png' | Path to flower image | | fallSpeed | number | -5 | Vertical fall speed of flowers | | spreadWidth | number | 2000 | Horizontal spread of flowers | | spreadHeight | number | 2000 | Vertical spread of flowers | | colors | string[] | ['#FFB6C1','#FF69B4','#FFC0CB'] | Flower color palette |

License

MIT © trinhminhhieu