Animated Grid Pattern

A tiled SVG grid where a handful of cells softly pulse in and out, then teleport to a new random cell on each cycle — a "breathing" graph-paper backdrop for heroes and section bands. Re-authored from the MagicUI pattern to the Interlace component floor.

decorativeclientuiv1.1.0

Animated Grid Pattern — live rendermagicui-animatedgridpattern--default ↗

Rendered from the story the storybook (a11y) CI gate runs axe against — the preview can't show something that hasn't been verified.

Install

Two equivalent paths — the URL works in any shadcn-CLI setup; the alias works once you've registered @interlace in your components.json.

Via shadcn URL

npx shadcn@latest add https://ds.interlace.tools/r/animated-grid-pattern.json

With the @interlace alias

npx shadcn@latest add @interlace/animated-grid-pattern

Behavior

What this component does — the keyboard path, the measured colour, the text equivalent and the states it can be in. Every figure below is read out of the test or the source that enforces it by scripts/build-behavior-map.mjs, so nothing here can outlive the gate that keeps it true.

Measured contrast

packages/ui/__tests__/theme-contract-lock.test.ts ↗

Every semantic colour pair this component's own source uses, measured against the shipped hexes in all 4 theme × scheme combinations. The tightest is muted-foreground on background at 7.82:1 (harbor · light), against a floor of 4.5:1.

Measured WCAG contrast ratios per token pair and theme
Pair	interlacelight	interlacedark	harborlight	harbordark	Floor
muted-foreground on backgroundsecondary copy	9.41:1	11.32:1	7.82:1	9.52:1	4.5:1SC 1.4.3
muted-foreground on cardsecondary copy in a card	9.41:1	10.48:1	8.25:1	8.64:1	4.5:1SC 1.4.3

Text pairs are held to 4.5:1 (WCAG 2.2 SC 1.4.3); borders, rings and chart axes to 3:1 (SC 1.4.11 non-text). Bold is the worst cell in the row — the one a brand fork has to keep an eye on.

Runtime contract

packages/ui/vitest.config.ts ↗

Where it renders, how narrow it survives, and whether its lines are inside the coverage gate — three answers a consumer needs before the paste, not after the bug.

Render boundary: 'use client'
Hydrates. It brings JavaScript to any route that imports it — put the boundary here, not at the page.
Minimum viewport: none declared
No width floor: it takes the width it is given. Its container owns the layout question.
Coverage gate: not in the gate
The 100% gate currently covers src/charts/**/*.{ts,tsx} and src/lib/**/*.{ts,tsx} and src/primitives/{button-variants,data-state-model,meter-scale,skeleton-variants}.ts and src/primitives/{alert,aspect-ratio,avatar,badge,box,breadcrumb,button,callout,card,checkbox,container,data-state,focus-ring,grade-badge,grid,input,label,meter,pagination,published-date,reading-time,section,section-boundary,separator,skip-link,stack,stat-strip,tag,textarea,typography,visually-hidden}.tsx. This file is outside it — the glob widens in phase 7.2.

History

This component is at v1.1.0, first shipped in @interlace/ui 1.0.0. The version is stamped as a banner into the file the install writes, so the copy in your tree says which one you have — compare it with the number above before deciding whether to re-run the install.

No release note names this component yet. It shipped with the release above and has not changed since — see the full changelog for what moved elsewhere in the DS.

Import

Single named export.

Public API

import { AnimatedGridPattern } from '@/components/ui/magicui/animated-grid-pattern';

API reference

Parsed from the type declarations in the source — the same file the install writes into your tree, so this table can't drift from the component you get.

AnimatedGridPatternProps

Prop	Type	Description
width	number	Width of a single grid cell, in pixels. @default 40
height	number	Height of a single grid cell, in pixels. @default 40
x	number	Horizontal offset of the pattern origin, in pixels. A small negative value hides the seam at the left edge. @default -1
y	number	Vertical offset of the pattern origin, in pixels. A small negative value hides the seam at the top edge. @default -1
strokeDasharray	number	Dash length for the grid lines. `0` draws solid lines. @default 0
numSquares	number	Number of cells pulsing at once. Clamped to the cells that fit the measured container so a small surface never requests more than it has. @default 50
maxOpacity	number	Peak opacity each cell fades to at the top of its pulse (0–1). @default 0.5
duration	number	Duration of a single fade-in/out cycle, in seconds. @default 4
repeatDelay	number	Pause between a cell finishing its cycle and teleporting to a new position, in seconds. @default 0.5

Accessibility

Every story for this component is rendered headlessly and checked with axe-core (wcag2aa, wcag22aa, best-practice, ACT) on every PR. That gate has no continue-on-error, so what ships has zero known violations.

What follows is what static analysis can see. Axe cannot press a key and never sees an overlay open, so the operable-without-a-mouse claim lives in Behavior instead, where the keyboard path is replayed step by step.

Focus + keyboard behaviour: Native element semantics — no interaction layer to get wrong.
Focus ring (WCAG 2.2 SC 2.4.13): Not focusable — no focus indicator required.
Reduced motion: Animation is gated on prefers-reduced-motion.
ARIA in the source: aria-hidden

Examples

3 more states from the same story file.

densemagicui-animatedgridpattern--dense ↗

sparsemagicui-animatedgridpattern--sparse ↗

large dashed cellsmagicui-animatedgridpattern--large-dashed-cells ↗

R-rule compliance

Every primitive in @interlace/ui models to the portable 26-rule floor enforced by the componentApi ESLint preset. The cells below pin exactly where each rule applies in this file.

Rule	Concept	Where
R4	Extends native el + JSDoc	`ComponentPropsWithoutRef<"svg">`; every public prop documented with `@default`
R5	`data-testid` typed, no default	`"data-testid"?: string` — consumer supplies the selector
R6	`data-slot` on the root	`data-slot="animated-grid-pattern"` on the `<svg>`
R7	className merged + ...rest + ref	`cn(...)`, `{...props}`, `ref` forwarded to the root `<svg>`
R8	Booleans no `isXxx`	No boolean props; numeric/string knobs only
R18	Tailwind only	No inline `style`; geometry is SVG attributes, color is a Tailwind class
R19	Tokens only — no raw color	Color via `currentColor` (default class `text-muted-foreground/20`); no hex
R23	CLS=0	`absolute inset-0 pointer-events-none` decorative chrome — reserves no flow space
R25	Perf — `'use client'` justified	Reads `ResizeObserver` + `useReducedMotion`; gated to interactive use only
R26	A11y	`aria-hidden` — purely decorative, never announced; zero axe suppressions

Dependencies

Base UI primitive: Native / no Base UI dependency
Lucide icons: none
NPM dependencies: motion
Registry dependencies: @interlace/theme
@interlace/cn
@interlace/use-reduced-motion

Source

The full implementation — components/ui/magicui/animated-grid-pattern.tsx once installed.

328 lines · TypeScript

github ↗

"use client";

import {
  forwardRef,
  useCallback,
  useEffect,
  useId,
  useMemo,
  useRef,
  useState,
  type ComponentPropsWithoutRef,
} from "react";

// @interlace/animated-grid-pattern v1.1.0 — Interlace design system.
// Docs, props and live preview: https://ds.interlace.tools/c/animated-grid-pattern
// What changed since: https://ds.interlace.tools/c/animated-grid-pattern#history
// Generated banner — keep it, the upgrade diff reads this version.

/**
 * @interlace/ui — AnimatedGridPattern (decorative background primitive)

…308 more lines…

Registry JSON

The raw registry record — what the shadcn CLI fetches.

/r/animated-grid-pattern.json