Components
Text rendered as hundreds of individual particles with real-time physics. Move your mouse near the letters and particles scatter like startled birds, then magnetically spring back into formation. Supports multi-line text, configurable repulsion force, particle size, spring tension, and friction. When idle, an auto-sweep simulation scatters particles across the canvas so the preview is always alive. Particles glow brighter when displaced and form faint connection lines to nearby particles during scatter. Zero external dependencies — pure canvas.
Loading preview...
import { Component as ParticleText } from "@/components/ui/particle-text";
export default function Demo() {
return (
<div className="flex min-h-screen flex-col items-center justify-center bg-background">
<div className="w-full max-w-5xl mx-auto px-6">
{/* Main canvas area */}
<div className="relative w-full h-[400px] md:h-[480px] rounded-2xl border border-border bg-card overflow-hidden">
{/* Ambient glow */}
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[300px] rounded-full bg-blue-500/[0.03] blur-3xl pointer-events-none" />
<ParticleText
text={"EXPLORE\nTHE VOID"}
fontSize={100}
particleGap={3}
particleSize={1.8}
mouseRadius={120}
mouseForce={10}
returnSpeed={0.05}
className="w-full h-full"
/>
</div>
{/* Caption */}
<div className="text-center mt-8">
<p className="text-sm text-muted-foreground">
Move your cursor through the text — particles scatter and reform with spring physics.
</p>
</div>
</div>
</div>
);
}