Dot Grid Spotlight

Interactive dot grid with a cursor-tracking spotlight effect.

Use cases

Cover area at the top of a profile page.
Background behind a hero section.

Installation

pnpm dlx shadcn@latest add @ncdai/dot-grid-spotlight

Usage

import { DotGridSpotlight } from "@/components/dot-grid-spotlight"

<div className="relative aspect-square w-xs">
  <DotGridSpotlight />
</div>

API reference

DotGridSpotlight

Prop

Type

Credits

ChatGPT

License and usage

Free to use and modify in both personal and commercial projects.
Attribution is appreciated but not required.
Released under the MIT License.

Was this helpful?