Stepwise UI

Dotted Spotlight

A dot grid with a mouse-follow flashlight - dots brighten near the cursor. Absolutely positioned to fill its nearest positioned ancestor - give the parent relative and a height. Looking for the plain version? Dotted Grid has its own page.

Installation

npx stepwise-ui add dotted-spotlight
import { DottedSpotlight } from '@/components/stepwise/dotted-spotlight'

<div className="relative h-64">
  <DottedSpotlight />
</div>

Props

PropTypeDescription
size
number
Pattern tile size in px. Default 24.
dotSize
number
Dot radius in px. Default 1.5.
radius
number
Flashlight radius, px. Default 400.
faded
boolean
Fade the pattern out toward the edges. Default true.
className
string
Merged onto the root.