Dot Grid
Customize Dot Grid
Dot Size10px
Gap15px
Proximity120px
Speed Trigger100
Shock Radius250px
Shock Strength5
Max Speed5000
Resistance750
Return Duration1.5s
Props
| Property | Type | Default | Description |
|---|---|---|---|
| dotSize | number | 10 | Size of individual dots in pixels (2-50) |
| gap | number | 15 | Gap between dots in pixels (5-100) |
| baseColor | string | #5227FF | Base color of the dots when inactive |
| activeColor | string | #5227FF | Color of the dots when active/interacting |
| proximity | number | 120 | Distance for mouse proximity detection in pixels (50-300) |
| shockRadius | number | 250 | Radius of shock wave effect in pixels (100-500) |
| shockStrength | number | 5 | Strength of the shock wave effect (1-20) |
| resistance | number | 750 | Resistance factor for dot movement (100-2000) |
| returnDuration | number | 1.5 | Duration for dots to return to original position in seconds (0.5-5) |
| speedTrigger | number | 100 | Speed threshold for triggering effects (50-500) |
| maxSpeed | number | 5000 | Maximum speed for dot animations (1000-10000) |
| className | string | custom-dot-grid | Additional CSS class names for styling |
| width | string | 100% | Width of the dot grid container |
| height | string | 600px | Height of the dot grid container |
| enableAnimation | boolean | | Enable or disable dot animations |
| enableMouseInteraction | boolean | | Enable or disable mouse interaction effects |
| quality | string | high | Rendering quality - 'low', 'medium', or 'high' |
Dependencies
three@react-three/fiber
Created with ❤️ by Cybershoora