Fireworks Effect | Zeenat.js

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 { fireworks } from "zeenat/effects";
// or
import { fireworks } from "zeenat/effects/fireworks";

Basic usage

import { ZeenatScene } from "zeenat";
import { fireworks } from "zeenat/effects/fireworks";

const effects = [fireworks({ colors: ["#dc2626", "#f8fafc", "#2563eb"] })];

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

fireworks() 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 cycled across burst particles.
`count`	`number`	No	`3`	Base number of repeating bursts.
`maxY`	`number`	No	`0.52`	Maximum vertical origin, clamped from 0.16 to 0.72.
`particlesPerBurst`	`number`	No	`10 (minimum 6)`	Particle count for every burst.
`layer`	`"background" \| "ambient" \| "foreground" \| "top"`	No	`"background"`	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

fireworks({ colors: ["#fbbf24", "#fff7ed"], count: 1, particlesPerBurst: 7 })

Intense

fireworks({ colors: ["#ec4899", "#22d3ee", "#facc15"], count: 5, particlesPerBurst: 14 })

Combined

const effects = [fireworks({ colors: ["#f43f5e", "#f8fafc"] }), sparkles({ colors: ["#fbbf24"], shape: "star" })];

Reduced motion

Fireworks are omitted entirely when effective motion is reduced.

Read the complete reduced-motion contract

Performance notes

Burst and particle counts are bounded. Transform and opacity animations run through WAAPI and counts shrink on small screens.

Zeenat performance architecture