How to decorate a React website

Add a decoration overlay, not a new layout

To decorate a React website for a holiday, event or campaign, mount Zeenat once near the application root and choose a preset. The fixed overlay sits above the existing application without taking layout space or intercepting pointer events.

Install and render

Install the package, then render the component alongside existing application content.

import { Zeenat } from "zeenat";

export function App() {
  return (
    <>
      <Zeenat preset="spring" intensity="low" />
      <main>{/* Existing application */}</main>
    </>
  );
}

Keep motion optional

Zeenat honors reduced motion by default and keeps decoration outside the accessibility tree. Put event names, dates and calls to action in the React application, not in the effect layer.