Real Snow
Snow with real gravity that piles up at the bottom, then fades away on a timer for an infinite, performant winter effect. Fully configurable and responsive.
Make it with Workshop
Build your own component with AI
About the component
Snowfall Physics renders thousands of lightweight flakes on a canvas with gravity, wind and a column-based pile. Flakes fall, collide with the pile, settle, and slightly compact adjacent columns for a natural drift. When a flake first enters the bottom half of the layer, its life timer starts; after the set time it fades and is removed, subtracting its height from the pile so the snow never grows unbounded.
Tips
Gentle snow → lower Gravity, smaller radii, fewer Flakes per sec.
Blizzard → increase Flakes per sec and Gravity.
Use Transparent bg when layering over content.
Raise Quality on desktop, reduce Columns on mobile.
Features
Auto pause: Automatically pauses when the layer is not visible in the viewport to boost performance.
Flakes per sec: Number of flakes spawned per second. Higher = denser snowfall. Balance with Columns for performance.
Gravity: Downward acceleration in px/s². Controls fall speed and pile compression feel.
Wind: Horizontal acceleration in px/s². Positive → drift right, negative → drift left.
Min r: Minimum flake radius in px. Sets the lower bound for random flake size.
Max r: Maximum flake radius in px. Sets the upper bound for random flake size.
Life sec: How long a flake can exist after it first enters the bottom half of the layer. When this time elapses it will start fading.
Fade sec: Duration of the fade-out once a flake’s life ends.
Spawn jitter: Horizontal randomness applied to spawn positions. Adds natural variation across the top edge.
Pile columns: How many vertical columns make up the snow pile. More columns look smoother but use more CPU.
Slide ease: How strongly settled flakes slide toward lower neighboring columns before stopping. Higher values produce more natural sloping.
Transparent bg: If on, clears the canvas every frame so the snow composites over whatever is behind the layer.
Background: Solid background fill for the canvas when Transparent bg is off.
Seed: Random seed for repeatable results. Change to reshuffle the snowfall pattern.
Quality: Upper limit for devicePixelRatio used by the canvas. Increase for sharper dots, reduce to save GPU on mobile.
Pause: Stops spawning and physics updates. Rendering holds the last frame.
