solid-snowfall v0.3.1

Solid Snowfall

A solid component that creates a snowfall effect

• Live Example
• Demo Playground

Installation

With npm

npm i solid-snowfall

With yarn

yarn add solid-snowfall

Or wit pnpm

pnpm add solid-snowfall

Usage

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

import { render } from "solidjs/web";
import SnowFall from "solid-snowfall";

render(
  () => (
    <>
      <SnowFall />
  ),
  document.getElementById("root") as HTMLDivElement,
);

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.

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 by passing in an overriding styles object:

<Snowfall
  style={{
    position: 'fixed',
    top: 0,
    bottom: 0,
    right: 0,
    left: 0
  }}
/>