Backgrounds
Background - Constellation
Drifting particles that link with lines when they pass close. The cursor is an extra node.
- Canvas particle network
- Proximity links
- Cursor node
Customize
Drag a slider and watch the preview respond live. Every control maps to a typed prop - what you tune is what you ship.
How the animation works
Particles drift slowly across a canvas, and whenever two of them pass within a threshold distance the component draws a fading line between them, so a shifting web of connections forms and dissolves. The cursor is injected as an extra particle, so moving the pointer pulls fresh links toward it and locally densifies the network.
When to use it
- Behind a hero for a networking, data, or community product where connection is the metaphor
- On a dark landing page that wants quiet, interactive ambient motion
- As a background where you want the visitor's cursor to feel woven into the scene
Props you can tune
Every prop below is live in the studio above and ships typed with the component.
- 24-140
countParticle count - 70-220px
linkLink distance
Related components
Using this block
Buy it, then copy components/blocks/bg-constellation/index.tsx into your project. A single file - no new dependency beyond the Framer Motion + Tailwind you already have.