Skip to content
Dethink Components
Dethink studio

ComponentsGridBeamsBackground

GridBeamsBackground

Add moving light beams to a subtle grid background.

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 { GridBeamsBackground } 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.

Now in beta

Ship dashboards your team actually trusts

Production-grade components for SaaS, internal tools, and AI-native products — with the wiring already done.

Show sourceexamples/grid-beams-background/basic.tsx
examples/grid-beams-background/basic.tsx
"use client";

import { Badge, Button, GridBeamsBackground } from "@dethink/components";

export function GridBeamsBackgroundBasic() {
  return (
    <GridBeamsBackground
      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">
          Now in beta
        </Badge>
        <h2 className="text-foreground max-w-xl text-3xl font-semibold tracking-tight">
          Ship dashboards your team actually trusts
        </h2>
        <p className="text-muted-foreground max-w-md text-sm leading-6">
          Production-grade components for SaaS, internal tools, and AI-native
          products — with the wiring already done.
        </p>
        <div className="flex gap-3">
          <Button>Get started</Button>
          <Button variant="outline">View docs</Button>
        </div>
      </div>
    </GridBeamsBackground>
  );
}

Tones, density, and speed

Every visual axis is a literal token-backed variant. Different seeds reshuffle beam placement deterministically.

tone="foreground" · dense · fast
tone="muted" · normal
tone="primary" · sparse · bold · slow
Show sourceexamples/grid-beams-background/tones.tsx
examples/grid-beams-background/tones.tsx
"use client";

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

export function GridBeamsBackgroundTones() {
  return (
    <div className="grid gap-4 sm:grid-cols-3">
      <GridBeamsBackground
        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>
      </GridBeamsBackground>
      <GridBeamsBackground
        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>
      </GridBeamsBackground>
      <GridBeamsBackground
        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>
      </GridBeamsBackground>
    </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 grid plus two frozen beam segments, no loops mounted.

Show sourceexamples/grid-beams-background/static.tsx
examples/grid-beams-background/static.tsx
"use client";

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

export function GridBeamsBackgroundStatic() {
  return (
    <GridBeamsBackground
      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 grid plus two frozen beam segments, no loops mounted.
        </p>
      </div>
    </GridBeamsBackground>
  );
}

Props

GridBeamsBackground accepts div props plus the shared background contract: animate, density, intensity, speed, tone, and seed.

GridBeamsBackground props
PropWhat it doesDefault
animatebooleanSet to false to force the static composition regardless of OS motion preference: the grid plus two frozen beam segments, with no animation loops mounted.true
density"sparse" | "normal" | "dense"Grid cell size (96/56/32px) and beam count (3/5/7). Denser grids suit tighter, more technical compositions."normal"
intensity"faint" | "subtle" | "bold"Opacity tier for the grid pattern. Keep faint or subtle under body copy; bold is for short hero statements."subtle"
speed"slow" | "normal" | "fast"Beam traversal duration (9/6/3.5s per sweep). Loops pause automatically while the background is offscreen."normal"
tone"foreground" | "muted" | "primary"Semantic token driving the grid and beam color via currentColor, so light and dark mode adapt automatically."muted"
seednumberDrives all pseudo-random beam placement deterministically. The same seed renders the same layout on the server and every client, so markup is SSR-stable; change it to reshuffle the beams.1
childrenReactNodeHero 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
getGridBeamsBackgroundMotionConfig / getGridBeamsBackgroundGeometry / *ClassNames helpers(speed, reducedMotion) => config, (seed, density) => beams, ({ className }) => stringOpen-code escape hatches: read the resolved loop transition, reuse the seeded beam geometry, or apply the root, layer, and content class recipes to custom elements.Not set