Dot Grid

A pegboard of dots that light up near the pointer like LEDs behind a panel, with slow ripples rolling across.

New in 1.7.

Every request, traced to the line

Halyard keeps all 4.1 billion spans a day, unsampled, and answers a query across a week of them in 280 ms.

npx halyard init

Installation

npx shadcn@latest add https://neonkit.heyaadi.com/r/dot-grid.json

Usage

import { DotGrid } from "@/components/ui/dot-grid"

<section className="relative overflow-hidden bg-[#05060a]">
  <DotGrid />
  <h1 className="relative">Every request, traced to the line</h1>
</section>

Examples

Ripples only

radius={0} turns off the pointer light. Every few seconds a ring rolls out from somewhere on the panel and fades as it spreads.

Inside cards

It fills any positioned box, so it works behind a stat as well as a hero. Turn off fade when the card's edge already frames it.

Spacing and size

spacing sets the pitch, size the dot diameter and radius how far the light reaches.

API reference

Two canvases that fill the nearest positioned parent: unlit dots, drawn once per resize, and the lit ones, drawn only while something changes. Accepts native div attributes.

Prop	Type	Default
`color`	`NeonColor` Color of the lit dots. Their cores burn whiter than the halo.	inherited
`spacing`	`number` Distance between dots, in pixels. The grid is centered so the margins match.	`22`
`size`	`number` Dot diameter, in pixels.	`1.5`
`radius`	`number` How far the pointer's light reaches, in pixels. 0 turns it off.	`170`
`ripples`	`boolean` Rings of light that roll across the panel every few seconds.	`true`
`fade`	`boolean` Fade the panel out toward its edges with a radial mask.	`true`
`intensity`	`number` Brightness of the lit dots, 0 to 1.	`1`
`speed`	`number` Speed multiplier for the ripples. 0 stops them.	`1`

Accessibility

Decorative: rendered with aria-hidden and pointer-events: none, so it never blocks clicks on the content above it.
The loop sleeps once every dot has settled and wakes on the next pointer move or ripple, so a resting panel costs nothing.
It pauses offscreen and in hidden tabs. Under prefers-reduced-motion it draws one still pool of light and ignores the pointer.