Components
Sparkles moving hero section
This React component, SparklesCore, renders customizable particle animations using the tsParticles library. It offers various configuration options for particle size, color, speed, density, and background. The component uses motion for animations and handles initialization efficiently.
import { SparklesCore } from "@/components/ui/sparkles-moving-hero-section";
export default function DemoOne() {
return (
<div className="h-screen relative w-full bg-background flex flex-col items-center justify-center overflow-hidden rounded-md">
<div className="w-full absolute inset-0 h-screen">
<SparklesCore
id="tsparticlesfullpage"
background="transparent"
minSize={0.6}
maxSize={1.4}
particleDensity={100}
className="w-full h-full"
particleColor="#FFFFFF"
/>
</div>
<h1 className="md:text-7xl text-3xl lg:text-6xl font-bold text-center text-foregrund relative z-20">
Build great products like 21st.dev
</h1>
</div>
);
}