Reactive Dot Matrix
Interactive canvas-based dot matrix that responds to mouse movement.
Main Features of Reactive Dot Matrix
How to Use Reactive Dot Matrix in Next.js
Installation Guide for Reactive Dot Matrix
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
backgroundColor | string | #09090b | Background color |
dotColor | string | #3b82f6 | Dot color |
dotBaseRadius | number | 1.5 | Base radius of dots |
spacing | number | 30 | Spacing between dots |
interactionDistance | number | 200 | Mouse interaction distance |
interactionStrength | number | 40 | Interaction strength |
className | string | Additional CSS classes |
Related Components
Interstellar Fluid Hero
Interactive fluid simulation creating cosmic nebula effects with mouse interaction. Deep space aesthetic with animated gas clouds and star trails.
Interstellar Background Hero
Warp tunnel effect simulating high-velocity travel through nebular clusters. Procedural WebGL engine with mouse-responsive space distortion.
Liquid Chrome Hero
Procedural simulation of molten chrome alloys with velocity-based distortion. Interactive liquid metal surface with specular highlights.
When to Use
Best Practices
Why This Component Matters in Modern UI Development
Frequently Asked Questions
QHow does the interaction work?
Dots within the `interactionDistance` of the mouse cursor are repelled and increased in size based on the `interactionStrength` prop.
QIs it high-performance?
Yes, it uses a highly optimized Canvas rendering loop with `requestAnimationFrame`, ensuring smooth 60fps interaction even with thousands of dots.
QCan I change the dot colors?
Yes, you can customize the `dotColor` and `backgroundColor` to match any brand identity or UI theme.