A react component that creates a snowfall effect
With npm
npm i react-snowfall
Or with yarn
yarn add react-snowfall
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'),
)
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] |
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}
>
)
}
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',
}}
/>
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)