Border Beam

Stable

A kinetic rotating border gradient beam that casts illuminated laser highlights around cards, dialogs, and active scanner widgets.

Installation

$pnpm add @siberui/react

Import

tsx

import { BorderBeam } from '@siberui/react';

Cyberpunk Neon Beam

The variant="neon" preset generates a high-velocity electric cyan laser beam tracing the edge of any container.

QUANTUM_RADAR_ACTIVE

tsx

<div className="relative flex min-h-52 w-full max-w-md flex-col items-center justify-center p-8 rounded-2xl bg-[#050811] border border-cyan-500/20 shadow-2xl overflow-hidden">
  <div className="flex flex-col items-center gap-2.5 z-10 px-4 text-center">
    <Zap className="h-6 w-6 text-cyan-400 animate-pulse" />
    <span className="font-mono text-xs font-bold text-cyan-300 tracking-wider uppercase">QUANTUM_RADAR_ACTIVE</span>
  </div>
  
  {/* Rotating Neon Laser Beam */}
  <BorderBeam variant="neon" size={140} duration={5} borderWidth={2} glow />
</div>

Color & Theme Presets

Pre-calibrated cyberpunk and semantic color presets: neon, purple, green, destructive, amber, and glass.

neon

purple

green

destructive

amber

glass

tsx

<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
  <div className="relative h-32 p-6 rounded-xl bg-[#070b14] flex items-center justify-center overflow-hidden">
    <span className="text-cyan-400 font-mono text-xs font-bold tracking-wider">neon</span>
    <BorderBeam variant="neon" size={100} duration={6} />
  </div>
  <div className="relative h-32 p-6 rounded-xl bg-[#070b14] flex items-center justify-center overflow-hidden">
    <span className="text-violet-400 font-mono text-xs font-bold tracking-wider">purple</span>
    <BorderBeam variant="purple" size={100} duration={6} />
  </div>
  <div className="relative h-32 p-6 rounded-xl bg-[#070b14] flex items-center justify-center overflow-hidden">
    <span className="text-emerald-400 font-mono text-xs font-bold tracking-wider">green</span>
    <BorderBeam variant="green" size={100} duration={6} />
  </div>
  <div className="relative h-32 p-6 rounded-xl bg-[#070b14] flex items-center justify-center overflow-hidden">
    <span className="text-rose-400 font-mono text-xs font-bold tracking-wider">destructive</span>
    <BorderBeam variant="destructive" size={100} duration={6} />
  </div>
  <div className="relative h-32 p-6 rounded-xl bg-[#070b14] flex items-center justify-center overflow-hidden">
    <span className="text-amber-400 font-mono text-xs font-bold tracking-wider">amber</span>
    <BorderBeam variant="amber" size={100} duration={6} />
  </div>
  <div className="relative h-32 p-6 rounded-xl bg-[#070b14] flex items-center justify-center overflow-hidden">
    <span className="text-white font-mono text-xs font-bold tracking-wider">glass</span>
    <BorderBeam variant="glass" size={100} duration={6} />
  </div>
</div>

Frosted Cyber-Glass Panel

Superimposing a glowing BorderBeam on top of a frosted glass container with a circuit grid texture creates an illuminated tactical cyber-deck surface.

ENCRYPTED_VAULT

SECURE

Biometric handshake verified. Memory matrix isolated.

tsx

<div className="p-8 rounded-2xl border border-white/10 bg-[#060913] bg-[url('/textures/circuit-board.svg')] bg-repeat flex justify-center">
  <div className="relative w-full max-w-md p-6 rounded-2xl bg-white/[0.04] backdrop-blur-xl border border-white/10 shadow-2xl overflow-hidden">
    <div className="space-y-2 z-10 relative">
      <Row justify="between" align="center">
        <span className="font-mono text-xs text-cyan-300 font-bold">ENCRYPTED_VAULT</span>
        <Badge variant="glass" dot dotColor="green">SECURE</Badge>
      </Row>
      <p className="text-xs text-slate-300">Biometric handshake verified. Memory matrix isolated.</p>
    </div>
    
    <BorderBeam variant="neon" size={160} duration={7} borderWidth={1.5} glow />
  </div>
</div>

Dual Counter-Rotating Beams

Layer multiple BorderBeam components with complementary colors and inverted directions (reverse={true}) to build radar and dual-cycle scanning visuals.

DUAL_CORE_INTERSECT

tsx

<div className="relative flex h-40 w-full max-w-md items-center justify-center rounded-2xl bg-[#050811] border border-white/10 overflow-hidden">
  <span className="font-mono text-xs text-slate-300">DUAL_CORE_INTERSECT</span>
  
  {/* Forward Cyan Beam */}
  <BorderBeam variant="neon" size={120} duration={6} />
  
  {/* Reverse Violet Beam */}
  <BorderBeam variant="purple" size={120} duration={6} reverse delay={3} />
</div>

Threat Scanner Card Composition

Integrate BorderBeam into security widgets, active deployment progress cards, and live anomaly monitors.

DEFENSE_FIREWALL_RADAR

ACTIVE

Continuous perimeter sweep in progress. 0 quantum signature anomalies detected in sector 4.

SWEEP FREQ: 2.4 GHz

tsx

<Card className="relative max-w-md mx-auto border-cyan-500/30 bg-[#070b14] overflow-hidden shadow-2xl">
  <CardContent className="p-6 space-y-4 relative z-10">
    <Row justify="between" align="center">
      <div className="flex items-center gap-2">
        <Radio className="h-4 w-4 text-cyan-400 animate-pulse" />
        <span className="font-mono font-bold text-sm text-slate-100">DEFENSE_FIREWALL_RADAR</span>
      </div>
      <Badge variant="neon" size="sm">ACTIVE</Badge>
    </Row>
    <p className="text-xs text-slate-400 leading-relaxed">
      Continuous perimeter sweep in progress. 0 quantum signature anomalies detected in sector 4.
    </p>
    <Row justify="between" align="center">
      <span className="font-mono text-xs text-cyan-300">SWEEP FREQ: 2.4 GHz</span>
      <Button variant="glass" size="sm">Re-calibrate</Button>
    </Row>
  </CardContent>

  <BorderBeam variant="neon" size={150} duration={6} borderWidth={2} glow />
</Card>

API Reference

PROPERTIES (9)← swipe to inspect →

Property	Description	Type	Default
variant	Pre-calibrated gradient color pair preset.	"neon" \| "purple" \| "destructive" \| "green" \| "amber" \| "glass"	"neon"
size	Size / length of the traveling laser beam in pixels.	number	140
duration	Full 360-degree rotation cycle duration in seconds.	number	6
delay	Initial animation delay offset in seconds.	number	0
borderWidth	Stroke thickness of the perimeter beam in pixels.	number	1.5
reverse	Inverts rotation direction from clockwise to counter-clockwise.	boolean	false
glow	Casts an atmospheric exterior laser halo blur.	boolean	false
colorFrom	Custom gradient head starting color (hex, rgb, or hsl).	string	"#ffffff"
colorTo	Custom gradient tail ending color.	string	"transparent"

Accessibility

BorderBeam is purely decorative and automatically marked with pointer-events-none so it never intercepts clicks or touch events.
Respects prefers-reduced-motion: Continuous spinning rotation halts gracefully for users with vestibular sensitivities.

Best Practices

Overflow Clipping: Always ensure the parent container includes relative overflow-hidden and inherits border radius.
Visual Weight: Avoid placing more than one active BorderBeam in the same viewport section to keep user attention focused on primary highlighted cards.