Snow Background for React

Snow falls over a soft winter sky. Near flakes are bigger, brighter and faster and sway as they fall; a far layer of tiny flakes drifts behind them, so the snowfall has depth. The flakes are laid out from their index when the page renders and moved by keyframes the install adds to your stylesheet, so no JavaScript runs while it snows.

Use it for a seasonal launch, a holiday card or a winter hero. For fast streaks and optional lightning use Rain; for golden motes drifting through a shaft of sunlight, Pollen; for the same fall in colour, Confetti.

Installation

Usage

import { Snow } from "@/components/ui/snow";

<Snow className="min-h-[420px]">
  <h1>Let it snow</h1>
</Snow>

Snow is a container: put your content inside and the snow falls behind it. It fills the box you give it, so set its height (min-h-[420px]), or className="fixed inset-0 -z-10" to cover the whole page.

Demos

Night sky

skyColor sets the top of the sky; toward the ground it takes a faint haze of the flakes' colour. A dark blue sky with white flakes stays the same night in light and dark mode.

Blizzard

count is how many near flakes fall at once (80, up to 150), wind how far a flake drifts sideways for each height it falls, and speed multiplies every fall. Together they turn a quiet snowfall into a storm.

Accessibility

The snow is decoration: the whole layer is hidden from screen readers and ignores the pointer, and your content inside reads as usual. With reduced motion every flake stops where it is, so the box shows a still snowfield on its sky rather than an empty one. Nothing flashes.

In light mode the default sky is an overcast grey, so white flakes show. Text in the foreground colour stays above 10:1 on it, but muted text falls under 3:1 near the top: keep body text in text-foreground, or set skyColor to a lighter or darker sky.

FAQ

API Reference