# Grid Pattern (Moonarc)

A hairline grid behind content, faded toward the edges, optionally drifting one cell at a time. Two repeating gradients and a mask; pure CSS. Fills its positioned parent.

- Import: `import GridPattern from '@moonarc/core/GridPattern'`
- Install: `npx astro add moonarc` · copy-paste: `npx shadcn@latest add https://moonarc.dev/r/grid-pattern.json`
- Tier A · category background · trigger always
- Readout: `<GridPattern size={32}>`
- Browser support: widely (Chrome 120 · Firefox 53 · Safari 15.4)
- Measured cost: 0 B JS (CSS 4.7 kB raw)
- Page: https://moonarc.dev/components/grid-pattern/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `size` | `number` | `32` | Cell size in px. |
| `color` | `string` | `var(--ma-edge)` | Line colour; the token is theme-aware. |
| `fade` | `boolean` | `true` | Radial mask so the grid dissolves toward the edges. |
| `drift` | `number` | `0` | Seconds per one-cell drift; 0 keeps it still. Linear, so the loop has no visible seam. |

## Usage

```astro
<section class="relative">
  <GridPattern size={40} drift={12} />
  <h2 class="relative">Above the grid</h2>
</section>
```

## Reduced motion

The grid holds still.

## With ClientRouter

CSS-only; nothing to rebind.

## Craft

- Drifting exactly one cell per loop makes the loop point invisible.
- The mask is on the pattern, not the parent, so content above keeps full contrast.
- background-position moves the tiled texture: no layout, but the box repaints every frame.

## Replaces

- GridPattern (Magic UI)
- GridBackground (Aceternity)

## Source

```astro
---
/**
 * GridPattern — a hairline grid behind content, faded at the edges, with an
 * optional slow drift. Zero JS: two repeating gradients and a mask. Fills
 * its positioned parent.
 */
import type { HTMLAttributes } from 'astro/types';

interface Props extends HTMLAttributes<'div'> {
  /** Cell size in px. */
  size?: number;
  /** Line colour. */
  color?: string;
  /** Fade the grid toward the edges with a radial mask. */
  fade?: boolean;
  /** Drift one cell every `drift` seconds; 0 keeps it still. */
  drift?: number;
}

const { size = 32, color = 'var(--ma-edge)', fade = true, drift = 0, class: className, style, ...rest } = Astro.props;
const vars = [`--ma-gp-size:${size}px`, `--ma-gp-color:${color}`, `--ma-gp-drift:${drift}s`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
---

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

<style is:global>
  @layer components {
    :where(.ma-grid-pattern) {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image:
        linear-gradient(to right, var(--ma-gp-color, var(--ma-edge)) 1px, transparent 1px),
        linear-gradient(to bottom, var(--ma-gp-color, var(--ma-edge)) 1px, transparent 1px);
      background-size: var(--ma-gp-size, 32px) var(--ma-gp-size, 32px);
    }
    :where(.ma-grid-pattern[data-fade]) {
      mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
    }
    :where(.ma-grid-pattern[data-drift]) {
      animation: ma-grid-pattern var(--ma-gp-drift, 8s) linear infinite;
    }
    @media (prefers-reduced-motion: reduce) {
      :where(.ma-grid-pattern) {
        animation: none;
      }
    }
  }

  @keyframes ma-grid-pattern {
    to {
      background-position: var(--ma-gp-size, 32px) var(--ma-gp-size, 32px);
    }
  }
</style>

```