React Snow Twinkle

A beautiful React component that makes it easy to implement falling snow effects with twinkling animation.

Installation

Using npm:

npm install react-snow-twinkle

Or using yarn:

yarn add react-snow-twinkle

Project Overview

React Snow Twinkle is a lightweight and customizable React component that adds a mesmerizing snow effect to your web applications. Perfect for creating winter-themed websites or adding a magical touch to your user interface.

Key Features

• 🎨 Full Customization
  • Change snowflake shape (emoji, text etc.)
  • Adjust snowflake size (up to 100px)
  • Control falling speed (1-20)
  • Set opacity (0-1)
  • Change snowflake shape ("❄️" by default)
• ⚡ High Performance
  • Optimized animation rendering
  • Supports up to 700 snowflakes
  • Smooth movement
• 💻 Developer Friendly
  • Written in TypeScript for type safety
  • Easy component integration
  • Intuitive Props interface
• 🌐 Browser Compatibility
  • Supports modern browsers
  • Responsive design
  • Mobile-optimized

Usage

Basic Usage

import { Snowfall } from 'react-snow-twinkle';

function App() {
  return (
    <div>
      <Snowfall />
      {/* Your content */}
    </div>
  );
}

Custom Usage

import { Snowfall } from 'react-snow-twinkle';

function App() {
  return (
    <div>
      <Snowfall
        snowflakeCount={100}
        fallSpeed={8}
        flakeSize={15}
        opacity={0.8}
        flakeShape="*"
      />
      {/* Your content */}
    </div>
  );
}

Props Options

| Prop | Type | Default | Description | |------|------|---------|-------------| | snowflakeCount | number | 50 | Number of snowflakes on screen (max 700) | | fallSpeed | number | 2 | Snowflake falling speed (1-20) | | flakeSize | number | 10 | Snowflake size (in px, max 100px) | | opacity | number | 1 | Snowflake opacity (0-1) | | flakeShape | string | "❄️" | Snowflake shape (emoji, text, etc.) |

Contributing

We welcome contributions! If you'd like to contribute:

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Create a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Contact

If you have any issues or suggestions, please let us know through GitHub Issues.