Animated Dot Matrix
A grid of dots that pulses outward in concentric ripples, drawn on canvas.
- Category
- Backgrounds
- Added
- 2026-09-01
- Deps
- none
- Updated
- 2026-09-01
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
Signals, visualized
A pulse rippling through the grid
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
// ---------------------------------------------------------------
}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.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Pointer Warp Dot Field
backgroundsA canvas dot grid that bulges and brightens away from the cursor.
Halftone Depth Field
backgroundsA rotated print screen that swells into a pool of light under the pointer, with the gamma actually done right.
Signal Field
backgroundsA machined dot grid lit by slow waves of light, with a pointer lens and click ripples.