US Independence Day Preset

Composition

American flag bunting with star accents and modest fireworks.

SparklesBounded CSS circles, diamonds or stars with a soft WAAPI shimmer.FireworksModest repeating bursts built from small, transform-animated DOM particles.BuntingResponsive country flags or classic pennants, anchored to a curved SVG cord.

React usage

import { Zeenat } from "zeenat";

export function Decoration() {
  return <Zeenat preset="us-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="us-independence-day" />{children}</body></html>;
}

Vanilla JavaScript

import { zeenat } from "zeenat/vanilla";

const decoration = zeenat({ preset: "us-independence-day", intensity: "medium" });
// Later: decoration.destroy();

Typed customization

The US Independence Day subpath exports createUsIndependenceDayPreset. 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 { createUsIndependenceDayPreset } from "zeenat/presets/us-independence-day";

const customized = createUsIndependenceDayPreset({
  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="us-independence-day" intensity="low" seed={2026} />

Reduced motion

Fireworks are omitted; static bunting and sparse star accents remain.

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="us-independence-day"
  activeFrom="2026-07-04T00:00:00-04:00"
  activeUntil="2026-07-05T00:00:00-04:00"
/>