Constellation Background

Canvas particles drifting with links between neighbors, converging toward the cursor as it comes close.

Slowly drifting stars drawn on Canvas 2D, with links automatically forming between nearby points and their opacity decreasing with distance; as the cursor comes close, particles are gently pulled together and linked to the cursor. A built-in ResizeObserver adapts to the size, and the animation pauses automatically when the element leaves the window — a good fit as a decorative background for a hero or a dark section.

Loading preview…

npx shadcn@latest add https://webberui.com/r/constellation-background.json

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Sparkle countparticleCount

Link distancelinkDistance

110

Drift speedspeed

Cursor gravity radiusmouseRadius

160

Sparkle colorcolor

<ConstellationBackground />

Installation

npx shadcn@latest add https://webberui.com/r/constellation-background.json

Or, once registries are configured in components.json, install it as @webberui/constellation-background.

Usage

import { ConstellationBackground } from "@/components/ui/constellation-background";

<ConstellationBackground
  particleCount={72}
  linkDistance={110}
  color="#9db4d6"
  className="rounded-3xl bg-slate-950"
>
  <div className="px-8 py-24 text-center text-white">
    <h1 className="text-4xl font-semibold">Connect ideas into a star chart</h1>
  </div>
</ConstellationBackground>

Props

Prop	Type	Default	Description
`particleCount`	`number`	`64`	Number of particles (stars); 40–120 is recommended depending on the container size
`linkDistance`	`number`	`110`	A link is drawn when two points are closer than this (px), with opacity decreasing with distance
`color`	`string`	`"#94a3b8"`	Color of the stars and links; accepts any CSS color string
`speed`	`number`	`1`	Drift speed multiplier: 0.5 is calmer, 2 is livelier
`mouseRadius`	`number`	`160`	Cursor attraction radius (px); particles inside it are drawn toward the cursor and linked to it
`children`	`React.ReactNode`	—	Content layered above the starfield (automatically placed on the z-10 layer)
`className`	`string`	—	Forwarded to the outer container

Accessibility

The canvas is a purely decorative layer marked aria-hidden; all informational content is carried by children, so assistive technology never reads the particle graphics
When the user has "reduce motion" enabled at the system level, only a single static star chart is rendered — neither the animation loop nor the cursor interaction starts
When the component leaves the window, an IntersectionObserver automatically pauses requestAnimationFrame, reducing power draw and background performance load
The cursor attraction is a visual enhancement only and never intercepts clicks (the canvas is set to pointer-events-none), so interactive elements inside children keep working as usual