Skip to content

Snowfall

Snow falling in three depths: big soft flakes in front, tiny slow ones behind, drifting on the wind. Loops perfectly.

Effect, V1 Effects2DSeamless loop, verified58 lines of codev1.0.0

In Nature & weather

Next: Falling LeavesSurprise me

Snowfall preview
Starting live preview…
00:00:00:00 / 00:00:00:01

Live, running the real source.

Your current settings go with it. Combine several clips and hand them over together from your sequence.

Effect controls

Presets

220
0.4
6

The preview runs the same code your AI receives. These settings travel with the hand-off.

Info

What it is

Snow falling in three depths. Near flakes are big, soft and fast, middle ones medium, far ones tiny and slow, so the scene has depth; each drifts sideways on its own slow sine and the near flakes are slightly blurred as if out of focus. Every flake falls a whole number of screen heights per loop, so the loop is exact. It draws over whatever is on the canvas. Choose the number of flakes, the wind, the sky colours and the seed.

Reuse it in your own idea

  • Winter title: Winter night.
  • Storm: Blizzard.
  • Soft greeting: Gentle, dusk.

Which part is reusable

src/snowfall.js is the ingredient your AI reuses. demo.js is only the example scene around it, and uses the demo harness only for the demo.

Good to know

  • Flakes do not collide or settle; they leave the bottom and re-enter at the top.
  • The backdrop in the demo is not part of the reusable code.

Technical details

Technical details
Implementation
Canvas 2D — plain browser JavaScript, no libraries · ES module src/snowfall.js
Exports
  • createSnowfall({ flakes?, wind?, colour?, seed? }) => { draw(ctx, info, width, height) }
Dependencies (exact)
  • apw-runtime@1.0.0 (demo) — Demo harness. The reusable source has no dependencies.
How it fits a scene

Coordinates: Flakes are placed in fractions of the canvas; sizes scale with the smaller side.

Lighting: None; near flakes are soft radial gradients.

Timing: Pure function of info.progress.

Output
1080×1080, 30 fps, 10 s · procedural (computed from the frame number) · seamless loop — Every flake falls a whole number of screen heights per loop and sways in whole cycles, so the last frame meets the first.
Tested
Rendered 300 frames on 2026-10-08 in Chrome 154.0.8037.97 headless on Linux 7.0.0-38-generic (x64), Node 22.14.0 (Canvas 2D). Same frame twice from fresh pages: identical. Loop: Frame 0 vs end state (progress 1): mean |Δ| 0.0000, max |Δ| 0 of 255.
Performance
Up to 600 small shapes per frame; about 2 ms. The near flakes use radial gradients, the slowest part.
Export a video yourself
Download the source, then in the folder: npm install npm run render -- snowfall/1.0.0 --out my-video.mp4Needs Node 18+, ffmpeg and Chrome/Chromium. Add --params my-settings.json (from Copy settings) for your own settings.
Version
1.0.0 · sha256:00d166a92caa7f42…
Files
License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder. License details
Provenance
Original code written for AI Pixel Wizard in October 2026, to the catalog quality bar (docs/QUALITY.md).
BinMore like this

Campfire

Background3DSeamless loop12 seconds

Jellyfish

Background3DSeamless loop12 seconds