GridDotsBackground NEW
A high-performance, CSS-only background pattern component featuring animated dots or grids.
Preview/Playground
Created by 
Barsan
Astro ---
import GridDotsBackground from "@astroanimate/core/GridDotsBackground";
---
<GridDotsBackground
variant="dots"
animate={true}
mask={true}
height="400px"
>
<h1>Welcome to AstroAnimate</h1>
</GridDotsBackground>Installation
bash
npm install @astroanimate/coreUsage
---
import GridDotsBackground from "@astroanimate/core/GridDotsBackground";
---
<GridDotsBackground variant="dots" animate={true} mask={true} height="400px">
<div style="position: relative; z-index: 10;">
<h1>Welcome to AstroAnimate</h1>
</div>
</GridDotsBackground>Renders a subtle, ambient background pattern behind nested slot content.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "dots" | "grid" | "dots" | Visual pattern style |
dotColor | string | "rgba(255,255,255,0.25)" | Color of the dots or grid lines |
dotSize | string | "2px" | Thickness or diameter of the pattern |
gap | string | "32px" | Spacing between dots or grid lines |
mask | boolean | false | Apply a radial fade-out mask at the edges |
animate | boolean | false | Enable a continuous ambient drifting animation |
height | string | "300px" | Height of the background container |
bgColor | string | "#0f0f0f" | Base background color |
mainClassName | string | "" | Additional CSS classes |
Use When
- Designing modern, tech-focused landing pages and hero sections
- Needing subtle depth and ambient motion without sacrificing page performance
- Creating "blueprint" or "space" aesthetics
Avoid When
- Nesting behind dense, low-contrast text (unless using the mask prop to clear the center)
- Building complex, multi-colored illustrated backgrounds
Accessibility
- Fully respects
prefers-reduced-motion: reduceby disabling the infinite CSS drift animation
Performance
- Zero Hydration: Contains absolutely no JavaScript; strictly built with CSS
- Low DOM Footprint: Achieves the pattern effect using a single DOM element with
radial-gradientandlinear-gradient, avoiding hundreds of nested SVG nodes
Credits
- Credit to @Barsan
