❄️ Snowify

A plug-and-play React library that instantly transforms any React application into a Christmas/winter-themed website with beautiful animations and festive decorations.

✨ Features

• 🎄 One-component setup - Just add <Snowify /> to your app
• ❄️ Beautiful snowfall animation - Canvas-based, GPU-optimized performance
• 🎅 Christmas decorations - Trees, lights, ornaments, and more
• 🎨 Automatic UI theming - Festive styling for buttons and interface elements
• ♿ Accessibility first - Respects prefers-reduced-motion
• ⚡ Performance optimized - Zero memory leaks, clean unmounting
• 🔧 Highly configurable - Extensive customization options
• 📱 Responsive design - Works perfectly on all screen sizes
• 🎯 SSR compatible - Works with Next.js, Vite, and all React frameworks
• 🌲 Tree-shakable - Only includes the features you use

🚀 Quick Start

🌐 Try it First

Live Demo →

Installation

npm install snowify
# or
yarn add snowify
# or
pnpm add snowify

Basic Usage

import { Snowify } from "snowify";

function App() {
  return (
    <>
      <Snowify />
      {/* Your app content */}
      <header>
        <h1>My Website</h1>
        <button>Get Started</button>
      </header>
      <main>
        <p>Welcome to my festive website!</p>
      </main>
    </>
  );
}

That's it! Your entire website now has a beautiful Christmas theme with falling snow and festive decorations.

🎛️ Configuration Options

Snowify is highly configurable. Here are all available props:

<Snowify
  enabled={true}                    // Enable/disable Snowify
  intensity="medium"                // Snowfall intensity: "low" | "medium" | "high"
  decorations={true}                // Show Christmas decorations
  decorateButtons={true}            // Add festive styling to buttons
  decorateScrollbar={false}         // Theme the scrollbar (experimental)
  sound={false}                     // Ambient sound effects (coming soon)
  zIndex={9999}                     // CSS z-index for snow and decorations
/>

Advanced Examples

Minimal Setup

<Snowify
  intensity="low"
  decorations={false}
  decorateButtons={false}
/>

Full Christmas Experience

<Snowify
  intensity="high"
  decorations={true}
  decorateButtons={true}
  decorateScrollbar={true}
  zIndex={9999}
/>

User-Configurable Theme

function FestiveApp() {
  const [isFestive, setIsFestive] = useState(true);
  const [intensity, setIntensity] = useState<'low' | 'medium' | 'high'>('medium');

  return (
    <>
      {isFestive && (
        <Snowify
          enabled={isFestive}
          intensity={intensity}
          decorations={true}
          decorateButtons={true}
        />
      )}

      <button onClick={() => setIsFestive(!isFestive)}>
        {isFestive ? '🎄 Disable Festive Mode' : '🎅 Enable Festive Mode'}
      </button>
    </>
  );
}

🎨 What Snowify Does

1. Snowfall Animation

• Canvas-based rendering for smooth performance
• GPU-accelerated animations that don't block the main thread
• Three intensity levels: Low (50 flakes), Medium (150 flakes), High (300 flakes)
• Realistic physics with wind effects and natural movement
• Responsive - automatically adjusts to window resizing

2. Christmas Decorations

• Animated Christmas trees positioned around the screen edges
• Twinkling lights in multiple colors (red, gold, green, blue)
• Hanging ornaments (ribbons, gifts, stars, bells)
• Non-interactive overlay - won't interfere with user interactions
• Mobile-optimized - fewer decorations on smaller screens

3. UI Enhancement

• Button theming with subtle snow overlays and hover effects
• Festive hover animations with smooth transitions
• CSS variables for easy customization
• Preserves existing styles - doesn't override your app's design

4. Accessibility

• Respects prefers-reduced-motion - automatically disables animations
• No flashing or seizure-inducing effects
• Keyboard navigation friendly
• Screen reader compatible

🔧 Advanced Usage

Using Individual Components

For more control, you can use individual components:

import { SnowCanvas, Decorations } from 'snowify';

function CustomTheme() {
  return (
    <>
      <SnowCanvas intensity="high" enabled={true} zIndex={9999} />
      <Decorations enabled={true} zIndex={9998} />
    </>
  );
}

Utility Functions

import {
  injectStyles,
  removeStyles,
  prefersReducedMotion,
  useReducedMotionListener
} from 'snowify';

// Check if user prefers reduced motion
const shouldAnimate = !prefersReducedMotion();

// Listen for changes in motion preferences
useReducedMotionListener((prefersReduced) => {
  console.log('Reduced motion preference changed:', prefersReduced);
});

Custom Styling

You can override Snowify's CSS variables:

:root {
  --snowify-primary-color: #your-brand-color;
  --snowify-accent-color: #your-accent-color;
  --snowify-gold-color: #your-gold-color;
  --snowify-z-index: 9999;
  --snowify-decoration-scale: 1.2;
}

📱 Framework Compatibility

Snowify works with all major React frameworks:

Next.js (App Router)

// app/layout.tsx
import { Snowify } from 'snowify';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <Snowify />
        {children}
      </body>
    </html>
  );
}

Next.js (Pages Router)

// pages/_app.tsx
import { Snowify } from 'snowify';

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Snowify />
      <Component {...pageProps} />
    </>
  );
}

Vite React

// src/App.tsx
import { Snowify } from 'snowify';

function App() {
  return (
    <>
      <Snowify />
      {/* Your app content */}
    </>
  );
}

Create React App

// src/index.js or App.js
import { Snowify } from 'snowify';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <Snowify />
    <App />
  </React.StrictMode>
);

⚡ Performance Notes

• Memory efficient - Automatic cleanup on component unmount
• GPU accelerated - Canvas rendering for smooth animations
• ResizeObserver API - Efficient window resize handling
• RequestAnimationFrame - Optimized animation loop
• CSS containment - Better browser optimization
• Tree-shakable - Dead code elimination in production builds

Performance Tips

1. Use appropriate intensity levels

   <Snowify intensity="low" /> // Best performance

2. Disable decorations on low-end devices

   const isLowEndDevice = /* your detection logic */;
   
   <Snowify
     decorations={!isLowEndDevice}
     intensity={isLowEndDevice ? 'low' : 'medium'}
   />

3. Leverage reduced motion

   // Snowify automatically respects prefers-reduced-motion

🎯 Best Practices

DO

• ✅ Place Snowify at the root level of your app
• ✅ Let it wrap your entire application for best effect
• ✅ Test on mobile devices (it's optimized!)
• ✅ Consider your users' accessibility needs
• ✅ Use appropriate intensity levels for your use case

DON'T

• ❌ Wrap multiple instances (one is enough)
• ❌ Use conflicting z-index values
• ❌ Override Snowify's internal CSS classes directly
• ❌ Expect it to work without React 18+

🐛 Troubleshooting

Common Issues

Q: Snow isn't showing up

// Check if enabled prop is true
<Snowify enabled={true} />

// Check for reduced motion preferences
// Snowify automatically disables animations for users who prefer reduced motion

Q: Styles aren't applying

// Make sure you're using React 18+
npm install react@^18.0.0 react-dom@^18.0.0

Q: Performance issues on mobile

// Use lower intensity for mobile
<Snowify
  intensity="low"
  decorations={false}
  decorateButtons={false}
/>

Q: Not working with SSR

// Snowify works automatically with SSR
// The component handles server-side rendering gracefully

Browser Support

• ✅ Chrome 88+
• ✅ Firefox 78+
• ✅ Safari 14+
• ✅ Edge 88+

📄 License

MIT © Snowify Team

🤝 Contributing

We love contributions! Please see our Contributing Guide for details.

📞 Support

• 📖 Documentation
• 🐛 Issue Tracker
• 💬 Discussions

Made with ❤️ and ❄️ for the festive season!