Winter Preset | Zeenat.js

Composition

Quiet snowfall, cool sparkles and a warm line of string lights.

SnowBounded, seeded snowfall with configurable size, speed and drift.SparklesBounded CSS circles, diamonds or stars with a soft WAAPI shimmer.String LightsA responsive SVG cable and bulbs with optional twinkle.

React usage

import { Zeenat } from "zeenat";

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

Next.js App Router

import { Zeenat } from "zeenat";

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

Vanilla JavaScript

import { zeenat } from "zeenat/vanilla";

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

Typed customization

The Winter subpath exports createWinterPreset. Its supported options are listed below.

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

const customized = createWinterPreset({
  snow: false,
});

<Zeenat preset={customized} />;

Property	Type	Default	Description
`snow`	`SnowOptions \| false`	built-in Snow config	Override Snow options or disable snowfall.
`sparkles`	`SparklesOptions \| false`	built-in cool accents	Override Sparkles options or remove the accent layer.
`lights`	`StringLightsOptions \| false`	built-in warm lights	Override String Lights options or disable the cable.

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="winter" intensity="low" seed={2026} />

Reduced motion

Sparse static snow, cool accents and a non-twinkling line of lights remain.

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