Snow Flakes

PreviousNext

A dynamic animated snowflake background component with optional wind effect.

snow-flakes-default

Installation

pnpm dlx shadcn@latest add https://ui.dalim.in/r/styles/default/snow-flakes.json

Usage

import { SnowFlakes } from "@/components/ui/snow-flakes"
<SnowFlakes /> 

API Reference

Snow Flakes

Renders animated snowflakes with customizable size, opacity, speed, and optional wind.

PropTypeDefaultDescription
countnumber50Number of snowflakes rendered.
colorstring"#ffffff"Snowflake color.
speednumber1Speed multiplier for falling snow.
minSizenumber10Minimum snowflake size (px).
maxSizenumber20Maximum snowflake size (px).
minOpacitynumber0.3Minimum snowflake opacity.
maxOpacitynumber0.8Maximum snowflake opacity.
zIndexnumber-1Z-index for the snow layer.
windbooleantrueEnables wind effect on snowfall.
classNamestringAdditional Tailwind/CSS classes for wrapper.
childrenReactNodeContent to render above the snowfall.