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.

Get Component

Preview

Get Started on Framer PRO for FREE

Click here to sign up, and get 3 Free months when upgrading your Framer Plan using code

partner25proyearly

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.