Spotlight Background

A sweeping spotlight background with three built-in looks — sweeping light cones, a rotating radar, and a static stage beam — that can track the cursor.

Loading preview…

npx shadcn@latest add https://webberui.com/r/spotlight-background.json

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Spotlight stylevariant

Animation speed multiplierspeed

Soft glow follows the cursorinteractive

Noise overlaygrain

<SpotlightBackground />

Installation

npx shadcn@latest add https://webberui.com/r/spotlight-background.json

Or, once registries are configured in components.json, install it as @webberui/spotlight-background.

Usage

import { SpotlightBackground } from "@/components/ui/spotlight-background";

<SpotlightBackground
  variant="sweep"
  interactive
  className="flex h-[420px] items-center justify-center"
>
  <h1 className="text-4xl font-bold text-neutral-50">Spotlight on you</h1>
</SpotlightBackground>

Foreground content is passed as children and layers above the light; the container itself has a dark base, so light-colored text gives the best contrast.

Variants

sweep (default): three light cones sweep left and right from a pivot at the top edge, each with its own period so they interleave.
radar: two opposing light wedges rotate around the center, like a radar or a lighthouse scan.
beam: one static stage beam angling in from the upper left, with a soft top glow that breathes slowly.

Props

Prop	Type	Default	Description
`variant`	`"sweep" \| "radar" \| "beam"`	`"sweep"`	Spotlight variant
`colors`	`string[]`	Near-white + indigo + sky	Light colors, mapped in order to each beam
`speed`	`number`	`1`	Animation speed multiplier — `>1` is faster, `<1` is slower
`interactive`	`boolean`	`false`	Overlays a soft glow that follows the cursor (mouse only)
`grain`	`boolean`	`false`	Overlays low-opacity grain to soften banding in the glow
`children`	`ReactNode`	—	Foreground content layered above the light
`className`	`string`	—	Appended styling; layout, height, and corner radius go here

How it works

The beams are layered with mix-blend-screen so they read as additive light on a dark base; the container defaults to bg-neutral-900 dark:bg-neutral-950, which you can override via className.
The light cones are narrowed into a cone shape with clip-path, and the outer and inner layers rotate independently: the outer leans toward the cursor while the inner runs the sweep loop, so the two transforms never fight each other.
The interactive glow tracks the cursor through a spring, so it moves with momentum; touch pointers do not trigger it, avoiding accidental motion on mobile.
A vignette at the edges focuses the light back toward the center, and grain further suppresses banding across large gradients.

Accessibility

When the user has "reduce motion" enabled at the system level, the beams rest at a static position — the sweep and rotation never start, and they no longer follow the cursor.
The entire light layer carries aria-hidden and pointer-events-none — decorative only, so it does not interfere with the semantics or interactivity of the foreground content.
Foreground legibility is yours to control: pair the dark base with light text, and add a text shadow or a semi-transparent backing plate yourself where needed.