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

Use flags for country artwork, or colors with an optional shape for classic pennants. These modes are mutually exclusive. See country flags and custom artwork for the catalog and public render contracts, or use the one-line bunting preset.

Basic usage

import { ZeenatScene } from "zeenat";
import { bunting, pakistanFlag } from "zeenat/effects/bunting";

const effects = [bunting({ flags: [pakistanFlag], count: 14 })];

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

bunting() 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	`required in pennant mode`	Solid pennant colors. Choose colors or flags; they cannot be combined.
`flags`	`readonly BuntingFlagDesign[]`	No	`required in flag mode`	Reusable country or custom flag designs. Cannot be combined with colors or shape.
`orientation`	`"horizontal" \| "vertical"`	No	`"horizontal"`	Flag mode only. Vertical rotates the complete artwork 90° clockwise without stretching it.
`count`	`number`	No	`14`	Base item count before intensity and viewport scaling.
`position`	`"top" \| "bottom"`	No	`"top"`	Edge of the viewport used for the cable.
`height`	`number`	No	`74 small / 108 large`	Rendered SVG height in CSS pixels.
`shape`	`"pennant" \| "swallowtail"`	No	`"pennant"`	Classic pennant mode only; unavailable when flags is supplied.
`cableColor`	`string`	No	`"rgba(30, 35, 40, 0.68)"`	CSS color used for the cable.
`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

Country flags and orientation

import { bunting } from "zeenat/effects/bunting";
import { countryFlag } from "zeenat/flags";

const flags = bunting({
  flags: [countryFlag("PK"), countryFlag("japan")],
  orientation: "vertical",
  count: 12,
});

Classic pennants

import { bunting } from "zeenat/effects/bunting";

const pennants = bunting({ colors: ["#173f5f", "#f8fafc"], count: 8 });
const swallowtails = bunting({
  colors: ["#dc2626", "#f8fafc", "#2563eb"],
  shape: "swallowtail",
});

Combined

import { bunting, sparkles } from "zeenat/effects";
import { unitedStatesFlag } from "zeenat/effects/bunting";

const effects = [
  sparkles({ colors: ["#fbbf24"], count: 10 }),
  bunting({ flags: [unitedStatesFlag] }),
];

Reduced motion

All flags remain visible as a quiet static composition; their subtle alternating sway is omitted.

Read the complete reduced-motion contract

Performance notes

Flag artwork is drawn once per design into an SVG symbol and reused along the cord. Catalog geometry loads on demand from local package chunks. Aborted or replaced scenes ignore late loads, and rejected loads are handled without an unhandled rejection.

Zeenat performance architecture