DotField

A dim dot grid with a soft pool of light drifting across it.

Quietly alive

Installation

bash
npx shadcn@latest add https://www.rad-ui.com/r/dot-field.json

React
import DotField from "@/components/fx/dot-field"

<DotField className="px-8 py-28"><h2>Quietly alive</h2></DotField>

Both dot layers are aria-hidden and ignore pointer events.
Pauses offscreen; `paused` stops it on demand.
prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) parks the light in the centre.

Prop	Type	Default	Description
color	string	slate	Colour of the dim dots.
glowColor	string	'#a78bfa'	Colour of the dots under the moving light.
gap	number	18	Spacing between dots in px.
speed	number	7	Seconds for the light to sweep across.
paused	boolean	false	Stop the animation. It also pauses itself offscreen.
...props	ComponentProps<'div'>	—	Passed to the root div; children render above the effect.