Dot Matrix
A free animated dot grid background with a sweeping glow.
- Automated axe check
- Reduced-motion tested
- SSR build verified
- CSS and React
- No runtime packages
Dot Matrix is a free animated background component for Next.js and React that draws a static grid of tiny dots and sweeps a single soft glow diagonally across it. It is driven by plain CSS keyframes, styled with Tailwind, and renders as an absolutely positioned fill layer that you drop inside any relative container.
The dot grid is one repeating radial-gradient and never moves; the glow is masked by the identical dot pattern, so only the dots light up as it drifts past on a slow, transform-only sweep. The layer is decorative and ignores pointer events, an IntersectionObserver pauses the sweep while it is fully offscreen, and with prefers-reduced-motion enabled the highlight rests in place with zero movement.
Template Empire
A quiet grid of dots, lit by a passing glow
The dot grid behind this text never moves. A single soft highlight sweeps diagonally across it, masked by the same dot pattern, so only the dots light up as it passes. The layer never intercepts a click, never moves the layout, and goes completely still when you prefer reduced motion.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/bg-dot-matrixUsage
import { BgDotMatrix } from "@/components/bg-dot-matrix";
export function Example() {
return (
<section className="relative overflow-hidden">
<BgDotMatrix />
<div className="relative">
<h2 className="text-4xl font-semibold">Your content here</h2>
<p className="text-muted">The glow sweeps the dots behind it.</p>
</div>
</section>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | undefined | Additional classes merged onto the root fill layer. |
Customisation
Dot Matrix exposes three component tokens, declared in its registry item: --dots-color for the base dot colour (defaulting to the semantic border token), --dots-cell for the grid cell size (defaulting to 24px) and --dots-glow for the sweeping highlight colour (defaulting to the brand ramp). Override them from :root, or on any ancestor of the component, to retheme without touching the code:
:root {
--dots-color: var(--border);
--dots-glow: var(--color-accent-400);
--dots-cell: 32px;
}Frequently asked questions
- Is Dot Matrix free for commercial use?
- Yes. Dot Matrix is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Does Dot Matrix affect performance or accessibility?
- The sweep animates a single transform, so the browser compositor does the work; the dot grid, glow gradient and mask are all static. The animation pauses automatically while the component is fully offscreen. The layer is aria-hidden, never receives pointer events or focus, and with reduced motion enabled the highlight stays at rest while the dots remain fully visible.
- How do I change the dot colour, spacing or glow?
- Override the CSS custom properties --dots-color, --dots-cell and --dots-glow from :root or any ancestor element. The colours default to tokens from the library colour system, and --dots-cell accepts any CSS length to control dot spacing.