Components
Hundreds of particles in gravitational orbit around your cursor. Real inverse-square attraction creates natural slingshots, spirals, and galaxy formations. Particles leave comet-like trails that glow brighter at higher speeds. When idle, an invisible attractor traces a figure-8 keeping everything alive. Configurable particle count, gravity strength, trail length, colors, and damping. Supports content overlay as children. Zero dependencies.
Loading preview...
import { Component as GravityParticles } from "@/components/ui/gravity-particles";
export default function Demo() {
return (
<div className="flex min-h-screen flex-col items-center justify-center bg-[#030712] p-8 gap-8">
<div className="w-full max-w-5xl">
<div className="text-center mb-12">
<h2 className="text-2xl font-bold tracking-tight text-white mb-2">
Gravity Particles
</h2>
<p className="text-sm text-neutral-400 max-w-lg mx-auto">
300 particles in gravitational orbit. Move your mouse to become the
center of gravity — particles slingshot, spiral, and form galaxies
around your cursor.
</p>
</div>
<div className="rounded-2xl border border-white/10 overflow-hidden">
<GravityParticles className="w-full h-[500px]" count={350} gravity={1400} />
</div>
</div>
{/* As hero background */}
<div className="w-full max-w-5xl rounded-2xl border border-white/10 overflow-hidden">
<GravityParticles
className="w-full h-[380px]"
count={200}
gravity={1000}
colors={["#818cf8", "#a78bfa", "#c084fc", "#e879f9"]}
>
<div className="flex flex-col items-center justify-center h-[380px] px-8 text-center">
<h1 className="text-4xl md:text-5xl font-bold tracking-tight text-white mb-4 drop-shadow-lg">
Everything orbits
<br />
<span className="bg-gradient-to-r from-violet-400 to-fuchsia-400 bg-clip-text text-transparent">
around you
</span>
</h1>
<p className="text-sm text-white/50 max-w-md mb-8 drop-shadow-md">
Real gravitational physics. Every particle is pulled toward your
cursor with inverse-square attraction.
</p>
<div className="flex gap-3">
<button className="rounded-full bg-white px-6 py-2.5 text-sm font-semibold text-black">
Get Started
</button>
<button className="rounded-full border border-white/20 bg-white/5 backdrop-blur-sm px-6 py-2.5 text-sm font-semibold text-white">
Learn More
</button>
</div>
</div>
</GravityParticles>
</div>
</div>
);
}