# Snowfall

Aperveil / Light, shaped for the web.

Collection: Free, available now.

A falling snow background for React and the web: flakes in six depths, lit by a lamp, out of focus up close, with a transparent mode to snow over your site, rendered live in WebGPU.

[Aperveil integration guide](https://www.aperveil.com/docs)

## What it does

Snowfall is snow falling through a lamp-lit night in six depths. Every flake falls at the same real speed, so on screen the far ones are small, sharp and slow and the near ones large, quick and soft. Up close they are crystals: six arms 60° apart with side branches running parallel to the neighboring arms, as ice grows, each turning slowly and tilting as it sways, so it is seen at a slant and flashes when its face meets the lamp. Each flake flutters about once a second in its own phase and, in the frame's exposure, the far ones draw a short streak slanted by the wind. A lamp lights the flakes near it and the haze around it, so the snow is brightest where the light reaches it; under a pale sky, daylight lights it all. The cursor stirs the air and pushes the flakes aside, and the sky can be turned off so the snow falls over your own page.

## Choose it for

Turn a winter sale, a holiday campaign, a ski resort or a seasonal greeting into a scene, or keep your page as it is and let the snow fall over it: with the sky off, only the flakes are drawn.

## Limits

Snowfall draws falling snow, not a scene: there is no ground, no settling drift and no flake landing on your page's elements. The near crystals share one stellar-dendrite design, varied in their branches, turn and tilt; they are not photographs of real snowflakes.

## Current look

Default. Color Looks change colors only; motion, geometry and typography remain unchanged.

[Open editor](https://www.aperveil.com/shaders/snowfall/edit?look=default)

## Install

Install editable source with the CLI; it installs shared dependencies automatically. Free needs no login. ZIP Export Kits are also available.

```sh
npx @aperveil/cli add shader snowfall --framework react
```

Every control in the editor is a typed prop. Leave a prop out to keep the value you exported; change one and the running shader updates without restarting. Give the surface a size and pass fallback for browsers without WebGPU.

```tsx
"use client";

import Snowfall from "./components/aperveil/snowfall/Snowfall";

export default function Hero() {
  return (
    <Snowfall
      className="hero-shader"
      density={0.6} skyTop="#070d24ff"
      fallback={<div className="hero-shader-fallback" />}
    />
  );
}

// .hero-shader { width: 100%; height: 560px; }
```

Component props: `skyTop`, `skyBottom`, `snowColor`, `lightColor`, `density`, `flakeSize`, `blur`, `streak`, `wind`, `sway`, `lightPosition`, `glow`, `haze`, `flowSpeed`, `interaction`, `opacity`, `backgroundOpacity`, `className`, `style`, `paused`, `fallback`, `onReady`, `onError`.

### Vue and Nuxt

```sh
npx @aperveil/cli add shader snowfall --framework vue
```

```vue
<script setup lang="ts">
import Snowfall from "./components/aperveil/snowfall/vue/Snowfall.vue";
</script>

<template>
  <Snowfall class="hero-shader" :density="0.6" sky-top="#070d24ff">
    <template #fallback><div class="hero-shader-fallback" /></template>
  </Snowfall>
</template>

<!-- .hero-shader { width: 100%; height: 560px; } -->
```

Vue 3.5 or newer, Nuxt included: it renders an empty canvas on the server and starts in the browser, so it needs no <ClientOnly>. Same props as the React component.

### Plain HTML

```html
<script type="module" src="./aperveil-snowfall.js"></script>

<aperveil-snowfall class="hero-shader" density="0.6" sky-top="#070d24ff">
  <div slot="fallback" class="hero-shader-fallback"></div>
</aperveil-snowfall>

<style>
  .hero-shader { display: block; width: 100%; height: 560px; }
</style>
```

No install and no build step: keep the two files of the kit's html folder together.

### WordPress

Download `aperveil-shader-snowfall.zip` from the editor (Install, then WordPress) and upload it under Plugins, Add New, Upload Plugin. WordPress 6.5 or newer: a plugin with a block that holds your own content in front of the shader, and a shortcode for page builders. In the block editor, add the "Snowfall" block (Design) and place your blocks inside it; in a page builder, use the shortcode:

```html
[aperveil_snowfall height="560px" overlay="20"]
  <h2>Your headline</h2>
  <p>Your text, in front of the shader.</p>
[/aperveil_snowfall]
```

### Framer

Copy `Snowfall.tsx` from the editor (Install, then Framer); it opens on the values you chose. In Framer, add a new code file (Assets, Code), replace its sample code with the copy, then drag Snowfall onto the canvas: its Color Looks and every control are in the property panel. [Framer guide](https://www.aperveil.com/docs/framer).

Raw WGSL is included for a custom WebGPU host; it is not CSS. Keep semantic headings and links in HTML.

## Controls

- Sky (`skyTop`, color): The night at the top of the frame. Its alpha, with Background opacity, sets how much sky is drawn.
- Horizon (`skyBottom`, color): The night toward the bottom of the frame.
- Snow (`snowColor`, color): The color of the flakes.
- Lamp (`lightColor`, color): The lamp's light, on the flakes near it and in the haze around it.
- Density (`density`, slider): How much snow is falling.
- Flake size (`flakeSize`, slider): Size of the flakes.
- Depth of field (`blur`, slider): How out of focus the nearest and farthest flakes are.
- Motion blur (`streak`, slider): The short streak each flake draws along its fall, as in a photograph.
- Wind (`wind`, slider): Sideways drift. Negative blows to the left.
- Flutter (`sway`, slider): How far each flake sways as it falls.
- Lamp position (`lightPosition`, xy): Where the lamp is. Flakes near it are brightest.
- Lamp (`glow`, slider): How strongly the lamp lights the flakes near it.
- Haze (`haze`, slider): The glow of the lamp in the falling snow.
- Speed (`flowSpeed`, slider): Speed of the fall.
- Stir (`interaction`, slider): How far the cursor pushes the flakes aside.
- Opacity (`opacity`, slider): Opacity of the whole effect over the page.
- Background opacity (`backgroundOpacity`, slider): Turn the sky down to snow over your own page.

## Compatibility

WebGPU rendering requires a supported browser and secure context: Chrome and Edge (Windows, macOS and ChromeOS; Chrome on Android 12 or newer), Safari 26 (Mac, iPhone and iPad) and Firefox (Windows (from 141) and Apple silicon Macs (from 145)). Firefox on Linux, Android and Intel Macs is still rolling it out (checked October 2026). The landing shows a real poster for the selected Look when live rendering is unavailable. The standard exported component does not bundle a poster fallback. Supply your own fallback in the host layout.

## Performance

3.408 ms GPU timestamp median; p95 3.473 ms. 1440x900 @ dpr 1.25; Apple M2 (8-core GPU), Metal driver on macOS Version 26.6.2 (Build 25G83); measured 2026-10-22. This is a recorded headless sample, not a browser FPS or mobile-performance guarantee.

## Questions

### Can I make it snow over my existing website?

Yes. Set Background opacity to zero and only the flakes are drawn, over whatever lies beneath the canvas. Place the canvas as a fixed layer that lets clicks through.

### Why are the near flakes crystals and the far ones points?

As through a camera focused a few meters out: the near flakes are large enough to show their six arms, softened by depth of field, and the far ones are sharp points. Depth of field sets how soft the near ones are, and Motion blur how long a streak the falling flakes draw.

### Can I control how heavy the snow is?

Density sets how much is falling, Flake size how large the flakes are, Wind how far they drift sideways and Speed how fast they fall. Visitors who ask for reduced motion see a still frame.

### What happens without WebGPU?

This landing shows a still poster of your selected Color Look. The raw WGSL needs a WebGPU host. Landing posters are not bundled in the Export Kit: add your own fallback around the exported component.

### Can I use this shader commercially?

Part of the Free collection for Aperveil 1.0. Public live preview and Color Looks are open. Free Export Kits do not require an account. Purchasing is not available yet. Follow the license notices supplied with the source you download. The planned Free collection permits personal and commercial interface projects.

## License

Part of the Free collection for Aperveil 1.0. Public live preview and Color Looks are open. Free Export Kits do not require an account. Purchasing is not available yet. Follow the license notices supplied with the source you download. The planned Free collection permits personal and commercial interface projects.

## Related shaders

- [Starfield](https://www.aperveil.com/shaders/starfield)
- [Particles](https://www.aperveil.com/shaders/particles)
- [Canopy Light](https://www.aperveil.com/shaders/canopy-light)