Border Beam

A highly performant, zero-dependency React component that adds a sleek, animated glowing beam to the border of any container. Built using a native CSS conic-gradient and mask-composite for 60fps hardware-accelerated rendering without Framer Motion or Tailwind.

Preview

Bare UI

Installation

1. Copy the component

tsx
import * as React from "react";

export interface BorderBeamProps extends React.HTMLAttributes<HTMLDivElement> {
  size?: number;
  duration?: number;
  borderWidth?: number;
  colorFrom?: string;
  colorTo?: string;
  className?: string;
}

export const BorderBeam = React.forwardRef<HTMLDivElement, BorderBeamProps>(
  (
    {
      className,
      size = 200,
      duration = 4,
      borderWidth = 2,
      colorFrom = "var(--accent)",
      colorTo = "transparent",
      style,
      ...props
    },
    ref,
  ) => {
    return (
      <div
        ref={ref}
        className={`bare-border-beam ${className || ""}`}
        style={
          {
            "--beam-size": `${size}px`,
            "--beam-duration": `${duration}s`,
            "--beam-border-width": `${borderWidth}px`,
            "--beam-color-from": colorFrom,
            "--beam-color-to": colorTo,
            ...style,
          } as React.CSSProperties
        }
        {...props}
      />
    );
  },
);

BorderBeam.displayName = "BorderBeam";

2. Add the CSS

Add this to your global CSS file. It uses native CSS masking and animations.

css
/* Bare Border Beam Animation */
.bare-border-beam {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  overflow: hidden;
  padding: var(--beam-border-width, 2px);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.bare-border-beam::before {
  content: "";
  position: absolute;
  aspect-ratio: 1/1;
  width: var(--beam-size, 200px);
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    var(--beam-color-from, var(--accent)) 15%,
    var(--beam-color-to, transparent) 30%
  );
  animation: bare-border-beam-spin var(--beam-duration, 4s) linear infinite;
}
@keyframes bare-border-beam-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Props

Prop	Type	Default	Description
size	number	200	The size of the beam in pixels.
duration	number	4	The duration of one full rotation in seconds.
borderWidth	number	2	The thickness of the border in pixels.
colorFrom	string	"var(--accent)"	The starting color of the beam gradient.
colorTo	string	"transparent"	The ending color of the beam gradient.