Drifting stars join into constellations as they pass close, and reach out to the cursor with lines of light.
Everything connects
Customize
Usage
import { Constellation } from "@/components/motionkit/constellation";
<Constellation
className="h-[32rem] rounded-3xl"
>
<h1>Your hero</h1>
</Constellation>Motion
The exact curves this component runs, plotted with Motion's own maths.
Drift
Runs on its own
AI, data, network and Web3 heroes, or any page about connection: a living background that rewards the cursor without competing with your headline.
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.
| 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. |
How we audit: the WCAG 2.2 animation checklist and respecting reduced motion in React.
Yes. The file starts with "use client", so you can import it straight into a Server Component page or layout. It works in Vite as is, and in Astro as a React island.
Nothing beyond React and Tailwind CSS v4. There is no MotionKit package and no Tailwind config to add.
Yes, with MotionKit Plus. Add the @motionkit registry and your personal token to components.json (the snippet is on your account page), then run npx shadcn@latest add @motionkit/constellation. It saves the file to components/motionkit and installs its dependencies.
Constellation is part of MotionKit Plus (£12 a month or £96 a year). The live preview and playground are free to explore; Plus unlocks its source code, every customisation control and commercial use.
With reduced motion on, it draws one still frame. It also stops drawing while off screen.
Star Field
A slow-drifting night sky with twinkling stars, for space, launch and AI product heroes.
Infinite Perspective Grid
A true 3D floor of glowing lines that recedes forever to a lit horizon, with an optional ceiling for a tunnel.
Aurora Background
Drifting, blurred color fields for hero sections and empty states.
Everything connects
Customize
Usage
import { Constellation } from "@/components/motionkit/constellation";
<Constellation
className="h-[32rem] rounded-3xl"
>
<h1>Your hero</h1>
</Constellation>Motion
The exact curves this component runs, plotted with Motion's own maths.
Drift
Runs on its own
The live preview is free to explore. Plus unlocks the source for Constellation and every other premium component.