127 Components
Snowfall
BackgroundsDepth-sorted Canvas 2D snowfall simulation where larger foreground particles fall faster with higher opacity while drifting horizontally on sine waves.
Snowfall · Depth Parallax
Depth-Sorted Snowfall
Larger foreground flakes fall faster with higher opacity while distant micro-flakes drift gently on horizontal sine waves.
140 Particles · Sine Drift · Z-Depth Velocity
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:lucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/snowfall.json"
Props
TypeScript props supported by <Snowfall />.
| Prop | Type | Default | Description |
|---|---|---|---|
| flakeCount | number | 140 | Number of snowflakes rendered on the canvas. |
| speed | number | 1 | Vertical fall speed multiplier. |
| wind | number | 0.3 | Horizontal wind velocity factor (-2 to 2). |
| maxSize | number | 4.2 | Maximum snowflake radius in pixels. |
| children | React.ReactNode | — | Optional foreground content rendered above the snowfall. |
| className | string | — | Additional Tailwind CSS classes for the container. |
Key Features
- Couples particle radius, opacity, and fall velocity to a depth factor (`0.2..1.0`) for natural 3D depth perception.
- Horizontal sine-wave oscillation (`Math.sin`) combined with configurable wind slant.
- Includes a Gentle Flurry / Winter Gale toggle in the default preview.
Keyboard & Accessibility
- Marks the `<canvas>` layer with `aria-hidden='true'`.
- High-contrast typography over the winter night backdrop.
- Interactive mode toggle button supports keyboard focus.