Border Beam

Zero-runtime CSS perimeter laser trace with hardware mask clipping and sub-pixel compositing.

CLI Installation

React

$pnpm dlxexhumaaddborder-beam--flavor=react

// 01Workbench

Interactive Specification & Studio

cards

Preset:

Viewport

Fluid 100%

Quantum Laser Perimeter

Sub-pixel hardware composite

120 FPS

Kinetic Orbital Vector

45 deg/s• Single Phase

2px stroke•8s cycle•200px arc

Parameters

10 Props

size

duration

borderWidth

colorFrom

colorTo

doubleBeam

endOpacity

opacity

blur

borderRadius

// 02Usage

Quick Start & Consumer Example

Copy-paste ready implementation for React (.tsx). Automatically updates when you modify parameters in the Workbench above.

BorderBeamDemo.tsx

React (.tsx)

import React from 'react';
import { BorderBeam } from '@/components/ui/BorderBeam';

export default function BorderBeamDemo() {
  return (
    <div className="flex min-h-screen items-center justify-center p-8 bg-[#090d16]">
      <div className="relative w-full max-w-md overflow-hidden rounded-2xl border border-[#223252] bg-[#131c2e] p-6 shadow-2xl">
        <div className="flex items-center justify-between">
          <span className="font-mono text-xs font-bold uppercase tracking-wider text-amber-500">
            Perimeter Trace // 120 FPS
          </span>
          <span className="inline-flex size-2 rounded-full bg-emerald-500 animate-pulse" />
        </div>
        <h3 className="mt-3 text-xl font-bold text-white">Quantum Border Beam</h3>
        <p className="mt-2 text-sm leading-relaxed text-slate-400">
          Zero-runtime GPU perimeter laser trace with hardware mask clipping and sub-pixel composite.
        </p>

        <BorderBeam
          size={200}
          duration={8}
          borderWidth={2}
          colorFrom="#ffaa40"
          colorTo="#9c40ff"
          doubleBeam={false}
          endOpacity={0}
          opacity={1}
        />
      </div>
    </div>
  );
}

// 03API Contract

Props & Configuration

Exhaustive parameter contract for Border Beam. Validated in the live Studio workbench above and statically checked across all 13 ecosystem templates.

Prop	Type	Default	Description
size	number	200	Length/size of the perimeter laser trace.
duration	number	8	Loop duration for one full border sweep.
borderWidth	number	2	Perimeter border stroke width.
colorFrom	color	#ffaa40	Starting gradient color.
colorTo	color	#9c40ff	Ending gradient color.
doubleBeam	boolean	false	Render a secondary beam located on the opposite side of the perimeter, orbiting in the same direction (180° phase offset).
endOpacity	number	0	Opacity of the beam tail at its trailing edge (0 for pure transparent).
opacity	number	1	Overall opacity of the border beam trace.
blur	number	0	Specular diffuse blur applied to the perimeter laser trace.
borderRadius	number	16	Corner radius of the perimeter path matching card borders.

size

number

Length/size of the perimeter laser trace.

Default:200

duration

number

Loop duration for one full border sweep.

Default:8

borderWidth

number

Perimeter border stroke width.

Default:2

colorFrom

color

Starting gradient color.

Default:#ffaa40

colorTo

color

Ending gradient color.

Default:#9c40ff

doubleBeam

boolean

Render a secondary beam located on the opposite side of the perimeter, orbiting in the same direction (180° phase offset).

Default:false

endOpacity

number

Opacity of the beam tail at its trailing edge (0 for pure transparent).

Default:0

opacity

number

Overall opacity of the border beam trace.

Default:1

blur

number

Specular diffuse blur applied to the perimeter laser trace.

Default:0

borderRadius

number

Corner radius of the perimeter path matching card borders.

Default:16

// 04Source Code

Component Source

Component source definition for React (.tsx). Toggle between the clean wrapper and the standalone ejected engine micro-kernel.

BorderBeam.tsx

import * as React from 'react';
import * as BorderBeamPrimitive from '@exhuma/core';
import { clsx } from 'clsx';

export interface BorderBeamProps extends React.ComponentPropsWithoutRef<typeof BorderBeamPrimitive.BorderBeam> {
  className?: string;
}

export const BorderBeam = React.forwardRef<HTMLDivElement, BorderBeamProps>(
  ({ className, children, ...props }, ref) => (
    <BorderBeamPrimitive.BorderBeam
      ref={ref}
      className={clsx(
        'pointer-events-none absolute inset-0 rounded-[inherit]',
        className
      )}
      {...props}
    >
      {children}
    </BorderBeamPrimitive.BorderBeam>
  )
);
BorderBeam.displayName = 'BorderBeam';

// 05Architecture

Lifecycle Safety & Performance

Engineered for high-frequency user interactions with zero memory leaks.

Teardown

Deterministic Cleanup

All pointer event listeners, scroll handlers, and resize observers are cleanly destroyed on component unmount, preventing lingering background processes.

Compositor

GPU Compositor Acceleration

Transform and opacity modifications run directly on the GPU compositor thread using will-change: transform without triggering browser layout recalculations.

// 06a11y

Accessibility Considerations

Fully compliant with WCAG guidelines and respects user motion preferences.

Motion

prefers-reduced-motion Support

When a user has prefers-reduced-motion: reduce enabled in their operating system, Exhuma components automatically disable 3D gyroscope tilt and spring animations, rendering static accessible content.

import React from 'react'; import { BorderBeam } from '@/components/ui/BorderBeam'; export default function BorderBeamDemo() { return ( <div className="flex min-h-screen items-center justify-center p-8 bg-[#090d16]"> <div className="relative w-full max-w-md overflow-hidden rounded-2xl border border-[#223252] bg-[#131c2e] p-6 shadow-2xl"> <div className="flex items-center justify-between"> <span className="font-mono text-xs font-bold uppercase tracking-wider text-amber-500"> Perimeter Trace // 120 FPS </span> <span className="inline-flex size-2 rounded-full bg-emerald-500 animate-pulse" /> </div> <h3 className="mt-3 text-xl font-bold text-white">Quantum Border Beam</h3> <p className="mt-2 text-sm leading-relaxed text-slate-400"> Zero-runtime GPU perimeter laser trace with hardware mask clipping and sub-pixel composite. </p> <BorderBeam size={200} duration={8} borderWidth={2} colorFrom="#ffaa40" colorTo="#9c40ff" doubleBeam={false} endOpacity={0} opacity={1} /> </div> </div> ); }

Prop

Type

Default

Description

size

number

200

Length/size of the perimeter laser trace.

duration

number

Loop duration for one full border sweep.

borderWidth

number

Perimeter border stroke width.

colorFrom

color

#ffaa40

Starting gradient color.

colorTo

color

#9c40ff

Ending gradient color.

doubleBeam

boolean

false

Render a secondary beam located on the opposite side of the perimeter, orbiting in the same direction (180° phase offset).

endOpacity

number

Opacity of the beam tail at its trailing edge (0 for pure transparent).

opacity

number

Overall opacity of the border beam trace.

blur

number

Specular diffuse blur applied to the perimeter laser trace.

borderRadius

number

Corner radius of the perimeter path matching card borders.

import * as React from 'react'; import * as BorderBeamPrimitive from '@exhuma/core'; import { clsx } from 'clsx'; export interface BorderBeamProps extends React.ComponentPropsWithoutRef<typeof BorderBeamPrimitive.BorderBeam> { className?: string; } export const BorderBeam = React.forwardRef<HTMLDivElement, BorderBeamProps>( ({ className, children, ...props }, ref) => ( <BorderBeamPrimitive.BorderBeam ref={ref} className={clsx( 'pointer-events-none absolute inset-0 rounded-[inherit]', className )} {...props} > {children} </BorderBeamPrimitive.BorderBeam> ) ); BorderBeam.displayName = 'BorderBeam';