PixelSnow
pixel-snowRaymarches a depth-faded pixel snow field with square, dot, or snowflake particles.
Usage
Basic usage
Put it into the relative overflow-hidden container; the default square pixel snow, the color is adaptive according to the brightness of the background behind you (dark bright snow / light dark snow).
<div className="relative h-56 overflow-hidden rounded-xl bg-neutral-950">
<PixelSnow />
<div className="relative z-10 flex h-full items-center justify-center text-white/80">
PixelSnow
</div>
</div>Shape variant
variant supports three snowflake shapes: square (square) / round (dot) / snowflake (six-armed snowflake).
<>
<PixelSnow variant="snowflake" density={0.45} speed={1.6} />
<PixelSnow variant="round" pixelResolution={90} density={0.4} />
</>Retro large mosaic
Decrease pixelResolution (the number of "large pixels" cut horizontally) to make the mosaic blocks larger and have a stronger retro feel.
<PixelSnow variant="round" pixelResolution={90} density={0.4} />Customized cold blue · slow wallpaper
color Connect to any CSS color to lock the snowflake tone; slow speed + moderate density as the snow background of the title area.
Hulian component library
Pixel Snow · Light and Dark Adaptive
<div className="relative h-56 overflow-hidden rounded-xl bg-neutral-950">
<PixelSnow color="oklch(0.85 0.08 230)" speed={0.7} density={0.3} />
<div className="relative z-10 flex h-full flex-col items-center justify-center gap-1">
<p className="text-lg font-semibold text-white">Hulian Component Library</p>
<p className="text-xs text-white/60">Pixel Snow · Light and Dark Adaptive</p>
</div>
</div>When to Use
Use it for a falling-snow background on holiday pages, winter campaigns, or login screens. It provides depth fading and adaptive contrast against the surface behind it. For a regular dot field, use DotPattern; for a general animated retro pixel field, use PixelBlast.
Import
import { PixelSnow } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| variant | "square" | "round" | "snowflake" | "square" | Snowflake shape: square pixel / dot / six-arm snowflake |
| color | string | Adaptive (--color-foreground, inverted on low contrast) | Snowflake color. The default adapts to the backdrop so snow stays light on dark surfaces and dark on light surfaces |
| flakeSize | number | 0.01 | Snowflake base size (screen space ratio); the bigger, the thicker |
| minFlakeSize | number | 1.25 | Minimum projection size of distant snowflakes to prevent sub-pixels from disappearing |
| pixelResolution | number | 200 | Number of large pixels across the viewport; lower values create larger, more retro blocks |
| speed | number | 1.25 | Falling speed factor; the larger it is, the faster it passes through the field of view |
| depthFade | number | 8 | Depth of field fade intensity; the larger the distance, the faster the snow attenuation and the stronger the depth |
| farPlane | number | 20 | The furthest clipping distance of the light step; the larger the number, the more visible layers (the higher the performance cost) |
| brightness | number | 1 | Overall brightness ratio |
| gamma | number | 0.4545 | Gamma correction index (≈1/2.2 sRGB approximation) |
| density | number | 0.3 | Snowflake density (snow probability threshold for each grid); the larger, the denser. Recommended 0.05–0.6 |
| direction | number | 125 | Wind direction angle (degrees), determines the lateral drift direction |
| className | string | — | Passthrough to root container (or reduced-motion fallback div) |
Slots
| Slot | Type | Description |
|---|---|---|
| fallback | ReactNode | reduced-motion / static alternative content without WebGL; default white point + difference mixed static lattice snow |
Usage Guidelines
- The component covers the full canvas. The parent container must be `relative`, and overlay content must use
relative z-10; otherwise the canvas can cover it. See [[webgl-canvas-rendered-but-invisible-negative-zindex-covered]]. colordefaults to adaptive color selection based on the actual background color behind it. However, if the component is placed in a container that is opposite to the global theme (such as a dark box under a bright theme), the adaptation is inferred based on the token - explicitly passingcoloris more stable when the color is conflicting.- WebGL client component (
"use client"); only fallback is rendered during the SSR phase. - Headless screenshots can capture a still or blank frame when rAF is throttled. Verify falling motion on a real device or with Playwright measurements; see [[recharts-headless-screenshot-blank-clippath-animation-starved]].
Related
DotPattern · GridPattern · StripedPattern · Spotlight · RetroGrid · Ripple
Playground
<div className="relative h-56 overflow-hidden rounded-xl"
style={{ background: "oklch(0.13 0.02 255)" }}>
<PixelSnow
variant="square"
density={0.3}
speed={1.25}
pixelResolution={200}
direction={125}
/>
</div>