Christmas snow and firecracker effects for React (December only)
npm install react-christmas-effectsAdd elegant Christmas snowfall, one-time greeting text, and a single firecracker burst to your React app — automatically shown only in December.
Built with Framer Motion for smooth, accessible animations.
✔ Lightweight
✔ Elegant (no noisy animations)
✔ December-only by default
✔ Text & firecracker shown once
✔ Works with Vite, CRA, Next.js (client-side)
---
❄️ Snow falling continuously
🎄 Greeting text fades in once
🎆 Firecracker bursts once
> Automatically active from December 1st → December 31st
---
``bash`
npm install react-christmas-effects
or
`bash`
yarn add react-christmas-effects
or
`bash`
pnpm add react-christmas-effects
---
You must import the bundled CSS once in your app:
`js`
import "react-christmas-effects/dist/index.css";
This is required for layout and styling.
---
`jsx
import { ChristmasEffects } from "react-christmas-effects";
import "react-christmas-effects/dist/index.css";
function App() {
return
}
export default App;
`
That’s it 🎉
Your app will now show Christmas effects only in December.
---
To preview effects outside December:
`jsx`
---
| Prop | Type | Default | Description |
| ---------------- | --------- | ------------------------- | --------------------------------------- |
| text | string | "🎄 Merry Christmas 🎄" | Greeting text shown once |snowflakeCount
| | number | 200 | Number of falling snowflakes |showText
| | boolean | true | Show / hide greeting text |fireworks
| | boolean | true | Enable one-time firecracker burst |startDay
| | number | 1 | Start day in December |endDay
| | number | 31 | End day in December |force
| | boolean | false | Force enable regardless of current date |
---
`jsx`
---
`jsx`
---
`jsx`
---
`jsx`
---
`jsx`
---
* Uses react-snowfall for snow ❄️
* Uses canvas-confetti for firecracker 🎆
* Uses Framer Motion for smooth text animation
* Text & firecracker run only once per page load
* Snow runs continuously
* Automatically disables outside December
* Uses position: fixed overlaypointer-events: none
* Does not block user interaction ()
---
| Framework | Supported |
| --------- | -------------------- |
| React | ✅ |
| Vite | ✅ |
| CRA | ✅ |
| Next.js | ✅ (client-side only) |
| Remix | ✅ (client-side) |
> ⚠️ For Next.js, render inside a client component.
---
✔ Respects prefers-reduced-motion
✔ No event listeners on DOM
✔ No layout shift
✔ Lightweight canvas effects
✔ Safe for production use
---
* Ensure CSS is imported:
`js``
import "react-christmas-effects/dist/index.css";
* Check z-index conflicts
* Ensure component renders on client side
* Runs only in browser (not SSR)
* Fires only once per page load
---
MIT © 2025
Free to use in personal and commercial projects.
---
PRs are welcome!
Ideas:
* 🎆 New Year mode
* 🔊 Optional sound effects
* 🎨 Theme customization
* 🌙 Dark mode variants
---
If you like this package, please ⭐ the GitHub repo
and share it with the community 🎄✨
---
Happy Coding & Merry Christmas! 🎅❄️🎆