Sparkles

"use client";
import React from "react";
import { SparklesCore } from "@/lab/aceternity/ui/sparkles";

export default function SparklesPreview() {
  return (
    <div className="@container relative flex h-full w-full flex-col items-center justify-center overflow-hidden bg-black">
      <h1 className="relative z-20 text-center text-[clamp(2rem,13cqw,8rem)] leading-none font-bold text-white">
        Aceternity
      </h1>
      <div className="relative h-[35%] w-[75%]">
        {/* Gradients */}
        <div className="absolute inset-x-[12.5%] top-0 h-[2px] w-3/4 bg-gradient-to-r from-transparent via-indigo-500 to-transparent blur-sm" />
        <div className="absolute inset-x-[12.5%] top-0 h-px w-3/4 bg-gradient-to-r from-transparent via-indigo-500 to-transparent" />
        <div className="absolute inset-x-[37.5%] top-0 h-[5px] w-1/4 bg-gradient-to-r from-transparent via-sky-500 to-transparent blur-sm" />
        <div className="absolute inset-x-[37.5%] top-0 h-px w-1/4 bg-gradient-to-r from-transparent via-sky-500 to-transparent" />

        {/* Core component */}
        <SparklesCore
          background="transparent"
          minSize={0.4}
          maxSize={1}
          particleDensity={1200}
          className="h-full w-full"
          particleColor="#FFFFFF"
        />

        {/* Radial Gradient to prevent sharp edges */}
        <div className="absolute inset-0 h-full w-full bg-black [mask-image:radial-gradient(55%_100%_at_top,transparent_20%,white)]"></div>
      </div>
    </div>
  );
}