Engineering

Performance

Zeenat.js performance architecture: bounded DOM and SVG, shared scheduling, visibility pausing and bundle-size budgets.

Bounded resources

Effects use bounded DOM or SVG geometry and Web Animations. The library's representative browser budget is at most 180 DOM nodes, 100 animations, 10 timers and two RAF loops, with a conservative 50 ms average frame ceiling used as a regression tripwire rather than a benchmark claim.

One scheduler, isolated scopes

One scene scheduler multiplexes RAF work and pause-aware timers. Every effect has a scoped scheduler, animation registry, abort signal and cleanup ownership, so a failing effect rolls back without stopping healthy siblings.

Responsive density and visibility pausing

Counts scale by intensity, small-screen status and motion preference. Visibility changes pause scheduler work, and crossing the small-screen breakpoint rebuilds with the same deterministic seed.

Tree shaking and package budgets

The package has zero runtime dependencies, marks sideEffects false, keeps React as a peer and ships aggregate plus individual effect and preset subpaths. Automated gzip ceilings cover the React, vanilla, core, catalog and individual effect entries.

Load only selected flag artwork

The 249-entry country catalog is packaged locally. Its optional artwork index and selected SVG geometry load on demand in both ESM and CJS builds. Server-rendered, disabled and future-scheduled scenes request no flag geometry. Preserve the entire generated dist directory so dynamic imports remain available.

Late flag loads cannot repopulate destroyed or replaced scenes. Rejected renders are handled by the effect. Bunting recomputes cord positions, tangents and flag proportions in viewport pixels on resize; aircraft flight endpoints also update within the same breakpoint.