Country Flag Bunting Preset

Composition

A responsive cord of country flags for any occasion, with no additional effects.

BuntingResponsive country flags or classic pennants, anchored to a curved SVG cord.

React usage

The flag option is required. Use an English country slug or two-letter code from the 249-entry country catalog.

import { Zeenat } from "zeenat";

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

Next.js App Router

import { Zeenat } from "zeenat";

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

Vanilla JavaScript

import { zeenat } from "zeenat/vanilla";

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

Typed customization

The Country Flag Bunting subpath exports createBuntingPreset. Its supported options are listed below.

Choose horizontal or vertical flag artwork. You can also pass orientation directly with this string preset in React or vanilla JavaScript. Vertical rotates the full design 90° clockwise and preserves its proportions.

import { Zeenat } from "zeenat";
import { createBuntingPreset } from "zeenat/presets/bunting";

const customized = createBuntingPreset({
  flag: "PK",
  orientation: "vertical",
});

<Zeenat preset={customized} />;

Property	Type	Default	Description
`flag`	`CountryFlag`	required	Country slug such as pakistan or a code such as PK or JP from zeenat/flags.
`orientation`	`"horizontal" \| "vertical"`	"horizontal"	Rotate flag artwork 90° clockwise for vertical hanging, preserving its proportions.

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

Reduced motion

The flag cord stays visible with its sway disabled.

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