Engineering

Accessibility and reduced motion

How Zeenat.js keeps decoration non-semantic, pointer-inert and responsive to reduced-motion preferences.

Decoration stays outside the accessibility tree

The root, semantic layers and generated geometry are aria-hidden. They cannot receive pointer or keyboard input. Never put meaningful text, status or controls inside a custom effect; render that content in the host application.

Reduced motion is a design mode

prefers-reduced-motion: reduce is honored by default. Aircraft and fireworks disappear. Falling effects become sparse static arrangements. Bunting, lanterns and string lights remain visible without sway or twinkle. Sparkles become a sparse static set.

Preview or override motion

motion=system is the normal setting. Use motion=reduced in a preview or expose a user-facing control when the application has its own motion setting. Do not use motion=full to override a user's preference without an explicit application reason.

Reduced preview
<Zeenat preset="winter" motion="reduced" />