BackgroundsNew
Gravity Stars
A starfield on canvas. Stars twinkle, link up with lines and gather toward the cursor.
Customize
color
Based on Gravity Stars (MIT license) ยท Terms of use
More in Pro
View allProps
14 properties| Property | Type | Default | Description |
|---|---|---|---|
| count | number | 220 | Number of stars. Fewer on narrow screens. |
| gravity | number | 1 | Pull strength toward the cursor. |
| connect | boolean | true | Thin lines between nearby stars. |
| connectDistance | number | 130 | Distance at which stars link up, in pixels. |
| starSize | number | 1.5 | Star size in pixels. |
| glow | number | 5.5 | Halo around a star. 1 is none, 8 is a bloom. |
| twinkle | number | 0.55 | Twinkle, from 0 to 1. |
| speed | number | 1 | Drift speed. |
| drag | number | 0.03 | Friction. 0 is none, 1 freezes the stars. |
| color | string | "#ffffff" | Star color. |
| tint | number | 0 | Spread of star tints from cool to warm, from 0 to 1. |
| paused | boolean | false | Pause the animation. |
| children | ReactNode | โ | Content on top of the background, such as a heading. |
| className | string | โ | Classes for the wrapper. |
Dependencies
3 required packages
npm install motion clsx tailwind-merge