Dot Pattern with Glow

A dot background that reveals a colored glow under the pointer.

---
import { DotPatternWithGlow } from "@/components/patterns/dot-pattern-with-glow"
---

<DotPatternWithGlow class="bg-background flex h-72 w-full items-center justify-center overflow-hidden rounded-lg border">
  <p class="text-sm font-medium">Move the pointer</p>
</DotPatternWithGlow>

Open preview in a new tab

Installation

bunx --bun shadcn@latest add @gnosticai/dot-pattern-with-glow

Usage

The component is the positioned container. Move the pointer over it to show the glow. The slot renders inside that container, under the dot layers.

import { DotPatternWithGlow } from "@/components/patterns/dot-pattern-with-glow"

<DotPatternWithGlow class="h-72">
  <p>Move the pointer</p>
</DotPatternWithGlow>

The glow color uses --color-brand-blue when that token exists. Otherwise it uses --color-primary.

Examples

Larger glow

glowSize sets the glow radius. maskDotSize sets the radius of each glowing dot. dotLayerProps sets the base dots and keeps the mask on the same grid.

---
import { DotPatternWithGlow } from "@/components/patterns/dot-pattern-with-glow"
---

<DotPatternWithGlow
  class="bg-background flex h-72 w-full items-center justify-center overflow-hidden rounded-lg border"
  glowColor="color-mix(in oklch, var(--color-foreground) 75%, transparent)"
  glowSize={140}
  maskDotSize={2}
  dotLayerProps={{ dotSize: 1.25, dotSpace: 22 }}
>
  <p class="text-sm font-medium">Larger glow</p>
</DotPatternWithGlow>