react-atmospheres

A lightweight React wrapper to add seasonal, themed visual effects—snow, hearts, spooky, and more—behind any container without blocking or slowing your app.

🚀 Features

• 🎉 Plug & Play: Simply wrap any layout element to add effects
• ❄️ Snow, ❤️ Hearts, 🎃 Spooky (soon): Seasonal animations for any occasion,
• ⚡ Performance-optimized: Canvas pooling, ResizeObserver, visibility pause
• ♿ A11y-friendly: aria-hidden, pointer-events: none, overflow: hidden
• 🧩 Configurable: Colors, density, speed, particle count

📦 Installation

Install via npm:

npm install react-atmospheres

Or via Yarn:

yarn add react-atmospheres

🛠️ Usage

import React from 'react';
import { Atmospheres } from 'react-atmospheres';

export function Header() {
  return (
    <Atmospheres
      animation="snow"
      speedFactor={1.5}
      maxPartikels={50}
      color="white"
    >
      <header>
        <h1>Welcome to Winter Wonderland</h1>
      </header>
    </Atmospheres>
  );
}

🎛️ API Reference

<Atmospheres>

Wrap any React node to render a selected animation behind it.

| Prop | Type | Default | Description | |------------------|--------------------------------------------|----------------------------|--------------------------------------------------------| | children | ReactNode | — | The content over which the animation is rendered. | | animation | 'snow' \| 'hearts' \| 'spooky' \| 'none' | 'none' | Selects which animation to display. | | speedFactor | number | 1 | Configuration number for animation speed | | particleAmount | number | 50 | Configuration number for max amount of objects visible | | disabled | boolean | false | Boolean to show the animation or not | | color | string | based on choosen animation | Color of the fill from the animated objects | | outlineColor | string | based on choosen animation | Color of the outline of the animated objects |

🤝 Contributing

1. Fork the repository.
2. Create a branch feat/your-feature.
3. Commit and push your changes.
4. Open a pull request.
5. CI checks will run; after review, your PR can be merged.

Please adhere to the existing code style (ESLint + Prettier).

📝 License

MIT © Robin Glaeser

Made with ❤️ by your friendly neighborhood frontend developer.