Snow

Renders a configurable canvas-based snowfall effect.

A configurable canvas-based snowfall effect with adjustable flake count, speed, wind, wobble, and optional accumulation. The canvas is transparent so whatever is behind it shows through, and pointer-events is set to none so the snow doesn't interfere with user interactions.

To use it, place <quiet-snow> inside a container with a set height, position it absolutely over existing content, or use the fullscreen attribute to show snow over the entire viewport.

<div id="snow__overview">
  <quiet-snow
    style="height: 300px; background: linear-gradient(to bottom, #0b1628, #1a3a5c); border-radius: 0.5rem;"
  ></quiet-snow>
</div>

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1.5rem; margin-block: 1rem;">
  <quiet-slider id="snow__overview-count" label="Flake count" min="20" max="1200" value="300" step="10" with-tooltip></quiet-slider>
  <quiet-slider id="snow__overview-speed" label="Speed" min="0.1" max="3" value="1" step="0.1" with-tooltip></quiet-slider>
  <quiet-slider id="snow__overview-wind" label="Wind" min="-2" max="2" value="0" step="0.1" indicator-offset="0" with-tooltip></quiet-slider>
  <quiet-slider id="snow__overview-wobble" label="Wobble" min="0" max="3" value="1" step="0.1" with-tooltip></quiet-slider>
  <quiet-slider id="snow__overview-max-size" label="Max size" min="1" max="10" value="2" step="0.5" with-tooltip></quiet-slider>
  <quiet-slider id="snow__overview-accumulation" label="Accumulation" min="0" max="60" value="0" step="1" with-tooltip></quiet-slider>
</div>

<quiet-button id="snow__overview-pause">Pause</quiet-button>

<script type="module">
  const snow = document.querySelector('#snow__overview quiet-snow');
  const pauseButton = document.getElementById('snow__overview-pause');

  const sliders = {
    count: document.getElementById('snow__overview-count'),
    speed: document.getElementById('snow__overview-speed'),
    wind: document.getElementById('snow__overview-wind'),
    wobble: document.getElementById('snow__overview-wobble'),
    maxSize: document.getElementById('snow__overview-max-size'),
    accumulation: document.getElementById('snow__overview-accumulation')
  };

  for (const [prop, slider] of Object.entries(sliders)) {
    slider.addEventListener('quiet-input', () => {
      snow[prop] = slider.value;
    });
  }

  pauseButton.addEventListener('click', () => {
    snow.paused = !snow.paused;
    pauseButton.textContent = snow.paused ? 'Resume' : 'Pause';
  });
</script>

Examples Jump to heading #

Customizing the effect Jump to heading #

Combine attributes to fine-tune the snowfall. Use count for the number of flakes, speed for the fall rate, wind to blow flakes sideways (negative blows left, positive blows right), and wobble for how much they sway.

Set the flake size with min-size and max-size, pile snow at the bottom with accumulation (a percentage of the component's height), and choose how snow first appears with mode (always scatters immediately, natural staggers in from the top). Change the flake color with the --snow-color custom property, including an alpha channel for translucency. It defaults to a soft, cool white that reads well over dark and photographic backgrounds.

<quiet-snow
  count="600"
  speed="2"
  wind="1.5"
  wobble="2"
  min-size="2"
  max-size="6"
  accumulation="20"
  mode="natural"
  style="--snow-color: #b3d9ffe6;"
></quiet-snow>

Pausing Jump to heading #

Add the paused attribute to stop spawning new flakes while existing ones continue to fall and settle.

<quiet-snow paused></quiet-snow>

Disabling Jump to heading #

Add the disabled attribute to fade out the snow and stop the animation loop.

<quiet-snow disabled></quiet-snow>

Fullscreen mode Jump to heading #

Set the fullscreen attribute to overlay the snow effect across the entire viewport. The effect is rendered with pointer-events: none so it won't interfere with page interactions, and a high z-index ensures it renders above other content.

<div id="snow__fullscreen">
  <quiet-snow
    fullscreen
    mode="natural"
    disabled
    count="800"
    speed="2.5"
    accumulation="15"
    style="--snow-color: #3568aae6;"
  ></quiet-snow>

  <quiet-color-input label="Snow color" value="#3568aae6" with-alpha style="margin-block-end: 1.5rem;"></quiet-color-input>

  <quiet-button class="toggle-button">Start fullscreen snow</quiet-button>  
</div>

<script type="module">
  const container = document.getElementById('snow__fullscreen');
  const snow = container.querySelector('quiet-snow');
  const toggleButton = container.querySelector('.toggle-button');
  const colorInput = container.querySelector('quiet-color-input');

  toggleButton.addEventListener('click', () => {
    snow.disabled = !snow.disabled;
    toggleButton.textContent = snow.disabled ? 'Start fullscreen snow' : 'Stop fullscreen snow';
  });

  colorInput.addEventListener('quiet-input', () => {
    snow.style.setProperty('--snow-color', colorInput.value);
  });
</script>

API Jump to heading #

Importing Jump to heading #

The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.

import 'https://cdn.quietui.org/v5.3.1/components/snow/snow.js';

import '/path/to/quiet/components/snow/snow.js';

Properties Jump to heading #

Snow has the following properties that can be set with corresponding attributes. In many cases, the attribute's name is the same as the property's name. If an attribute is different, it will be displayed after the property. Learn more about attributes and properties

Methods Jump to heading #

Snow supports the following methods. You can obtain a reference to the element and call them like functions in JavaScript. Learn more about methods

CSS custom properties Jump to heading #

Snow supports the following CSS custom properties. You can style them like any other CSS property. Learn more about CSS custom properties