Dot Shader
A GPU-accelerated interactive dot matrix background shader with magnetic cursor repulsion, proximity illumination glow, dynamic lens scaling, and ambient wave motion.
Accent:
Point Primitive Dot Matrix
Interactive Dot Shader
Move your pointer across the canvas to experience magnetic cursor repulsion and proximity illumination.
Installation
Add the component directly to your repository using shadcn CLI:
npx shadcn@latest add Surajmaurya1/easyui/dot-shader
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Optional content rendered above the interactive dot shader canvas with full clickability |
| dotColor | string | 'rgba(255, 255, 255, 0.15)' | Idle color of the background matrix dots (hex, rgb, or rgba) |
| accentColor | string | '#00F0FF' | Luminous highlight color of dots illuminated by cursor proximity |
| dotSize | number | 1.5 | Base radius in pixels of each individual dot |
| spacing | number | 22 | Distance in pixels between adjacent dots in the grid |
| cursorRadius | number | 180 | Radius in pixels of cursor influence and repulsion |
| distortionStrength | number | 0.35 | Force multiplier of magnetic repulsion away from the cursor (0 to 1) |
| maxScale | number | 2.2 | Maximum scale multiplier of dots at peak cursor proximity |
| waveIntensity | number | 0.25 | Amplitude of ambient idle sinusoidal wave motion |
| speed | number | 1 | Speed multiplier for the ambient background waves |
| interactive | boolean | true | Whether dots react to cursor movements with repulsion and illumination |
| overlay | boolean | true | Enables a soft radial vignette gradient to seamlessly blend container edges |
| className | string | — | Additional CSS classes for container sizing and layout |