Composition
Pakistani flag bunting, green-and-white star accents and modest fireworks for 14 August.
React usage
import { Zeenat } from "zeenat";
export function Decoration() {
return <Zeenat preset="pakistan-independence-day" intensity="medium" />;
}Next.js App Router
import { Zeenat } from "zeenat";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return <html><body><Zeenat preset="pakistan-independence-day" />{children}</body></html>;
}Vanilla JavaScript
import { zeenat } from "zeenat/vanilla";
const decoration = zeenat({ preset: "pakistan-independence-day", intensity: "medium" });
// Later: decoration.destroy();Typed customization
The Pakistan Independence Day subpath exports createPakistanIndependenceDayPreset. 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 { createPakistanIndependenceDayPreset } from "zeenat/presets/pakistan-independence-day";
const customized = createPakistanIndependenceDayPreset({
orientation: "vertical",
});
<Zeenat preset={customized} />;| Property | Type | Default | Description |
|---|---|---|---|
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="pakistan-independence-day" intensity="low" seed={2026} />Reduced motion
Fireworks are omitted; static Pakistani flags and sparse star accents remain.
Accessibility and reduced motionScheduling
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="pakistan-independence-day"
activeFrom="2026-08-14T00:00:00+05:00"
activeUntil="2026-08-15T00:00:00+05:00"
/>