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 { snow } from "zeenat/effects";
// or
import { snow } from "zeenat/effects/snow";Basic usage
import { ZeenatScene } from "zeenat";
import { snow } from "zeenat/effects/snow";
const effects = [snow()];
export function Decoration() {
return <ZeenatScene effects={effects} />;
}snow() 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 | ["#ffffff", "#dbeafe"] | CSS colors used for snowflakes. |
count | number | No | 34 | Base flake count before density scaling; the effect keeps a small minimum. |
size | readonly [number, number] | No | [3, 8] | Minimum and maximum flake diameter in CSS pixels. |
opacity | number | No | 0.72 | Maximum flake opacity. |
speed | "slow" | "medium" | "fast" | No | "medium" | Fall-duration range: slow 13–20s, medium 9–15s, fast 6–10s. |
drift | number | No | 34 | Horizontal travel in CSS pixels. |
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
snow({ count: 14, speed: "slow", drift: 20, opacity: 0.48 })Intense
snow({ count: 58, speed: "fast", size: [3, 10], drift: 52 })Combined
const effects = [
snow({ count: 26 }),
stringLights({ colors: ["#fef3c7", "#bfdbfe"] }),
];Reduced motion
The shared falling-element renderer keeps a sparse, static distribution instead of animating flakes across the viewport.
Read the complete reduced-motion contractPerformance notes
Counts are bounded and scaled for intensity and small screens. Flakes animate with transform and opacity; visibility changes pause the scene scheduler.
Zeenat performance architecture