ComponentsDotMatrixBackground
DotMatrixBackground
Add gentle pulses of light to a dot grid.
On this page
Install component source from the public registry, or use the local workspace package. Follow the setup guide first. The npm package is not published yet.
View registry files- Motion for React
(motion)Animations, transitions, and reduced-motion handling.
Shared foundation: React, clsx for conditional classes, tailwind-merge for resolving utility-class conflicts. Styles use Tailwind CSS and Dethink CSS variables.
Based on this component’s source and registry composition. Libraries used only in showcase examples are excluded.
Import the component into your page or component file.
import { DotMatrixBackground } from "@dethink/components";Try the examples, then open the code to use them in your app. The background fills its container; these previews bound it with a height utility.
Hero composition
The default composition: hero copy and actions render in the content slot above the animated layer, which never intercepts pointer events.
Feel the compute behind every answer
Brightness pulses roll through the dot field at seeded origins — ambient activity without literal imagery.
Show sourceexamples/dot-matrix-background/basic.tsx
"use client";
import { Badge, Button, DotMatrixBackground } from "@dethink/components";
export function DotMatrixBackgroundBasic() {
return (
<DotMatrixBackground
className="border-border h-[24rem] rounded-lg border"
tone="primary"
>
<div className="flex h-[24rem] flex-col items-center justify-center gap-4 px-6 text-center">
<Badge tone="primary" variant="soft">
AI-native
</Badge>
<h2 className="text-foreground max-w-xl text-3xl font-semibold tracking-tight">
Feel the compute behind every answer
</h2>
<p className="text-muted-foreground max-w-md text-sm leading-6">
Brightness pulses roll through the dot field at seeded origins —
ambient activity without literal imagery.
</p>
<div className="flex gap-3">
<Button>Try the model</Button>
<Button variant="outline">Read the docs</Button>
</div>
</div>
</DotMatrixBackground>
);
}Pointer-following glow
Set mode="follow" to brighten an aligned patch of dots beneath the mouse. The enhancement is mouse-only and automatically disabled for touch, reduced motion, and offscreen content.
Keep the signal in sight
A brighter patch of aligned dots follows the mouse while all content remains visible and interactive.
Show sourceexamples/dot-matrix-background/follow.tsx
"use client";
import { Badge, DotMatrixBackground } from "@dethink/components";
export function DotMatrixBackgroundFollow() {
return (
<DotMatrixBackground
className="border-border h-64 rounded-lg border"
density="dense"
mode="follow"
tone="primary"
>
<div className="flex h-64 flex-col items-center justify-center gap-3 px-6 text-center">
<Badge tone="primary" variant="soft">
Move your pointer
</Badge>
<h2 className="text-foreground text-2xl font-semibold tracking-tight">
Keep the signal in sight
</h2>
<p className="text-muted-foreground max-w-md text-sm leading-6">
A brighter patch of aligned dots follows the mouse while all content
remains visible and interactive.
</p>
</div>
</DotMatrixBackground>
);
}Tones, density, and speed
Every visual axis is a literal token-backed variant. Different seeds reshuffle the pulse origins deterministically.
Show sourceexamples/dot-matrix-background/tones.tsx
"use client";
import { DotMatrixBackground } from "@dethink/components";
export function DotMatrixBackgroundTones() {
return (
<div className="grid gap-4 sm:grid-cols-3">
<DotMatrixBackground
className="border-border h-48 rounded-lg border"
density="dense"
seed={3}
speed="fast"
tone="foreground"
>
<div className="flex h-48 items-end p-4">
<span className="text-muted-foreground text-xs font-medium">
tone="foreground" · dense · fast
</span>
</div>
</DotMatrixBackground>
<DotMatrixBackground
className="border-border h-48 rounded-lg border"
seed={5}
tone="muted"
>
<div className="flex h-48 items-end p-4">
<span className="text-muted-foreground text-xs font-medium">
tone="muted" · normal
</span>
</div>
</DotMatrixBackground>
<DotMatrixBackground
className="border-border h-48 rounded-lg border"
density="sparse"
intensity="bold"
seed={9}
speed="slow"
tone="primary"
>
<div className="flex h-48 items-end p-4">
<span className="text-muted-foreground text-xs font-medium">
tone="primary" · sparse · bold · slow
</span>
</div>
</DotMatrixBackground>
</div>
);
}Static frame
animate={false} — and any user with a reduced-motion preference — gets this composition: no loops mounted, still designed.
Designed at rest
animate={false} renders the same frame reduced-motion users see: the dot field with one soft highlight at the first seeded origin.
Show sourceexamples/dot-matrix-background/static.tsx
"use client";
import { DotMatrixBackground } from "@dethink/components";
export function DotMatrixBackgroundStatic() {
return (
<DotMatrixBackground
animate={false}
className="border-border h-56 rounded-lg border"
tone="primary"
>
<div className="flex h-56 flex-col items-center justify-center gap-2 px-6 text-center">
<h3 className="text-foreground text-xl font-semibold">
Designed at rest
</h3>
<p className="text-muted-foreground max-w-sm text-sm leading-6">
animate={"{false}"} renders the same frame reduced-motion users see:
the dot field with one soft highlight at the first seeded origin.
</p>
</div>
</DotMatrixBackground>
);
}DotMatrixBackground accepts div props plus the shared background contract: animate, density, intensity, speed, tone, and seed — plus interactive and mode for pointer-following glow behavior.
| Prop | What it does | Default |
|---|---|---|
animateboolean | Set to false to force the static composition regardless of OS motion preference: the dot field with one soft highlight at the first seeded origin, with no animation loops mounted. | true |
interactiveboolean | Enables the pointer-following glow when mode is follow. The enhancement only responds to a mouse pointer and is disabled for touch, reduced motion, and offscreen content. Set to false to keep the selected non-interactive composition. | true |
mode"pulse" | "follow" | pulse loops three seeded brightness ripples through the dot field. follow replaces the loop with one brighter, aligned patch that trails the mouse while it is over the background. | "pulse" |
density"sparse" | "normal" | "dense" | Dot spacing (48/32/20px). The pulse overlays reuse the same pattern, so alignment holds at every density. | "normal" |
intensity"faint" | "subtle" | "bold" | Opacity tier for the base dot field. Keep faint or subtle under body copy; bold is for short hero statements. | "subtle" |
speed"slow" | "normal" | "fast" | Pulse cycle duration (7/5/3s). Pulses stagger from seeded delays and pause automatically while the background is offscreen. | "normal" |
tone"foreground" | "muted" | "primary" | Semantic token driving the dot and pulse color via currentColor, so light and dark mode adapt automatically. | "muted" |
seednumber | Drives the three pulse origins and their stagger deterministically, so markup is SSR-stable across server and client renders. | 1 |
childrenReactNode | Hero content rendered in the content slot above the aria-hidden decorative layer. The layer is pointer-events-none, so children stay fully interactive. | Not set |
getDotMatrixBackgroundMotionConfig / getDotMatrixBackgroundGeometry / *ClassNames helpers(speed, reducedMotion) => config, (seed) => pulses, ({ className }) => string | Open-code escape hatches: read the resolved pulse transition, reuse the seeded pulse origins, or apply the root, layer, and content class recipes to custom elements. | Not set |