Border Beam

Overview

BorderBeam draws an animated light traveling around a container border. It recalculates the path on resize so the effect stays aligned with the component.

Usage

import { BorderBeam } from "@tilt-legal/cubitt-components/primitives";

<div className="relative overflow-hidden rounded-xl border">
  <BorderBeam lightColor="var(--color-purple-400)" />
</div>

Examples

Custom Colors

Use the lightColor prop with Tailwind CSS variables to change the beam color.

import { BorderBeam } from "@tilt-legal/cubitt-components/primitives";

export default function Component() {
  return (
    <div className="relative overflow-hidden rounded-xl border">
      <BorderBeam lightColor="var(--color-purple-400)" />
    </div>
  );
}

Duration

Control the animation speed with the duration prop (in seconds).

import { BorderBeam } from "@tilt-legal/cubitt-components/primitives";

export default function Component() {
  return (
    <div className="relative overflow-hidden rounded-xl border">
      <BorderBeam duration={4} lightColor="var(--color-purple-400)" />
    </div>
  );
}

Border Width

Adjust the beam thickness with the borderWidth prop.

import { BorderBeam } from "@tilt-legal/cubitt-components/primitives";

export default function Component() {
  return (
    <div className="relative overflow-hidden rounded-xl border">
      <BorderBeam borderWidth={3} lightColor="var(--color-cyan-400)" />
    </div>
  );
}

Light Width

Control the trail length with the lightWidth prop (in pixels).

import { BorderBeam } from "@tilt-legal/cubitt-components/primitives";

export default function Component() {
  return (
    <div className="relative overflow-hidden rounded-xl border">
      <BorderBeam lightColor="var(--color-purple-400)" lightWidth={400} />
    </div>
  );
}

Layered Beams

Stack multiple BorderBeam components with different colors and speeds for a richer effect.

import { BorderBeam } from "@tilt-legal/cubitt-components/primitives";

export default function Component() {
  return (
    <div className="relative overflow-hidden rounded-xl border">
      <BorderBeam
        duration={8}
        lightColor="var(--color-cyan-400)"
        lightWidth={200}
      />
      <BorderBeam
        borderWidth={1.5}
        duration={5}
        lightColor="var(--color-rose-400)"
        lightWidth={120}
      />
    </div>
  );
}

API Reference

BorderBeam

The root component. Place it as the first child inside a container with position: relative and overflow: hidden.

Prop	Type	Default	Description
`lightWidth`	`number`	`200`	Width of the light gradient in pixels
`duration`	`number`	`10`	Animation duration in seconds for one full loop
`lightColor`	`string`	`"#FAFAFA"`	CSS color value for the beam
`borderWidth`	`number`	`1`	Thickness of the border beam in pixels
`cornerRadius`	`number`	-	Border radius for the beam path (clamped to max)
`reduceMotion`	`boolean`	`false`	Renders a deterministic static beam instead of animating
`className`	`string`	-	Additional CSS classes

Border Beam

On this page