# Border Beam

A traveling beam of light that traces the border of any rounded container, with configurable size, speed, delay, colors, direction, and border width.

- Category: Effects & Animation
- License: MIT
- Page: https://www.saasuji.com/components/border-beam
- Install: npx shadcn@latest add https://www.saasuji.com/r/border-beam.json

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| size | `number` | `50` | Length of the traveling beam in pixels. |
| duration | `number` | `6` | Seconds the beam takes to travel around the container. |
| delay | `number` | `0` | Seconds before the beam animation starts. |
| colorFrom | `string` | `"#ffaa40"` | Start color of the beam gradient. |
| colorTo | `string` | `"#9c40ff"` | Midpoint color of the beam gradient. |
| transition | `Transition` | — | Motion transition overrides for the beam animation. |
| className | `string` | — | Additional classes merged onto the beam element. |
| style | `React.CSSProperties` | — | Inline styles merged onto the beam element. |
| reverse | `boolean` | `false` | Reverses the animation direction. |
| initialOffset | `number` | `0` | Starting position along the border path, from 0 to 100. |
| borderWidth | `number` | `1` | Thickness of the masked border the beam travels along. |

## Source

```tsx
"use client"

import { motion, type MotionStyle, type Transition } from "motion/react"

import { cn } from "@/lib/utils"

interface BorderBeamProps {
  /**
   * The size of the border beam.
   */
  size?: number
  /**
   * The duration of the border beam.
   */
  duration?: number
  /**
   * The delay of the border beam.
   */
  delay?: number
  /**
   * The color of the border beam from.
   */
  colorFrom?: string
  /**
   * The color of the border beam to.
   */
  colorTo?: string
  /**
   * The motion transition of the border beam.
   */
  transition?: Transition
  /**
   * The class name of the border beam.
   */
  className?: string
  /**
   * The style of the border beam.
   */
  style?: React.CSSProperties
  /**
   * Whether to reverse the animation direction.
   */
  reverse?: boolean
  /**
   * The initial offset position (0-100).
   */
  initialOffset?: number
  /**
   * The border width of the beam.
   */
  borderWidth?: number
}

export const BorderBeam = ({
  className,
  size = 50,
  delay = 0,
  duration = 6,
  colorFrom = "#ffaa40",
  colorTo = "#9c40ff",
  transition,
  style,
  reverse = false,
  initialOffset = 0,
  borderWidth = 1,
}: BorderBeamProps) => {
  return (
    <div
      className="pointer-events-none absolute inset-0 rounded-[inherit] border-(length:--border-beam-width) border-transparent mask-[linear-gradient(transparent,transparent),linear-gradient(#000,#000)] mask-intersect [mask-clip:padding-box,border-box]"
      style={
        {
          "--border-beam-width": `${borderWidth}px`,
        } as React.CSSProperties
      }
    >
      <motion.div
        className={cn(
          "absolute aspect-square",
          "bg-linear-to-l from-(--color-from) via-(--color-to) to-transparent",
          className
        )}
        style={
          {
            width: size,
            offsetPath: `rect(0 auto auto 0 round ${size}px)`,
            "--color-from": colorFrom,
            "--color-to": colorTo,
            ...style,
          } as MotionStyle
        }
        initial={{ offsetDistance: `${initialOffset}%` }}
        animate={{
          offsetDistance: reverse
            ? [`${100 - initialOffset}%`, `${-initialOffset}%`]
            : [`${initialOffset}%`, `${100 + initialOffset}%`],
        }}
        transition={{
          repeat: Infinity,
          ease: "linear",
          duration,
          delay: -delay,
          ...transition,
        }}
      />
    </div>
  )
}

```