Snow Flakes

import { SnowfallBackground } from "@/components/ui/snow-flakes";

const settings = {
  count: 150,
  speed: 0.1,
  minSize: 1,
  maxSize: 40,
  minOpacity: 0,
  maxOpacity: 1,
  color: "#ffffff",
  wind: true,
  zIndex: 1,
};

export default function DemoOne(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  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={s.count}
        speed={s.speed}
        minSize={s.minSize}
        maxSize={s.maxSize}
        minOpacity={s.minOpacity}
        maxOpacity={s.maxOpacity}
        color={s.color}
        wind={s.wind}
        zIndex={s.zIndex}
      />
      <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>
  );
}