Falling Leaves Effect

Installation and imports

Install Zeenat once, then use the aggregate effects entry or the smallest explicit subpath. Both paths are exported by package version 0.3.0.

npm install zeenat

import { fallingLeaves } from "zeenat/effects";
// or
import { fallingLeaves } from "zeenat/effects/falling-leaves";

Basic usage

import { ZeenatScene } from "zeenat";
import { fallingLeaves } from "zeenat/effects/falling-leaves";

const effects = [fallingLeaves()];

export function Decoration() {
  return <ZeenatScene effects={effects} />;
}

fallingLeaves() options

Properties marked required have no factory default. Every other value below is taken from the current TypeScript source.

Property	Type	Required	Default	Description
`colors`	`readonly string[]`	No	`["#b45309", "#d97706", "#92400e", "#a16207"]`	CSS colors used for leaves.
`count`	`number`	No	`20`	Base leaf count before density scaling.
`opacity`	`number`	No	`0.7`	Maximum leaf opacity.
`size`	`readonly [number, number]`	No	`[10, 19]`	Minimum and maximum leaf size in CSS pixels.
`drift`	`number`	No	`72`	Horizontal travel in CSS pixels.
`rotation`	`number`	No	`720`	Maximum rotation per fall cycle in degrees.
`fallSpeed`	`number`	No	`1`	Duration multiplier; values below 1 fall faster, clamped to at least 0.2.
`layer`	`"background" \| "ambient" \| "foreground" \| "top"`	No	`"ambient"`	Semantic layer used to order the effect inside the Zeenat scene.
`order`	`number`	No	`—`	Optional ordering value among effects in the same semantic layer.

Examples

Subtle

fallingLeaves({ count: 9, opacity: 0.45, drift: 32, fallSpeed: 1.3 })

Intense

fallingLeaves({ count: 36, size: [11, 22], rotation: 960, fallSpeed: 0.75 })

Combined

const effects = [fallingLeaves(), sparkles({ colors: ["#f59e0b", "#fcd34d"], count: 8 })];

Reduced motion

A low-density static leaf composition remains visible without falling or spinning.

Read the complete reduced-motion contract

Performance notes

Leaf counts are bounded and the shared renderer uses transforms, opacity and responsive density scaling.

Zeenat performance architecture