Components
Loading preview...
Simply import and use the component anywhere in your app. It will create a full-screen overlay that doesn't interfere with user interactions.
npx shadcn@latest add https://21st.dev/r/designali-in/snow-flakesimport { SnowfallBackground } from "@/components/ui/snow-flakes";
export default function DemoOne() {
return (
<div className="relative flex h-[650px] w-full flex-col items-center justify-center overflow-hidden rounded-xl border bg-blue-700">
<SnowfallBackground
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>
)
}