---
title: Dot Pattern with Glow
description: A dot background that reveals a colored glow under the pointer.
sidebar:
  badge: Astro
---

```astro
---
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>
```

## Installation

```bash
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.

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

```astro
<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.

```astro
---
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>
```

## API Reference

| Prop | Default | Description |
| --- | --- | --- |
| `glowColor` | brand blue, or primary | CSS color of the glow. |
| `glowSize` | `96` | Radius of the glow, in pixels. |
| `glowOpacity` | `1` | Opacity of the glow while the pointer is inside. |
| `maskDotSize` | `1.25` | Radius of each dot in the glow mask, in pixels. |
| `dotLayerProps` | — | Props for the base `DotPattern`, including `dotSize`, `dotSpace`, `dotColor`, and `dotBg`. |
| `class` | — | Extra classes on the container. |

See the [registry source](/r/dot-pattern-with-glow.json) for the component source.