Constellation Background for React

Constellation is a web of slowly drifting nodes joined by thin lines that fade with distance, so the network keeps breaking and re-forming as the nodes move. The pointer pushes nearby nodes away, and ripples run through the web; the nodes then ease back to their own drift. The nodes take the theme's primary color and the lines its muted text color, so the web follows light and dark mode, and it fades out toward the edges.

It suits AI, data and infrastructure pages. For dots without lines, use Particles; for agents that steer together instead of drifting, Swarm; for a tidy wired network with pulses, Circuit. It's a small canvas that pauses offscreen and holds still with reduced motion.

Installation

Usage

import { Constellation } from "@/components/ui/constellation";

<Constellation className="min-h-[480px]">
  <h1 className="text-5xl font-semibold">Ship faster</h1>
</Constellation>

Constellation is a container: give it a size, put your content inside, and the web sits behind it. For a background behind the whole page, pass className="fixed inset-0 -z-10" and no children.

Demos

Card

count doesn't grow with the box, so a small card needs fewer nodes and shorter links: here count={36} and connectionDistance={110}.

Color

nodeColor and lineColor take any CSS color. A sky blue on bg-neutral-950 gives the classic night-sky network; the halo takes the node color.

Accessibility

The canvas is decoration: it's hidden from assistive tech and never takes the pointer, so your content is read and clicked as usual. With reduced motion it draws the web once, still, and ignores the pointer. Lines are at most 50% of the muted text color and the nodes are small, so text in the foreground color stays readable on top; keep copy in text-foreground. Nothing flashes: lines fade in and out with distance, never all at once.

FAQ

API Reference