Build a custom Zeenat preset

Give neutral effects one clear purpose

A custom preset is the right place to connect reusable effect geometry to a company anniversary, product launch, event or campaign. Keep the composition restrained and use two or three complementary effects where possible.

Define and render the preset

Use individual effect imports for a small, explicit bundle and pass the frozen preset object to Zeenat.

import { definePreset, Zeenat } from "zeenat";
import { bunting } from "zeenat/effects/bunting";
import { sparkles } from "zeenat/effects/sparkles";

const launch = definePreset({
  id: "product-launch",
  name: "Product launch",
  tags: ["product", "launch"],
  effects: [
    sparkles({ colors: ["#d9aa55", "#ffffff"], count: 10 }),
    bunting({ colors: ["#0d3b35", "#f7f3e8"] }),
  ],
});

export function LaunchDecoration() {
  return <Zeenat preset={launch} intensity="low" />;
}

Verify accessibility and cleanup

Test full and reduced motion, small viewports, light and dark hosts, deterministic seeds and repeated mount/unmount. Custom effects should use engine-owned animation and scheduler APIs.