ComponentsDotMatrixBackground

DotMatrixBackground

Add gentle pulses of light to a dot grid.

On this page

Installation

Use this component from the local workspace package. Follow the setup guide first. A public npm package and registry are not available yet.

View registry files

Usage

Import the component into your page or component file.

Usage

import { DotMatrixBackground } from "@dethink/components";

Examples

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.

AI-native

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

examples/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.

Move your pointer

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

examples/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.

tone="foreground" · dense · fast

tone="muted" · normal

tone="primary" · sparse · bold · slow

Show sourceexamples/dot-matrix-background/tones.tsx

examples/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=&quot;foreground&quot; · 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=&quot;muted&quot; · 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=&quot;primary&quot; · 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

examples/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>
  );
}

Props

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.

DotMatrixBackground props
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