snow-flakes-default
Snow Flakes
"use client"
import { SnowFlakes } from "@/components/ui/backgrounds/snow-flakes"
export function DemoOne() {
return (
<div className="relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-xl border bg-blue-700">
<SnowFlakes
count={150}
speed={0.1}
minSize={1}
maxSize={40}
minOpacity={0}
maxOpacity={1}
color={"#ffffff"}
wind={true}
zIndex={1}
/>
<span className="pointer-events-none z-10 text-center text-7xl leading-none font-semibold tracking-tighter whitespace-pre-wrap text-white">
Snow Flakes
</span>
</div>
)
}
pnpm dlx shadcn@latest add "https://ui.dalim.in/r/snow-flakes-default.json"
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.
Prop | Type | Default | Description |
---|---|---|---|
count | number | 50 | Number of snowflakes rendered. |
color | string | "#ffffff" | Snowflake color. |
speed | number | 1 | Speed multiplier for falling snow. |
minSize | number | 10 | Minimum snowflake size (px). |
maxSize | number | 20 | Maximum snowflake size (px). |
minOpacity | number | 0.3 | Minimum snowflake opacity. |
maxOpacity | number | 0.8 | Maximum snowflake opacity. |
zIndex | number | -1 | Z-index for the snow layer. |
wind | boolean | true | Enables wind effect on snowfall. |
className | string | – | Additional Tailwind/CSS classes for wrapper. |
children | ReactNode | – | Content to render above the snowfall. |