Using Zeenat.js with React

Add Zeenat to an existing React tree

Zeenat renders one stable decoration root. Scene animations run outside React's render cycle; scene-level prop changes rebuild only owned effect layers.

import { Zeenat } from "zeenat";

export function App() {
  return (
    <>
      <Zeenat preset="winter" intensity="medium" />
      <main>Your existing application</main>
    </>
  );
}

Compose individual effects

ZeenatScene creates a typed custom preset from an effect array. Keep the array stable outside the component or memoize it to avoid unnecessary scene rebuilds.

import { ZeenatScene } from "zeenat";
import { snow, stringLights } from "zeenat/effects";

const effects = [snow({ count: 20 }), stringLights()];

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

Use the controller ref

A ZeenatHandle exposes pause, resume, restart, destroy, setIntensity, diagnostics snapshots and diagnostics subscriptions.

const ref = useRef<ZeenatHandle>(null);

<Zeenat ref={ref} preset="spring" />;
<button onClick={() => ref.current?.pause()}>Pause</button>