Customizing Zeenat.js

Start with scene-level controls

Intensity adjusts density across the scene, while seed stabilizes geometry. These options are the smallest way to tune a built-in preset.

<Zeenat preset="winter" intensity="low" seed={42} />

Use a typed preset factory

All eight preset IDs have typed factories. Winter, Autumn, Spring and Festive Lights let you configure or disable individual layers. The three national-day factories accept orientation; createBuntingPreset requires flag and optionally accepts orientation.

import { Zeenat } from "zeenat";
import { createWinterPreset } from "zeenat/presets/winter";

const quietWinter = createWinterPreset({
  snow: { count: 14, speed: "slow", drift: 20 },
  sparkles: false,
});

export function Decoration() {
  return <Zeenat preset={quietWinter} />;
}

Compose your own preset

For brand events and campaigns, define a named preset from individually imported effects. This keeps reusable visual primitives separate from occasion meaning.