Border Beam

An animated beam of light that travels along the border of its container. Parent needs `relative` and `overflow-hidden`.

Default

Place BorderBeam inside a relative overflow-hidden parent. duration={8} and size={100}.

Loading…

Installation

CLI

npx @sonojs/ui@latest add border-beam

Also needs

npm i motion

Usage

border-beam.tsx

import { BorderBeam } from "@/components/border-beam"

export function Example() {
  return (
    <div className="relative h-[500px] w-full overflow-hidden rounded-lg border">
      <BorderBeam />
    </div>
  )
}

Props

Prop	Type	Default	Description
className	string	-	Classes on the moving beam (e.g. via color stops).
size	number	50	Beam square size in pixels.
duration	number	6	Loop duration in seconds.
delay	number	0	Start delay in seconds (applied as a negative delay).
colorFrom	string	"#ffaa40"	Gradient start color.
colorTo	string	"#9c40ff"	Gradient mid color.
transition	Transition	-	Override motion transition (e.g. spring).
style	React.CSSProperties	-	Inline styles on the beam.
reverse	boolean	false	Reverse travel direction along the border.
initialOffset	number	0	Starting offset along the path (0–100).
borderWidth	number	1	Visible border width of the beam mask in pixels.