Autumn Preset | Zeenat.js

Composition

Slowly drifting leaves with restrained amber accents.

Falling LeavesDetailed CSS leaf forms with seeded drift, rotation and fall speed.SparklesBounded CSS circles, diamonds or stars with a soft WAAPI shimmer.

React usage

import { Zeenat } from "zeenat";

export function Decoration() {
  return <Zeenat preset="autumn" intensity="medium" />;
}

Next.js App Router

import { Zeenat } from "zeenat";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return <html><body><Zeenat preset="autumn" />{children}</body></html>;
}

Vanilla JavaScript

import { zeenat } from "zeenat/vanilla";

const decoration = zeenat({ preset: "autumn", intensity: "medium" });
// Later: decoration.destroy();

Typed customization

The Autumn subpath exports createAutumnPreset. Its supported options are listed below.

import { Zeenat } from "zeenat";
import { createAutumnPreset } from "zeenat/presets/autumn";

const customized = createAutumnPreset({
  leaves: false,
});

<Zeenat preset={customized} />;

Property	Type	Default	Description
`leaves`	`FallingLeavesOptions \| false`	built-in leaf config	Override Falling Leaves options or disable leaves.
`accents`	`SparklesOptions \| false`	built-in amber accents	Override Sparkles options or disable accents.

Intensity and seed

Scene intensity scales effect counts without changing the preset API. A seed makes generated positions and timing deterministic across restarts.

<Zeenat preset="autumn" intensity="low" seed={2026} />

Reduced motion

Sparse static leaves and amber accents remain without falling or shimmer motion.

Accessibility and reduced motion

Scheduling

Keep dates out of preset definitions. Schedule the scene at the call site with explicit time-zone offsets. Set the year and local offset for your event.

<Zeenat
  preset="autumn"
  activeFrom="2026-12-01T00:00:00Z"
  activeUntil="2027-01-01T00:00:00Z"
/>