Floating 3D Particles

"use client";

import { ArrowRight } from "lucide-react";

import { Floating3DParticles } from "@/lab/magicui/ui/floating-3d-particles";

export default function Floating3DParticlesDemo() {
  return (
    <div className="@container relative flex h-full w-full items-center justify-center overflow-hidden">
      <Floating3DParticles color="#000000" />
      <div className="relative z-10 flex flex-col items-center gap-4 px-6 text-center">
        <h2 className="text-[clamp(1.5rem,5cqw,3rem)] font-bold tracking-tight text-neutral-950">Build something magical</h2>
        <p className="max-w-xl text-sm text-neutral-500">
          A pseudo-3D particle background that stays behind your content with continuous rotation and buoyant drift.
        </p>
        <button
          type="button"
          className="inline-flex h-10 items-center gap-2 rounded-lg bg-neutral-950 px-5 text-sm font-medium text-white transition-opacity hover:opacity-90"
        >
          Get Started
          <ArrowRight className="size-4" />
        </button>
      </div>
    </div>
  );
}