A decoration layer for an existing website
Zeenat.js is an open-source TypeScript library for adding decorative, seasonal and occasion-aware visual effects to React, Next.js and vanilla JavaScript websites. It mounts a fixed, clipped overlay, so an application does not need to restructure its page or move content into a special component.
It is not only a confetti package. Zeenat provides reusable visual primitives such as snow, petals, falling leaves, bunting, fireworks, lanterns and string lights, plus presets that compose those primitives for a season or occasion.
Effects and presets
An Effect is a framework-neutral factory that mounts one visual primitive into an engine-owned semantic layer. A Preset is a named composition of effects. Presets reuse effect implementations instead of copying their animation code.
React, Next.js and vanilla JavaScript
React applications use the Zeenat component or ZeenatScene. Next.js App Router layouts can remain Server Components because Zeenat contains its own client boundary and server-renders a stable empty decoration root. Non-React applications call zeenat() from the zeenat/vanilla entry and receive a pause, resume, restart and destroy controller.
Layout and pointer behavior
The root and layers are fixed or absolute, clipped, layout-contained, aria-hidden and pointer-inert. Zeenat changes no host class, stylesheet, custom property or layout node, and its decorative geometry cannot receive pointer or keyboard input.
Motion and accessibility
prefers-reduced-motion is honored by default. High-motion effects disappear or become sparse static compositions, while semantic event content stays in the host application. Applications can preview or explicitly override the effective motion mode when needed.
Custom effects and presets
Developers can define custom effects with a scoped scheduler, seeded randomness, animation ownership, resize hooks and cleanup signals. Custom presets compose those effects with built-in effects through definePreset.