Snow

The Snow effect simulates falling snowflakes over a background image with a foreground overlay. Each flake drifts downward with a sinusoidal swirl pattern and is affected by a global wind oscillation. Flakes that land on the foreground image accumulate and persist, while flakes that reach the bottom or hit a non-transparent foreground pixel stop and freeze in place before being recycled.

Particle-based snow effects were a popular element in late-1990s web design, originally implemented as Java applets. The flakes vary in brightness (shades of white/grey) and each has its own swirl phase, creating a natural, organic snowfall look.

Originally a Java applet (1998). The original Java applet code was transpiled to JavaScript/Canvas in 2026 so the effect can run in modern browsers without a Java plugin. The JavaScript version uses Canvas pixel manipulation with true color rendering.

Features

Falling snowflakes with sinusoidal swirl and wind oscillation
Configurable number of flakes and wind strength
Foreground image overlay (flakes land on non-transparent pixels)
Background image with parallax snow effect
Flakes freeze and accumulate on foreground objects
True color rendering (24-bit RGB via Canvas)
60 fps frame limit via requestAnimationFrame

Parameters (SNOW_CFG)

Name	Type	Description	Default
`foreground`	string	ID of hidden foreground `<img>` element	`"fgImg"`
`background`	string	ID of hidden background `<img>` element	`"bgImg"`
`flakes`	int	Number of snowflakes	100
`windStrength`	int	Strength of wind oscillation	40

Code Example

<canvas id="game" width="180" height="160"></canvas>
<img id="fgImg" src="snowman4.gif" style="display:none">
<img id="bgImg" src="snowsky.jpg" style="display:none">
<script src="snow.min.js"></script>

Original Applet

Originally a Java applet (1998). The original used Java’s MemoryImageSource with a DirectColorModel for pixel-level rendering and PixelGrabber to scan the foreground image. The JavaScript version uses Canvas ImageData for equivalent pixel manipulation.