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 zeenatimport { petals } from "zeenat/effects";
// or
import { petals } from "zeenat/effects/petals";Basic usage
import { ZeenatScene } from "zeenat";
import { petals } from "zeenat/effects/petals";
const effects = [petals()];
export function Decoration() {
return <ZeenatScene effects={effects} />;
}petals() 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 | ["#f9a8d4", "#fecdd3", "#fdf2f8"] | CSS colors used for petal forms. |
count | number | No | 22 | Base petal count before density scaling. |
opacity | number | No | 0.62 | Maximum petal opacity. |
size | readonly [number, number] | No | [8, 15] | Minimum and maximum petal size in CSS pixels. |
drift | number | No | 60 | Horizontal travel in CSS pixels. |
rotation | number | No | 600 | 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
petals({ count: 10, opacity: 0.35, drift: 24, fallSpeed: 1.25 })Intense
petals({ count: 40, size: [8, 19], drift: 90, rotation: 900 })Combined
const effects = [petals({ count: 18 }), sparkles({ colors: ["#f472b6", "#86efac"], opacity: 0.28 })];Reduced motion
A sparse static arrangement remains, with no falling or rotation animation.
Read the complete reduced-motion contractPerformance notes
The shared falling-element renderer bounds counts, scales for viewport and animates only transform and opacity.
Zeenat performance architecture