Floating Particles

import { FloatingParticles } from "@/components/ui/floating-particles";

const settings = {
  particleCount: 8000,
  cameraDistance: 1000,
  rotationSpeed: 0.1,
  particleSize: 10,
  antigravityForce: 30,
  activationRate: 50,
};

export default function DemoOne(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return (
    <div className="h-screen w-screen">
      <FloatingParticles
        particleCount={s.particleCount}
        particleColor1="#ffff50"
        particleColor2="#99ffcc"
        cameraDistance={s.cameraDistance}
        rotationSpeed={s.rotationSpeed}
        particleSize={s.particleSize}
        antigravityForce={s.antigravityForce}
        activationRate={s.activationRate}
      />
      <span className="pointer-events-none absolute z-10 text-center text-7xl leading-none font-semibold tracking-tighter whitespace-pre-wrap">
        Floating Particles
      </span>
    </div>
  );
}