Border Beam

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

Installation

pnpm dlx shadcn@latest add "https://vritti.thesatyajit.com/r/border-beam"

Dependencies

pnpm add motion

Props

Border Beam

PropTypeDefaultDescription
classNamestring-Additional CSS classes for the beam element
sizenumber50Size of the beam in pixels
delaynumber0Delay before the animation starts in seconds
durationnumber6Duration of one full animation cycle in seconds
colorFromstring"#ffaa40"Starting gradient color of the beam
colorTostring"#9c40ff"Ending gradient color of the beam
transitionTransition-Custom motion transition overrides
styleReact.CSSProperties-Custom inline styles for the beam
reversebooleanfalseWhether to reverse the animation direction
initialOffsetnumber0Initial offset position of the beam (0-100)
borderWidthnumber1Width of the border in pixels