Skip to content
Dethink Components
Dethink studio

ComponentsLightStreaksBackground

LightStreaksBackground

Add moving diagonal streaks of light behind your content.

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

Launching soon

Make launch day feel like launch day

Blurred diagonal streaks sweep through on staggered seeded loops — depth and motion without patterned geometry.

Show sourceexamples/light-streaks-background/basic.tsx
examples/light-streaks-background/basic.tsx
"use client";

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

export function LightStreaksBackgroundBasic() {
  return (
    <LightStreaksBackground
      className="border-border bg-foreground/[0.03] dark:bg-background 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">
          Launching soon
        </Badge>
        <h2 className="text-foreground max-w-xl text-3xl font-semibold tracking-tight">
          Make launch day feel like launch day
        </h2>
        <p className="text-muted-foreground max-w-md text-sm leading-6">
          Blurred diagonal streaks sweep through on staggered seeded loops —
          depth and motion without patterned geometry.
        </p>
        <div className="flex gap-3">
          <Button>Join the waitlist</Button>
          <Button variant="outline">Read the story</Button>
        </div>
      </div>
    </LightStreaksBackground>
  );
}

Tones, density, and speed

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

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

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

export function LightStreaksBackgroundTones() {
  return (
    <div className="grid gap-4 sm:grid-cols-3">
      <LightStreaksBackground
        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>
      </LightStreaksBackground>
      <LightStreaksBackground
        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>
      </LightStreaksBackground>
      <LightStreaksBackground
        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>
      </LightStreaksBackground>
    </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: one faint streak at its seeded position, blur retained, no loops mounted.

Show sourceexamples/light-streaks-background/static.tsx
examples/light-streaks-background/static.tsx
"use client";

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

export function LightStreaksBackgroundStatic() {
  return (
    <LightStreaksBackground
      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:
          one faint streak at its seeded position, blur retained, no loops
          mounted.
        </p>
      </div>
    </LightStreaksBackground>
  );
}

Props

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

LightStreaksBackground props
PropWhat it doesDefault
animatebooleanSet to false to force the static composition regardless of OS motion preference: one faint streak at its seeded position with blur retained, and no animation loops mounted.true
density"sparse" | "normal" | "dense"Streak count (3/4/5). Streaks never move in lockstep — each has a seeded delay and pause."normal"
intensity"faint" | "subtle" | "bold"Opacity tier for the streaks. Keep faint or subtle under body copy; bold is for short hero statements on dark canvases."subtle"
speed"slow" | "normal" | "fast"Sweep cycle duration (10/7/4.5s). Loops pause automatically while the background is offscreen."normal"
tone"foreground" | "muted" | "primary"Semantic token driving the streak color via currentColor, so light and dark mode adapt automatically."muted"
seednumberDrives streak positions and stagger deterministically, so markup is SSR-stable across server and client renders; change it to reshuffle the streaks.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
getLightStreaksBackgroundMotionConfig / getLightStreaksBackgroundGeometry / *ClassNames helpers(speed, reducedMotion) => config, (seed, density) => streaks, ({ className }) => stringOpen-code escape hatches: read the resolved sweep transition, reuse the seeded streak layout, or apply the root, layer, and content class recipes to custom elements.Not set