Name: Lokalhost.io
Rating: 4.9 (120 reviews)

React Dot Pattern Background

Interactive dot matrix with mouse-reactive glow effects and ambient wave animation, rendered on canvas for smooth performance.

Usage

import { DotPattern } from "@/components/BackgroundPatterns/dot-pattern"

export default function Page() {
  return <DotPattern />
}

Props

Prop	Type	Default	Description
`dotSize`	`number`	`2`	Diameter of each dot in pixels
`gap`	`number`	`24`	Spacing between dots in pixels
`darkBaseColor`	`string (hex)`	`"#404040"`	Base dot color in dark theme
`lightBaseColor`	`string (hex)`	`"#c0c0c0"`	Base dot color in light theme
`darkGlowColor`	`string (hex)`	`"#22d3ee"`	Mouse hover glow color in dark theme
`lightGlowColor`	`string (hex)`	`"#6366f1"`	Mouse hover glow color in light theme
`darkBgColor`	`string (hex)`	`"#0a0a0a"`	Canvas background color in dark theme
`lightBgColor`	`string (hex)`	`"#ffffff"`	Canvas background color in light theme
`proximity`	`number`	`120`	Mouse proximity radius in pixels for glow trigger
`glowIntensity`	`number`	`1`	Multiplier for glow brightness strength
`waveSpeed`	`number`	`0.5`	Ambient wave animation speed. Set to 0 to disable
`children`	`ReactNode`	—	Content rendered above the dot pattern canvas
`className`	`string`	—	Additional CSS classes for the container element

Canvas rendering — Uses HTML5 Canvas with requestAnimationFrame for smooth 60fps animation with zero DOM overhead.
Theme detection — Automatically reads resolvedTheme from next-themes. Grid rebuilds on theme switch.
Retina support — Scales canvas by devicePixelRatio for sharp rendering on HiDPI screens.
Responsive — Uses ResizeObserver to rebuild the dot grid whenever the container is resized.
Wave animation — Set waveSpeed={0} to disable ambient animation and keep dots static.
Glow effect — Uses smoothstep easing for natural, non-linear proximity transitions.
Performance — Mouse position is tracked via a ref (not state) to avoid unnecessary re-renders.