v0.3.0 Country flag bunting is here
Zeenat.jsAdorn the web.
Add tasteful seasonal and occasion-aware decorations to an existing React, Next.js or vanilla JavaScript site with one component or function call.
249 countries and territories. Horizontal or vertical flags.
npm install zeenat- SSR safe
- Reduced-motion aware
- Zero runtime dependencies
import { Zeenat } from "zeenat";
<Zeenat
preset="bunting"
flag="pakistan"
/>One component. Existing application.
A decoration layer, not a redesign.
Zeenat mounts a fixed, clipped overlay above the page. Your layout, routes, content and controls stay exactly where they are.
import { Zeenat } from "zeenat";
export function App() {
return <Zeenat preset="bunting" flag="pakistan" />;
}Reusable effects
Nine ways to add a little ceremony.
Use an effect on its own or compose it into a reusable preset. Every card below runs the published Zeenat package only when it approaches the viewport.
Bunting
Responsive country flags or classic pennants, anchored to a curved SVG cord.
Effect documentationAircraft
Original fighter-jet silhouettes with a restrained, configurable flyover.
Effect documentationSparkles
Bounded CSS circles, diamonds or stars with a soft WAAPI shimmer.
Effect documentationFireworks
Modest repeating bursts built from small, transform-animated DOM particles.
Effect documentationSnow
Bounded, seeded snowfall with configurable size, speed and drift.
Effect documentationPetals
Soft CSS petal forms with configurable fall, drift and rotation.
Effect documentationFalling Leaves
Detailed CSS leaf forms with seeded drift, rotation and fall speed.
Effect documentationLanterns
Generic inline SVG lanterns with optional glow and restrained sway.
Effect documentationString Lights
A responsive SVG cable and bulbs with optional twinkle.
Effect documentationEight built-in presets
Effects compose. Presets give them meaning.
Hang country flags for any occasion, celebrate a national day or choose a seasonal composition. Typed factories expose the options each preset supports.
Country Flag Bunting
buntingPakistan Independence Day
sparkles · fireworks · buntingPakistan Defence Day
sparkles · aircraft · buntingUS Independence Day
sparkles · fireworks · buntingWinter
snow · sparkles · string lightsAutumn
falling leaves · sparklesSpring
petals · sparklesFestive Lights
sparkles · lanterns · string lightsBuilt for real websites
Decoration with a strict runtime contract.
Every claim below is grounded in the library’s tests, types or implementation—not a generic feature badge.
Inert by design
Fixed, clipped, aria-hidden and unable to receive pointer or keyboard input.
Accessibility contractBounded resources
DOM and SVG counts, animations, timers and RAF loops have explicit browser-test budgets.
Performance detailsSSR safe
No browser global is accessed during module evaluation; Next.js layouts remain Server Components.
Next.js integrationReduced-motion aware
High-motion effects disappear or become sparse static compositions by default.
Motion behaviorTree-shakeable
Zero runtime dependencies, sideEffects false and individual effect and preset subpaths.
Package architectureLifecycle ownership
Scoped cleanup, visibility pausing, deterministic restarts and isolated effect failures.
Diagnostics APITyped customization
Turn a preset down. Keep the types.
Seasonal factories expose only the options relevant to their composition. Disable an effect with false, or pass that effect’s public option type.
import { createWinterPreset } from "zeenat/presets/winter";
const quietWinter = createWinterPreset({
snow: { count: 14, speed: "slow" },
sparkles: false,
});How do I decorate a website for an event?
Add the occasion without rebuilding the interface.
Zeenat.js adds a decorative overlay to an existing React, Next.js or vanilla JavaScript application. Choose a preset for a matching season or occasion, or compose individual effects for a campaign with its own visual language.
That makes it useful for holiday website decorations, seasonal effects, company anniversaries, product launches, national days and short-lived event campaigns—while keeping meaningful content in the host page.
Read the practical guideOpen source · MIT
Inspect every effect. Shape what comes next.
Zeenat.js is maintained in public by Talha and Zeenat.js contributors. Read the source, report an issue, propose an effect, or review every release.