Real Snow - Framer Template

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.