Falling


!Falling Demo
!Falling Demo

A customizable falling animation

Installation

``bash
npm install falling
`

`bash
yarn add falling
`

Usage

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

Example

`jsx
//Nextjs - pages/index.js

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

const FallingDemo = () => {
return (

className="bg-purple-100"
style={{
backgroundColor: "#000",
width: "100%",
height: "100vh",
position: "relative",
overflow: "hidden",
}}
>

);
};

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