Animated Dot Matrix
A grid of dots that pulses outward in concentric ripples, drawn on canvas.
Canvas 2D0 deps1 file · 2 KB TSXreduced-motion aware
Props
"use client";
import { useEffect, useRef } from "react";
export function AnimatedDotMatrix({
density = 28,
speed = 1.2,
color = "#2563eb",
}: {
density?: number;
speed?: number;
color?: string;
}) {
const canvasRef = useRef<HTMLCanvasElement>(null);
useEffect(() => {
const canvas = canvasRef.current;
if (!canvas) return;
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this background
Animated Dot Matrix draws a regular grid of dots to a single canvas element rather than mounting one DOM node per dot — at typical spacing a 640x360 area holds 200-300 dots, which is comfortably past the point where individual divs would cost real style-recalc and layout time every frame. Each dot's radius and opacity come from one deterministic sine function of its distance from center and elapsed time, so there is no per-dot state, no randomness, and no hydration risk: server and client compute the identical first frame. The ripple reads as a signal or radar sweep rather than ambient decoration, which suits dashboards and technical product pages more than soft editorial ones. Behind text it stays low-contrast by design (small dots, moderate alpha) but a very busy hero headline can still visually compete with the ripple crest as it passes directly under it — consider pausing or dimming it under dense copy blocks.
