Spring Preset | Zeenat.js

Composition

Soft drifting petals and fresh, low-density color accents.

PetalsSoft CSS petal forms with configurable fall, drift and rotation.SparklesBounded CSS circles, diamonds or stars with a soft WAAPI shimmer.

React usage

import { Zeenat } from "zeenat";

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

Next.js App Router

import { Zeenat } from "zeenat";

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

Vanilla JavaScript

import { zeenat } from "zeenat/vanilla";

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

Typed customization

The Spring subpath exports createSpringPreset. Its supported options are listed below.

import { Zeenat } from "zeenat";
import { createSpringPreset } from "zeenat/presets/spring";

const customized = createSpringPreset({
  petals: false,
});

<Zeenat preset={customized} />;

Property	Type	Default	Description
`petals`	`PetalsOptions \| false`	built-in petal config	Override Petals options or disable petals.
`accents`	`SparklesOptions \| false`	built-in fresh 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="spring" intensity="low" seed={2026} />

Reduced motion

A sparse static arrangement of petals and accents remains.

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="spring"
  activeFrom="2026-12-01T00:00:00Z"
  activeUntil="2027-01-01T00:00:00Z"
/>