ScanBeam

Animated gradient beam that sweeps across its container, creating a radar/scanner aesthetic. Renders as an absolutely positioned overlay with configurable color, speed, size, and direction.

Default Scan Beam

Preview
Content with scan beam overlay

Speed Variants

Preview
Slow (6s)
Normal (3s)
Fast (1.5s)

Direction

Preview
Sweep Down
Sweep Up

Custom Color & Opacity

Preview
Green beam
Red beam

Beam Size

Preview
Thin beam (10%)
Wide beam (40%)

Props

PropTypeDefaultDescription
colorstringvar(--spectre-primary)Beam color. Accepts any CSS color value or CSS variable. Defaults to the theme primary.
opacitynumber0.3Opacity of the sweep beam (0 to 1).
speed"slow" | "normal" | "fast""normal"Animation speed of the sweep. slow = 6s, normal = 3s, fast = 1.5s.
sizenumber20Height of the beam as a percentage of the container (e.g. 20 = 20%).
direction"down" | "up""down"Direction of the sweep animation.
classNamestring-Additional CSS classes for the overlay container.

Usage Tips

  • The parent container must have position: relative and overflow: hidden for the beam to be contained properly.
  • Content inside the container should use className="relative z-10" to appear above the beam layer.
  • Recommended opacity range: 0.05–0.15 for subtle ambiance, 0.15–0.3 for a prominent sweep effect.
  • When using a custom color, pass a full CSS color value (e.g. #22c55e, rgb(34, 197, 94)). CSS variables like var(--spectre-primary) also work.
  • Works great as a hero section effect, dashboard headers, or card decorations.
  • Combine with ScanlineOverlay for a layered CRT + radar aesthetic.
Preview
Combined effectsScanBeam + your content

Accessibility

  • The overlay has aria-hidden="true" and is invisible to screen readers.
  • Uses pointer-events-none so it does not interfere with user interactions on content beneath it.
  • Purely decorative - no interactive elements or meaningful content.