Dot Pattern

A grid of dots, with a few that glow in turn.

Dot Pattern

Installation#

pnpm dlx shadcn@latest add @balick/dot-pattern

Or pass the full URL: https://ui.balick.me/r/dot-pattern.json

Usage#

import { DotPattern } from "@/components/ui/dot-pattern"

export function Background() {
  return (
    <div className="relative h-96 overflow-hidden">
      <DotPattern glow={[[4, 3], [9, 6], [14, 2]]} />
    </div>
  )
}

Props#

Prop	Type	Default	Description
`width` Horizontal space between two dots, in pixels.	`number`	16	Horizontal space between two dots, in pixels.
`height` Vertical space between two dots, in pixels.	`number`	16	Vertical space between two dots, in pixels.
`radius` Radius of a dot, in pixels.	`number`	1	Radius of a dot, in pixels.
`glow` Dots that glow in turn, as [column, row] pairs.	`Array<[number, number]>`	—	Dots that glow in turn, as [column, row] pairs.
`duration` Duration of one glow, as a CSS time.	`string`	"3s"	Duration of one glow, as a CSS time.