<snow-fall> Web Component

<snow-fall> is a zero-dependency, JavaScript web component to add snow to your web site (or to an element on your web site). This is a web component implementation of this Codepen from alphardex.

• Demo
• Source code on GitHub

Usage

<script type="module" src="snow-fall.js"></script>

<!-- Add snow to the page -->
<snow-fall></snow-fall>

<!-- Add snow to the first child element -->
<snow-fall>
	<div style="width: 300px; height: 300px">
</snow-fall>

Installable from npm:

npm install @zachleat/snow-fall

Use with <is-land>

This is best used with <is-land> to respect user preferences for reduced motion:

<is-land on:media="(prefers-reduced-motion: no-preference)">
	<snow-fall></snow-fall>
</is-land>

Change the snow color

<!-- Change snow color -->
<snow-fall style="--snow-fall-color: rebeccapurple"></snow-fall>

Change the number of snowflakes

<!-- Default: 100 -->
<snow-fall count="200"></snow-fall>

Change the size of the snowflakes

Added in v1.0.2

<!-- Default: 10px -->
<snow-fall style="--snow-fall-size: 20px"></snow-fall>

Force the rendering mode (page/element)

You probably don’t need this.

<snow-fall mode="page"></snow-fall>
<snow-fall mode="element"></snow-fall>