Border Beam

A customizable animated beam that travels along the border of a container for a dynamic visual highlight.

import BorderBeamContainer, { BorderBeam } from "@/components/visual-effects/border-beam/border-beam";

const BorderBeamPreview = () => {
  return (
    <BorderBeamContainer
      style={borderBeamContainerStyles}
    >
      <BorderBeam
        colors={[
          "#0000",
          "#84fab0",
          "#8fd3f4",
          "#0000",
        ]}
        width={2}
      />

      {/* Add your content here */}
      <h2>Border Beam</h2>
      <p>
        Highlight important UI elements with a smooth, animated beam effect that
        travels along the border of the container.
      </p>
    </BorderBeamContainer>
  )
};

const borderBeamContainerStyles = {
  width: "320px",
  borderRadius: "16px",
  padding: "16px",
  background: "var(--layer-secondary)",
};

export default BorderBeamPreview;

Installation

Run the command from your project root directory (the folder that contains package.json).

npx mosaicui-cli@latest visual-effects/border-beam

1. Copy the component file

Create a new file called border-beam.jsx in your reusable components folder (for example /src/components/) and paste the following code into it.

import { memo, useMemo } from "react";
import styles from "./border-beam.module.css";

const BorderBeamContainer = (props) => {
  const {
    children,
    tagName = "div",
    className,
    ...restProps
  } = props;

  const Component = tagName || "div";

  return (
    <Component
      {...restProps}
      className={[
        styles["border-beam-container"],
        className,
      ].join(" ")}
    >
      {children}
    </Component>
  );
};

export const BorderBeam = memo((props) => {
  const {
    size = 50,
    width = 1,
    colors = [
      "rgba(0, 0, 0, 0)",
      "rgba(127, 127, 127, 1)",
      "rgba(0, 0, 0, 0)"
    ],
    duration = 5000,
    offset = 0,
    reverse = false,
    timingFunction = "linear",
    className,
    style,
    ...restProps
  } = props;

  const _size = useMemo(() => Math.max(0, size), []);
  const _width = useMemo(() => Math.max(0, width), []);
  const _duration = useMemo(() => Math.max(0, duration), []);
  const _offset = useMemo(() => Math.min(100, Math.max(0, offset)), []);
  const gradient = useMemo(() => (
    `linear-gradient(to left, ${colors.join()})`
  ), [colors]);

  return (
    <span
      {...restProps}
      aria-hidden={true}
      className={[
        styles["border-beam"],
        reverse ? styles["reverse"]: "",
        className,
      ].join(" ")}
      style={{
        ...style,
        "--size": `${_size}px`,
        "--width": `${_width}px`,
        "--duration": `${_duration}ms`,
        "--offset": `${_offset}%`,
        "--gradient": gradient,
        "--timing-funtion": timingFunction,
      }}
    />
  );
});

export default memo(BorderBeamContainer);

2. Copy the CSS module file

In the same folder, create a file called border-beam.module.css and paste the following CSS.

.border-beam-container {
  position: relative;
}

.border-beam {
  --size: 50px;
  --width: 1px;
  --offset: 0%;
  --duration: 5000ms;
  --timing-funtion: linear;

  position: absolute;
  inset: calc(var(--width) * -1);
  border: var(--width) solid #0000;
  border-radius: inherit;
  pointer-events: none;
  mask-clip: 
    padding-box,
    border-box;
  mask-composite: intersect;
  mask-image:
    linear-gradient(#0000, #0000),
    linear-gradient(#000, #000);

  &:before {
    content: "";
    position: absolute;
    inset: 0;
    width: var(--size);
    height: var(--size);
    background: var(--gradient);
    offset-path: rect(0px auto auto 0px round var(--size));
    z-index: 2;
    pointer-events: none;
    animation: border-beam-keyframes var(--duration) var(--timing-funtion) infinite;
  }

  &.reverse {
    &:before {
      animation-direction: reverse;
    }
  }
}

@keyframes border-beam-keyframes {
  from {
    offset-distance: var(--offset);
  }

  to {
    offset-distance: calc(100% + var(--offset));
  }
}

Examples

Discover how supported props transform components to match your needs.

Multiple Beams

Border Beam

Highlight important UI elements with a smooth, animated beam effect that travels along the border of the container.

import BorderBeamContainer, { BorderBeam } from "@/components/visual-effects/border-beam/border-beam";

const BorderBeamMultipleBeamsPreview = () => {
  return (
    <BorderBeamContainer
      style={borderBeamContainerStyles}
    >
      <BorderBeam 
        colors={[
          "#0000",
          "#84fab0",
          "#0000",
        ]}
        size={200}
      />
      <BorderBeam
        colors={[
          "#0000",
          "#8fd3f4",
          "#0000",
        ]}
        size={200}
        offset={50}
      />

      {/* Add your content here */}
      <h2>Border Beam</h2>
      <p>
        Highlight important UI elements with a smooth, animated beam effect that
        travels along the border of the container.
      </p>
    </BorderBeamContainer>
  )
};

const borderBeamContainerStyles = {
  width: "320px",
  borderRadius: "16px",
  padding: "16px",
  background: "var(--layer-secondary)",
};

export default BorderBeamMultipleBeamsPreview;

Beam Width

Border Beam

Highlight important UI elements with a smooth, animated beam effect that travels along the border of the container.

import BorderBeamContainer, { BorderBeam } from "@/components/visual-effects/border-beam/border-beam";

const BorderBeamWidthPreview = () => {
  return (
    <BorderBeamContainer
      style={borderBeamContainerStyles}
    >
      <BorderBeam 
        colors={[
          "#0000",
          "#84fab0",
          "#8fd3f4",
          "#0000",
        ]}
        width={4}
      />

      {/* Add your content here */}
      <h2>Border Beam</h2>
      <p>
        Highlight important UI elements with a smooth, animated beam effect that
        travels along the border of the container.
      </p>
    </BorderBeamContainer>
  )
};

const borderBeamContainerStyles = {
  width: "320px",
  borderRadius: "16px",
  padding: "16px",
  background: "var(--layer-secondary)",
};

export default BorderBeamWidthPreview;

Reverse Direction

Border Beam

Highlight important UI elements with a smooth, animated beam effect that travels along the border of the container.

import BorderBeamContainer, { BorderBeam } from "@/components/visual-effects/border-beam/border-beam";

const BorderBeamReversePreview = () => {
  return (
    <BorderBeamContainer
      style={borderBeamContainerStyles}
    >
      <BorderBeam 
        colors={[
          "#0000",
          "#84fab0",
          "#8fd3f4",
          "#0000",
        ]}
        reverse
      />

      {/* Add your content here */}
      <h2>Border Beam</h2>
      <p>
        Highlight important UI elements with a smooth, animated beam effect that
        travels along the border of the container.
      </p>
    </BorderBeamContainer>
  )
};

const borderBeamContainerStyles = {
  width: "320px",
  borderRadius: "16px",
  padding: "16px",
  background: "var(--layer-secondary)",
};

export default BorderBeamReversePreview;

Duration

Border Beam

Highlight important UI elements with a smooth, animated beam effect that travels along the border of the container.

import BorderBeamContainer, { BorderBeam } from "@/components/visual-effects/border-beam/border-beam";

const BorderBeamDurationPreview = () => {
  return (
    <BorderBeamContainer
      style={borderBeamContainerStyles}
    >
      <BorderBeam 
        colors={[
          "#0000",
          "#84fab0",
          "#8fd3f4",
          "#0000",
        ]}
        duration={10000}
      />

      {/* Add your content here */}
      <h2>Border Beam</h2>
      <p>
        Highlight important UI elements with a smooth, animated beam effect that
        travels along the border of the container.
      </p>
    </BorderBeamContainer>
  )
};

const borderBeamContainerStyles = {
  width: "320px",
  borderRadius: "16px",
  padding: "16px",
  background: "var(--layer-secondary)",
};

export default BorderBeamDurationPreview;

Props

Configure the component with the following props:

BorderBeamContainer Props

Prop	Type	Required	Default	Description
children	`React.ReactNode`	No	—	Content to be rendered inside the component
tagName	`string`	No	`"div"`	HTML tag used to render the component
className	`string`	No	—	Additional CSS class names applied to the element
style	`React.CSSProperties`	No	—	Inline styles applied to the element

BorderBeam Props

Prop	Type	Required	Default	Description
size	`number`	No	`50`	Size of the animated beam effect
width	`number`	No	`1`	Thickness of the beam
colors	`string[]`	No	`["rgba(0,0,0,0)", "rgba(127,127,127,1)", "rgba(0,0,0,0)"]`	Gradient colors used to render the beam effect
duration	`number`	No	`5000`	Duration of the animation in milliseconds
offset	`number`	No	`0`	Offset position where the animation starts
reverse	`boolean`	No	`false`	Reverses the direction of the beam animation
timingFunction	`string`	No	`"linear"`	CSS animation timing function (e.g., `ease`, `linear`, `ease-in-out`)
className	`string`	No	—	Additional CSS class names applied to the component
style	`React.CSSProperties`	No	—	Inline styles applied to the component