Dot Pattern

A field of dots behind content, faded toward the edges, with an optional slow pulse. One tiled radial gradient and a mask; pure CSS. Fills its positioned parent.

Dots.

Live, from the library itself: scroll, hover, navigate away and back. The demo is never gated.

Measured

JavaScript of its own

0 B

CSS 4.6 kB raw including the base tokens. Measured from a production build, and again in CI for every change that can move it.

Browser support

Baseline · widely available

Chrome 120 · Firefox 53 · Safari 15.4; needs mask-image.

Install

One command adds the integration, the base tokens and every component. Then import what you use.

npmpnpmbun

npx astro add moonarc

pnpm astro add moonarc

bunx astro add moonarc

src/pages/index.astro

---
import DotPattern from '@moonarc/core/DotPattern';
---
<section class="relative">
  <DotPattern pulse={5} />
  <h2 class="relative">Above the dots</h2>
</section>

Copy it into your project instead (shadcn registry)

Owns the file, no dependency. The registry item also installs the base tokens.

terminal

npx shadcn@latest add https://moonarc.dev/r/dot-pattern.json

The CLI needs a components.json and the @/* alias, which Setup has. The file lands in src/components/moonarc/.

Source

The whole component. Self-contained styles in a cascade layer so your classes always win; it imports nothing.

DotPattern.astro

---
/**
 * DotPattern — a field of dots behind content, faded at the edges, with an
 * optional slow pulse. Zero JS: one radial gradient tiled, and a mask.
 * Fills its positioned parent.
 */
import type { HTMLAttributes } from 'astro/types';

interface Props extends HTMLAttributes<'div'> {
  /** Distance between dots in px. */
  size?: number;
  /** Dot radius in px. */
  radius?: number;
  /** Dot colour. */
  color?: string;
  /** Fade toward the edges. */
  fade?: boolean;
  /** Pulse period in seconds; 0 keeps it still. */
  pulse?: number;
}

const { size = 20, radius = 1, color = 'var(--ma-glow)', fade = true, pulse = 0, class: className, style, ...rest } = Astro.props;
const vars = [`--ma-dp-size:${size}px`, `--ma-dp-r:${radius}px`, `--ma-dp-color:${color}`, `--ma-dp-pulse:${pulse}s`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
---

<div class:list={['ma-dot-pattern', className]} aria-hidden="true" data-fade={fade ? '' : undefined} data-pulse={pulse > 0 ? '' : undefined} style={vars} {...rest}></div>

<style is:global>
  @layer components {
    :where(.ma-dot-pattern) {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image: radial-gradient(circle, var(--ma-dp-color, var(--ma-glow)) var(--ma-dp-r, 1px), transparent calc(var(--ma-dp-r, 1px) + 0.5px));
      background-size: var(--ma-dp-size, 20px) var(--ma-dp-size, 20px);
    }
    :where(.ma-dot-pattern[data-fade]) {
      mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
    }
    :where(.ma-dot-pattern[data-pulse]) {
      animation: ma-dot-pattern var(--ma-dp-pulse, 4s) var(--ma-ease-in-out) infinite alternate;
    }
    @media (prefers-reduced-motion: reduce) {
      :where(.ma-dot-pattern) {
        animation: none;
      }
    }
  }

  @keyframes ma-dot-pattern {
    from {
      opacity: 0.5;
    }
    to {
      opacity: 1;
    }
  }
</style>

Show the whole file · 59 linesFold it back

Props

Prop	Type	Default	Description
`size`	`number`	`20`	Distance between dots in px.
`radius`	`number`	`1`	Dot radius in px.
`color`	`string`	`var(--ma-glow)`	Dot colour; the token is theme-aware.
`fade`	`boolean`	`true`	Radial mask toward the edges.
`pulse`	`number`	`0`	Seconds per pulse (opacity 0.5 ↔ 1); 0 keeps it still.

Reduced motion

No pulse.

With `ClientRouter`

CSS-only; nothing to rebind.

Why it is built this way

The pulse is opacity on the whole layer (compositor only); the gradient itself never changes.
Dot edge is radius + 0.5 px so it stays crisp at any device pixel ratio.

Replaces: DotPattern (Magic UI) · DotBackground (Aceternity). See the migration table.

Cursor Grid

Pointer

A field of cells that light up under the cursor and fade where it has been, with a slow idle sweep when nothing is touched.

every browserpointeralways

Grid Pattern

Backgrounds

A hairline grid behind content, faded toward the edges, optionally drifting one cell at a time.

every browseralways

Noise