Particle Constellation
A free particle background React component with bounded constellation links.
Connected by design
Quiet motion for ideas that belong together
A deterministic field drifts behind the message, drawing only nearby connections. Move a fine pointer through the network to create a gentle, local response.
Explore the component libraryCustomise
Code
<BgParticleConstellation />Particle Constellation is a free particle background React component for Next.js that draws a deterministic network of drifting nodes behind your content. A spatial bucket grid limits connection checks to nearby cells, while a fine pointer creates a smooth, local repulsion without blocking interaction.
The canvas caps its device pixel ratio and particle total, skips long catch-up frames, and removes its GSAP ticker whenever the layer is fully offscreen or the document is hidden. Reduced-motion users receive one deterministic static frame, coarse pointers do not install a movement listener, and a tokenised CSS dot pattern remains when JavaScript is unavailable.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/bg-particle-constellationUsage
import { BgParticleConstellation } from "@/components/bg-particle-constellation";
export function Example() {
return (
<section className="relative overflow-hidden bg-background">
<BgParticleConstellation density={58} linkRadius={136} />
<div className="relative">
<h2 className="text-4xl font-semibold text-foreground">
Your content here
</h2>
</div>
</section>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| density | number | 52 | Target particles per 1000 by 700 CSS pixels. Clamped to 18 to 90. |
| linkRadius | number | 124 | Maximum link distance in CSS pixels. Clamped to 64 to 220. |
| driftSpeed | number | 0.18 | Particle travel in CSS pixels per frame at 60fps. Clamped to 0 to 0.5. |
| pointerForce | number | 0.62 | Strength of fine-pointer repulsion. Clamped to 0 to 1.2. |
| pointerRadius | number | 168 | Fine-pointer influence radius in CSS pixels. Clamped to 80 to 280. |
| nodeSize | number | 1.5 | Base particle radius in CSS pixels. Clamped to 0.75 to 3. |
| seed | number | 7 | Finite deterministic seed used to generate the particle layout. |
| className | string | undefined | Additional classes merged onto the root fill layer. |
Customisation
Particle Constellation exposes three Tier 3 colour tokens. Override --constellation-node for regular particles, --constellation-line for nearby links, and --constellation-accent for highlighted particles from :root or any ancestor. The seven effect controls in the playground map directly to numeric component props.
:root {
--constellation-node: var(--foreground);
--constellation-line: var(--border);
--constellation-accent: var(--primary);
}Frequently asked questions
- Is Particle Constellation free for commercial use?
- Yes. Particle Constellation is MIT licensed, so you can use it in personal and commercial projects without attribution.
- How does this particle background stay performant?
- It caps the field at 110 particles and a device pixel ratio of two, checks links through a bounded spatial grid, skips long catch-up frames, and removes its GSAP ticker while offscreen or tab-hidden.
- What happens with reduced motion or touch input?
- Reduced-motion users receive one deterministic static canvas frame with no ticker or pointer listener. Coarse pointers keep the normal ambient drift but do not install the fine-pointer interaction.