String Lights Effect

Installation and imports

Install Zeenat once, then use the aggregate effects entry or the smallest explicit subpath. Both paths are exported by package version 0.3.0.

npm install zeenat

import { stringLights } from "zeenat/effects";
// or
import { stringLights } from "zeenat/effects/string-lights";

Basic usage

import { ZeenatScene } from "zeenat";
import { stringLights } from "zeenat/effects/string-lights";

const effects = [stringLights()];

export function Decoration() {
  return <ZeenatScene effects={effects} />;
}

stringLights() options

Properties marked required have no factory default. Every other value below is taken from the current TypeScript source.

Property	Type	Required	Default	Description
`colors`	`readonly string[]`	No	`["#fbbf24", "#fef3c7", "#f97316"]`	CSS colors cycled across bulbs.
`count`	`number`	No	`derived from width`	Explicit base bulb count. When omitted, spacing and viewport width determine it.
`spacing`	`number`	No	`78`	Approximate bulb spacing in CSS pixels when count is omitted; minimum 30.
`position`	`"top" \| "bottom"`	No	`"top"`	Viewport edge used for the cable.
`depth`	`number`	No	`54 small / 72 large`	Cable SVG height in CSS pixels; minimum 28.
`twinkle`	`boolean`	No	`true`	Enables alternating bulb opacity and scale during full motion.
`layer`	`"background" \| "ambient" \| "foreground" \| "top"`	No	`"top"`	Semantic layer used to order the effect inside the Zeenat scene.
`order`	`number`	No	`—`	Optional ordering value among effects in the same semantic layer.

Examples

Subtle

stringLights({ count: 9, depth: 46, colors: ["#fef3c7"], twinkle: false })

Intense

stringLights({ count: 26, colors: ["#fbbf24", "#fb7185", "#38bdf8"], depth: 88 })

Combined

const effects = [stringLights(), lanterns({ count: 4 }), sparkles({ colors: ["#fbbf24"], count: 8 })];

Reduced motion

The cable and bulbs remain visible as a static decoration; twinkle is omitted.

Read the complete reduced-motion contract

Performance notes

Uses one responsive SVG. Bulb count is bounded, scaled for viewport and animated through WAAPI only when full motion is active.

Zeenat performance architecture