Introducing Magic UI Pro - 50+ blocks and templates to build beautiful landing pages in minutes.

19.0k
216

Border Beam

PreviousNext

An animated beam of light which travels along the border of its container.

Installation

pnpm dlx shadcn@latest add @magicui/border-beam

Examples

2 Border Beams

Reverse

Spring Animation

Usage

import { BorderBeam } from "@/components/magicui/border-beam";
<div className="relative h-[500px] w-full overflow-hidden">
  <BorderBeam />
</div>

Props

Border Beam

PropTypeDefaultDescription
classNamestring-Custom class to apply to the component
sizenumber50Size of the beam
durationnumber6Duration of the animation in seconds
delaynumber0Delay before the animation starts
colorFromstring#ffaa40Start color of the beam gradient
colorTostring#9c40ffEnd color of the beam gradient
transitionTransition-Custom motion transition configuration
styleReact.CSSProperties-Custom CSS styles to apply
reversebooleanfalseWhether to reverse animation direction
initialOffsetnumber0Initial offset position (0-100)
borderWidthnumber1Border width of the beam