Border Beam

A moving light beam along the edge of a container. It animates continuously with customizable colors, size, and speed. Use it to add dynamic visual effects to backgrounds.

byMagic UI

Installation

terminal

pnpm dlx layro-cli add @magicuidesign/border-beam

npx layro-cli add @magicuidesign/border-beam

npx layro-cli add @magicuidesign/border-beam

bunx layro-cli add @magicuidesign/border-beam

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"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.
   */