particles

1"use client";
2 
3import { useTheme } from "next-themes";
4import { useEffect, useState } from "react";
5 
6import { Particles } from "@/components/magicui/particles";
7 
8export function ParticlesDemo() {
9  const { resolvedTheme } = useTheme();
10  const [color, setColor] = useState("#ffffff");
11 
12  useEffect(() => {
13    setColor(resolvedTheme === "dark" ? "#ffffff" : "#000000");
14  }, [resolvedTheme]);
15 
16  return (
17    <div className="relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl">
18      <span className="pointer-events-none z-10 whitespace-pre-wrap text-center text-8xl font-semibold leading-none">
19        Particles
20      </span>
21      <Particles
22        className="absolute inset-0 z-0"
23        quantity={100}
24        ease={80}
25        color={color}
26        refresh
27      />
28    </div>
29  );
30}