Gravity Dots
A dot-grid background that bends toward the cursor like a gravity well. Click to send a glowing shockwave through it.
Installation
Full Setup guideInstall the component automatically via Shadcn CLI.
npx shadcn@latest add https://www.grettech.com/api/registry/gravity-dotsProps
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | Content shown over the dots. |
gap | number | 24 | Distance between dots in px. |
dotSize | number | 1.6 | Dot radius in px. |
color | string | Text colour at 28% opacity | Resting dot colour. By default the dots use the text colour at low opacity, so they follow light and dark mode. |
glowColor | string | "#0ea5e9" | Colour of dots near the cursor and in shockwaves. |
radius | number | 170 | Reach of the cursor's pull in px. |
strength | number | 0.32 | How far dots move toward the cursor, 0–1. |
shockwave | boolean | true | Clicking sends a shockwave. |
className | string | - | Extra classes for the root element (transparent by default; set a background here). |
...props | React.HTMLAttributes<HTMLDivElement> | - | Any other attributes, passed to the root element (transparent by default; set a background here). |