react-atmospheres
Version:
A lightweight wrapper to add seasonal, themed visual effects in your React app.
95 lines (66 loc) • 3.51 kB
Markdown
# react-atmospheres
[](https://www.npmjs.com/package/react-atmospheres) [](https://www.npmjs.com/package/react-atmospheres) [](https://github.com/sinf4er/react-atmospheres/actions) [](LICENSE)
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:
```bash
npm install react-atmospheres
```
Or via Yarn:
```bash
yarn add react-atmospheres
```
## 🛠️ Usage
```tsx
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](https://github.com/sinf4er)
*Made with ❤️ by your friendly neighborhood frontend developer.*