Docs / Components / Dot Grid Background
Dot Grid Background
A premium fullscreen background inspired by the Miracle UI. Features a dense grid of randomly blinking dots with an interactive cursor-follow lighting effect.
Dependencies
Install the following dependencies to use this component:
1npm install clsx tailwind-merge
Installation
Run the following command in your terminal to add the component to your project:
1npx rankflow-ui@latest add dot-grid-background
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| dotSize | number | 1.2 | The radius of each dot in pixels. |
| gap | number | 12 | The grid spacing between dots (lower = higher density). |
| blinkProbability | number | 0.005 | Chance of a dot starting to blink [0, 1]. |
| blinkSpeed | number | 0.05 | Interpolation speed of the opacity transition. |
| cursorRadius | number | 100 | Radius around the cursor where dots light up. |
| cursorStrength | number | 0.5 | Maximum additional opacity from cursor proximity. |
| className | string | '' | Additional CSS classes. |