Dot Grid
Interactive dot grid with physics-based animations and mouse effects.
Bynana UI
Welcome to the future of design
Usage
import DotGrid from './DotGrid';
<div style={{ width: '100%', height: '600px', position: 'relative' }}>
<DotGrid
dotSize={10}
gap={15}
baseColor="#5227FF"
activeColor="#5227FF"
proximity={120}
shockRadius={250}
shockStrength={5}
/>
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| dotSize | number | 16 | Size of dots |
| gap | number | 32 | Gap between dots |
| baseColor | string | "#5227FF" | Base dot color |
| activeColor | string | "#5227FF" | Active dot color |
| proximity | number | 150 | Proximity effect radius |
| speedTrigger | number | 100 | Speed trigger threshold |
| shockRadius | number | 250 | Shock wave radius |
| shockStrength | number | 5 | Shock wave strength |
| maxSpeed | number | 5000 | Maximum speed |
| resistance | number | 750 | Animation resistance |
| returnDuration | number | 1.5 | Return animation duration |