Shadcn.io is not affiliated with official shadcn/ui
React Dot Pattern Background
Interactive dot matrix with mouse-reactive glow effects and ambient wave animation, rendered on canvas for smooth performance
Move your cursor around and watch the dots light up—that's the main appeal here. Dots near your mouse glow cyan and grow slightly, creating this nice spotlight effect that follows you around. Even when you're not interacting, there's a subtle wave animation pulsing through the grid so it never feels static. It's all rendered on canvas so you can have thousands of dots without any performance issues. I use this for hero sections where I want something interactive but not overwhelming. The vignette at the edges keeps the focus centered.
React Dot Pattern Background preview
Installation
Related Components
Flickering Grid
Matrix-style flickering squares
Grid Pattern
Static SVG grid background
Particles
Floating particle system
Background Boxes
Interactive isometric grid
Interactive Grid
Mouse-reactive grid
Hexagon
Honeycomb pattern grid
FAQ
Was this page helpful?
Sign in to leave feedback.