Components
Loading preview...
A fluid particle background made with SVGs, fully customizable using Tailwind CSS.
npx shadcn@latest add https://21st.dev/r/designali-in/fluid-particleimport { FluidParticles } from "@/components/ui/fluid-particle"
export function FluidParticle01() {
return (
<main className="relative w-full h-screen overflow-hidden flex items-center justify-center">
<div className="absolute inset-0">
<FluidParticles
particleDensity={100}
particleSize={1}
particleColor="#555555"
activeColor="#000000"
maxBlastRadius={300}
hoverDelay={1}
interactionDistance={100}
/>
</div>
<div className="relative z-10 text-center">
<h1 className="text-5xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-purple-600">
Fluid Compute
</h1>
</div>
</main>
);
}