Festive Lights Preset

Composition

Warm string lights, neutral lantern forms and subtle gold accents.

SparklesBounded CSS circles, diamonds or stars with a soft WAAPI shimmer.LanternsGeneric inline SVG lanterns with optional glow and restrained sway.String LightsA responsive SVG cable and bulbs with optional twinkle.

React usage

import { Zeenat } from "zeenat";

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

Next.js App Router

import { Zeenat } from "zeenat";

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

Vanilla JavaScript

import { zeenat } from "zeenat/vanilla";

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

Typed customization

The Festive Lights subpath exports createFestiveLightsPreset. Its supported options are listed below.

import { Zeenat } from "zeenat";
import { createFestiveLightsPreset } from "zeenat/presets/festive-lights";

const customized = createFestiveLightsPreset({
  lights: false,
});

<Zeenat preset={customized} />;

Property	Type	Default	Description
`lights`	`StringLightsOptions \| false`	built-in string lights	Override String Lights options or disable them.
`lanterns`	`LanternsOptions \| false`	built-in lanterns	Override Lantern options or disable them.
`accents`	`SparklesOptions \| false`	built-in gold accents	Override Sparkles options or disable them.

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

Reduced motion

Static lanterns, lights and sparse gold accents remain; sway and twinkle stop.

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