Lanterns Effect | Zeenat.js

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 { lanterns } from "zeenat/effects";
// or
import { lanterns } from "zeenat/effects/lanterns";

Basic usage

import { ZeenatScene } from "zeenat";
import { lanterns } from "zeenat/effects/lanterns";

const effects = [lanterns()];

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

lanterns() 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	`["#f59e0b", "#dc2626"]`	CSS colors cycled across lantern bodies.
`count`	`number`	No	`7`	Base lantern count before density scaling.
`position`	`"top" \| "sides"`	No	`"top"`	Whether lanterns hang across the top or alternate down the sides.
`glow`	`boolean`	No	`true`	Adds an SVG drop-shadow based on each lantern color.
`sway`	`boolean`	No	`true`	Enables a small alternating rotation 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

lanterns({ count: 3, colors: ["#d97706"], glow: false, sway: false })

Intense

lanterns({ count: 10, position: "sides", colors: ["#dc2626", "#f59e0b", "#0f766e"] })

Combined

const effects = [lanterns({ count: 5 }), stringLights({ colors: ["#fbbf24", "#fff7ed"] })];

Reduced motion

Lanterns remain visible at lower opacity, but sway is removed.

Read the complete reduced-motion contract

Performance notes

Each lantern is a compact inline SVG. Count is bounded and scales with intensity, viewport and motion preference.

Zeenat performance architecture