Grid Pulse

A dot-matrix grid pulsing in a diagonal wave.

Example.tsx

import { GridPulse } from "@/components/better/grid-pulse"

export function Example() {
  return (
    <GridPulse rows={3} cols={3} dotSize={8} gap={6} speed={1.4} color="#6366f1" />
  )
}

Dependencies

motion

Props

Prop	Type	Default	Description
className	string	—
rows	number	3	Grid rows.
cols	number	3	Grid columns.
dotSize	number	8	Dot diameter in px.
gap	number	6	Gap between dots in px.
color	string	"currentColor"	Dot colour (any CSS color).
speed	number	1.4	Seconds for one cycle.