react-seasonal-effects

Lightweight, realistic snow and festive twinkle light effects for React and Next.js applications.

This library provides client-side visual effects and is designed to work safely with modern React and Next.js App Router.

✨ Included Components

• ❄️ SnowFalling — calm, realistic snowfall animation
• 💡 TwinkleLights — decorative twinkling lights for page headers

Both components use React hooks and browser APIs.

📦 Installation

npm install react-seasonal-effects

or

yarn add react-seasonal-effects

or

pnpm add react-seasonal-effects

✅ Correct Usage (Next.js App Router)

These components must run on the client.

1️⃣ Create a client-only wrapper component

"use client";

import { SnowFalling, TwinkleLights } from "react-seasonal-effects";

export default function SeasonalEffects() {
  return (
    <>
      <SnowFalling />
      <TwinkleLights />
    </>
  );
}

2️⃣ Use the wrapper in your layout or page (server-safe)

import SeasonalEffects from "@/components/SeasonalEffects";

export default function Layout({ children }) {
  return (
    <div>
      <SeasonalEffects />
      {children}
    </div>
  );
}

⚠️ Do NOT import SnowFalling or TwinkleLights directly into a Server Component.

⚠️ Important Notes

• These components use:
  • useRef
  • useEffect
  • <canvas>
  • browser APIs
• Therefore, "use client" is required
• Do not add "use client" to your entire layout — use a wrapper instead

🧪 React (Non-Next.js) Usage

In standard React apps (Vite, CRA, etc.):

import { SnowFalling, TwinkleLights } from "react-seasonal-effects";

function App() {
  return (
    <>
      <TwinkleLights />
      <SnowFalling />
    </>
  );
}

export default App;

No special setup is required.

🖥️ Browser Support

• Modern browsers with Canvas API
• Desktop and mobile supported

📄 License

MIT