Reactive Dot Matrix
Interactive canvas-based dot matrix that responds to mouse movement.
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 |
When to Use
Ideal for tech-focused landing pages, developer tools, and Next.js sites that want a subtle, interactive pattern. Use this React component for a canvas-based dot matrix that responds elegantly to user mouse movements.
Best Practices
Maintain consistent spacing within your design system by adjusting the `spacing` and `dotBaseRadius` to match your layout density. Follow React best practices by pairing it with dark-mode themes. Optimize for performance by using the high-performance Canvas API for rendering the hundreds of reactive dots.
Why This Component Matters
Interactive backgrounds improve user engagement and create a premium, 'custom-built' feel. This production-ready component helps build an interface that feels alive and responsive to human input, adding a layer of technical polish to your project.
FAQ
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.
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.