Docs / Components / Dot Trail Background
Dot Trail Background
A dark background component where moving the cursor reveals a dynamic, smooth-decaying grid of glowing dots along the mouse path.
Dot Trail Background
Move your cursor anywhere across the frame to reveal the dynamic glowing dot trail.
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-trail-background
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| bgColor | string | '#000000' | Base background color of the container. |
| dotColor | string | '#ffffff' | Color of the revealed dots. |
| gap | number | 22 | Spacing between grid dots in pixels. |
| baseDotSize | number | 0 | Base radius of dots when idle (0 = invisible background). |
| maxDotSize | number | 6 | Maximum radius of dots when revealed by cursor. |
| strokeWidth | number | 55 | Radius of the cursor brush stroke. |
| fadeDuration | number | 400 | Duration in ms before revealed dots fade out. |
| glow | boolean | true | Whether to enable soft radial glow around revealed dots. |
| glowColor | string | 'rgba(255, 255, 255, 0.45)' | Color of the dot glow effect. |
| className | string | '' | Additional CSS classes. |