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! π
βοΈπ