# Constellation

> Drifting stars join into constellations as they pass close, and reach out to the cursor with lines of light.

Category: Backgrounds · MotionKit Plus · Updated 2026-10-21 · Live demo: https://motionkitui.com/components/constellation

## When to use it

AI, data, network and Web3 heroes, or any page about connection: a living background that rewards the cursor without competing with your headline.

## How it works

A canvas holds a field of stars sized to the area, each drifting on its own slow heading and wrapping at the edges. Every frame, any two stars closer than the link distance are joined by a line that fades with distance. Near the pointer, stars draw a line to it and lean in slightly, so constellations gather around the cursor. Resizing keeps the stars already there, and drawing stops while it's off screen.

## Installation

Part of MotionKit Plus (https://motionkitui.com/pricing). Subscribers install it with `npx shadcn@latest add @motionkit/constellation` after adding their registry token from https://motionkitui.com/account.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `color` | `string` | `"#5FAEB4"` | Star and line colour as a hex value. |
| `density` | `number` | `1.1` | Stars per 10,000 square pixels. |
| `linkDistance` | `number` | `120` | Pixels within which two stars are joined. |
| `speed` | `number` | `1` | Drift speed. 0 holds the field still. |
| `interactive` | `boolean` | `true` | Reach for the pointer with lines. |
| `children` | `ReactNode` |  | Your content, layered above. |

## Accessibility

- **Keyboard: Not applicable.** Decorative, nothing to focus. Your content inside stays fully interactive.
- **Screen readers: Pass.** The canvas and vignette are hidden from assistive tech; only your content is read.
- **Reduced motion: Pass.** With reduced motion on, it draws one still frame. It also stops drawing while off screen.
- **Colour contrast: Pass.** Lines stay under 35% opacity and a vignette darkens the middle, so text over it keeps its contrast.