Grid patternPro
A technical grid background where a few cells gently light up.
// Built on a grid
Precise by default
When to use
- Section and hero backgrounds with a technical, precise feel.
When not to use
- Behind busy imagery.
Installation
Usage
Import it from @/components/ui/grid-pattern after installing.
example.tsx
import { GridPattern } from "@/components/ui/grid-pattern";
<section className="relative overflow-hidden">
<GridPattern size={40} flicker={10} />
<h2 className="relative">Precise by default</h2>
</section>API reference
GridPattern
An SVG grid that fills its parent, with a few softly glowing cells.
| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 40 | Cell size in px. |
| flicker | number | 10 | Glowing cells. |
| fade | "radial" | "bottom" | "none" | "radial" | Edge fade. |
| color | string | var(--brand) | Glow color. |
Accessibility
- Decorative and aria-hidden; no glow under reduced motion.
Motion
- Cells fade in and out on staggered timers.
Responsive behavior
- Fills any size; the grid stays crisp.
Performance
- A single SVG pattern plus a handful of animated rects.
Notes for AI
- Uses var(--grid-line) for lines when your theme defines it.
This page as Markdown, for assistants and coding agents:
/components/grid-pattern/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt