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 { sparkles } from "zeenat/effects";
// or
import { sparkles } from "zeenat/effects/sparkles";Basic usage
import { ZeenatScene } from "zeenat";
import { sparkles } from "zeenat/effects/sparkles";
const effects = [sparkles({ colors: ["#fbbf24", "#ffffff"] })];
export function Decoration() {
return <ZeenatScene effects={effects} />;
}sparkles() 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[] | Yes | required | One or more CSS colors used across sparkle marks. |
count | number | No | 24 | Base mark count before intensity, viewport and motion scaling. |
shape | "circle" | "diamond" | "star" | No | "diamond" | CSS geometry used for each sparkle. |
maxY | number | No | 0.9 | Maximum vertical placement as a clamped viewport fraction. |
opacity | number | No | 0.62 | Peak sparkle opacity during full motion. |
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
sparkles({ colors: ["#fde68a"], count: 8, opacity: 0.25, shape: "circle" })Intense
sparkles({ colors: ["#f43f5e", "#fbbf24", "#38bdf8"], count: 42, shape: "star" })Combined
const effects = [petals({ count: 14 }), sparkles({ colors: ["#f9a8d4"], count: 9 })];Reduced motion
A sparse, static set of marks remains visible at opacity 0.34.
Read the complete reduced-motion contractPerformance notes
Uses bounded spans animated only with transform and opacity. Reduced motion and small screens lower density.
Zeenat performance architecture