Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

react-atmospheres

sinf4er77MIT0.1.0TypeScript support: included

A lightweight wrapper to add seasonal, themed visual effects in your React app.

react, animation, seasonal, effects, theme, atmospheres

readme

react-atmospheres

npm version Downloads/week Build Status License: MIT

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.