React Snowfall

A react component that creates a snowfall effect

• Live Example
• Demo Playground

Installation

With npm

npm i react-snowfall

Or with yarn

yarn add react-snowfall

Usage

Basic usage requires no properties - it will grow to fill the nearest relative positioned parent element.

import React from 'react'
import ReactDOM from 'react-dom'
import Snowfall from 'react-snowfall'

ReactDOM.render(
  <div style={{ height: 400, width: 400, background: '#282c34', position: 'relative' }}>
    <Snowfall />
  </div>,
  document.querySelector('#app'),
)

Configuration

Optional properties can be provided to customise the animation.

<Snowfall
  // The color of the snowflake, can be any valid CSS color.
  color="#fff"
  // Applied to the canvas element.
  style={{ background: '#fff' }}
  // Controls the number of snowflakes that are created (defaults to 150).
  snowflakeCount={200}
/>

All available properties are detailed below.

Property	Description	Default
changeFrequency	The frequency in frames that the wind and speed values will update.	200
color	The color of the snowflake, can be any valid CSS color.	'#dee4fd'
images	An array of images that will be rendered as the snowflakes instead of the default circle shapes.	undefined
radius	The minimum and maximum radius of the snowflake in pixels. The value for each snowflake will be randomly selected within this range.	[0.5, 3.0]
rotationSpeed	The minimum and maximum rotation speed of the snowflake (in degrees of rotation per frame). The rotation speed determines how quickly the snowflake rotates when an image is being rendered. The value for each snowflake will be randomly selected within this range.	[-1.0, 1.0]
snowflakeCount	The number of snowflakes to be rendered.	150
speed	The minimum and maximum speed of the snowflake (in pixels per frame). The speed determines how quickly the snowflake moves along the y axis (vertical speed). The value for each snowflake will be randomly selected within this range.	[1.0, 3.0]
style	Any style properties that will be passed to the canvas element.	undefined
wind	The minimum and maximum wind of the snowflake (in pixels per frame). The wind determines how quickly the snowflake moves along the x axis (horizontal speed). The value for each snowflake will be randomly selected within this range.	[-0.5, 2.0]
opacity	The minimum and maximum opacity of the snowflake. The value for each snowflake will be randomly selected within this range.	[1, 1]

Using Images

Instead of rendering colored circles you can instead pass in an array of image elements that will be randomly selected and used as the snowflake instead.

NOTE: If the images provided are not square they will be stretched into a 1:1 aspect ratio.

const snowflake1 = document.createElement('img')
snowflake1.src = '/assets/snowflake-1.png'
const snowflake2 = document.createElement('img')
snowflake2.src = '/assets/snowflake-2.jpg'

const images = [snowflake1, snowflake2]

const Demo = () => {
  return (
    <Snowfall
      // Applied to the canvas element
      style={{ background: '#fff' }}
      // Controls the number of snowflakes that are created (default 150)
      snowflakeCount={200}
      // Pass in the images to be used
      images={images}
    >
  )
}

Positioning

The snowfall container is absolute positioned and has the following default styles (see the definition):

position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

If you want the component to cover the entire screen then you can change the position to fixed and using vw/vh units by passing in an overriding styles object:

<Snowfall
  style={{
    position: 'fixed',
    width: '100vw',
    height: '100vh',
  }}
/>

Use Without React

Don't let the package name fool you (I haven't had time to rename everything yet). You can actually use this snowfall animation with any framework or even vanilla JS with the new SnowfallCanvas class, here's an example.

<style>
  html,
  body {
    background: #dedede;
    min-height: 100vh;
    min-width: 100vw;
    padding: 0;
    margin: 0;
  }

  #snowfall {
    pointer-events: none;
    background-color: transparent;
    position: absolute;
    inset: 0;
  }
</style>

<canvas id="snowfall" />

import { SnowfallCanvas } from 'react-snowfall/lib/SnowfallCanvas'

const canvas = document.querySelector('#snowfall')
const snowfall = new SnowfallCanvas(canvas)