Constellation
NewFree
Drifting points that connect with lines when they come close, and move gently out of the way of the pointer.
Connect the dots
Move your pointer to push the points away
Customize
120
140px
140px
1
#ff784f
When to use it
- Hero sections for network, data or developer tools
- Astronomy and education pages
- A quiet backdrop for a waitlist or contact page
Good to know
- Plan
- Free, MIT license
- Dependencies
- motion
- Rendering
- 2D canvas
- Reduced motion
- Respected
- Lines of code
- 286
Installation
npx shadcn@latest add https://ui.mekaigames.com/r/constellation.jsonWorks in any project set up with the shadcn CLI.
Install the dependency.
npm install motion- Copy the code from the Code tab into
components/ui/constellation.tsx.
Free under the MIT license. If it saved you time, star the repo on GitHub: it helps other developers find it.
Usage
import { Constellation } from "@/components/ui/constellation";
<section className="relative h-[600px] bg-ink-950">
<Constellation count={120} distance={140} pushRadius={140} />
</section>Props
6 properties| Property | Type | Default | Description |
|---|---|---|---|
| color | string | "#ff784f" | Point and line color as a hex value. |
| count | number | 120 | Number of points in a 1100 by 600 area. Other sizes keep the same density. |
| distance | number | 140 | How close two points must be to connect, in pixels. |
| speed | number | 1 | Drift speed multiplier. |
| pushRadius | number | 140 | Radius of the area the pointer pushes away, in pixels. 0 turns it off. |
| className | string | — | Extra classes for the canvas. It fills its nearest positioned parent. |
Dependencies: motion