Fancy snowfall React component
npm install react-snowflakes> “Let it snow on your React website!” – Frank Sinatra1
``jsx
import {DepthOfFieldSnowfall} from 'react-snowflakes';
// Insert anywhere in your code and that's it!
// Position must be relative or absolute,
// because snowflakes are positioned absolutely.
position: 'relative',
width: '300px',
height: '300px'
}}/>
`
You can have more control over snowflakes with Snowfall:
`jsx
import {Snowfall, Snowflake} from 'react-snowflakes';
position: 'relative',
width: '300px',
height: '300px'
}}
snowflakeFactory={index => {
const size = index / count;
const w = 5 + 10 * size + 'px';
return (
ySpeedPrc={.1 * size}
style={{
width: w,
height: w,
borderRadius: '50%',
backgroundColor: 'white',
opacity: .2 + .8 * size,
filter: blur(${Math.round(Math.max(size - .5, 0) * 15)}px)``
}}/>
)
}}/>
The code is available under MIT licence.