Glowing Dot Grid

An interactive grid of dots that glow and expand on hover with beautiful proximity-based effects. Perfect for hero sections and interactive backgrounds.

Preview

Hey, Nyxhora UI is awesome right? ✨

Move your cursor around!

Installation

Use the CLI to add this component to your project.

npx shadcn@latest add https://ui.nyxhora.com/r/glowing-dot-grid.json

Usage

tsx
19 lines
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { GlowingDotGrid } from "@/components/ui/glowing-dot-grid"

export default function Hero() {
  return (
    <div className="h-screen w-full">
      <GlowingDotGrid 
        columns={16}
        rows={10}
        dotColor="#A9C9FF"
        hoverScale={15}
        showVignette={true}
      >
        <div className="text-center">
          <h1 className="text-4xl font-bold text-white">Your Hero Title</h1>
        </div>
      </GlowingDotGrid>
    </div>
  )
}

Color Variations

Cyan Theme

Cyan Dots

Purple Theme

Purple Dots

Pink Theme

Pink Dots

Green Theme

Green Dots

Examples

Dense Grid

Dense Grid

Large Glow Effect

Big Glow!

No Vignette

Clean Look

Props

PropTypeDefaultDescription
columnsnumber12Number of columns in the grid
rowsnumber8Number of rows in the grid
dotColorstring#A9C9FFColor of the dots
dotSizenumber3Base dot size in pixels
gapnumber2.5Gap between dots in rem
hoverScalenumber10Size multiplier for hover effect
gradientStartstring#0a0a0aBackground gradient start color
gradientEndstring#0a0a0aBackground gradient end color
showVignettebooleantrueShow corner shadow/vignette effect
childrenReact.ReactNodeundefinedContent to display over the grid
classNamestringundefinedAdditional CSS classes