<snow-fall>

A web component to add snow to your web site (or to an element on your web site). Based off of this Codepen from alphardex.

• Demo
• Related blog post

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 text content instead

Added in v1.0.3

<snow-fall text="❄️"></snow-fall>
<!-- works with --snow-fall-size too -->

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>