Border Beam

A beam of light that travels around an element's border. Great for highlighting a card or signaling work in progress.

Motion

Welcome back. Pick up where you left off.

Playground

Tweak the props, the preview and the code follow.

Your content

Props

color

size80

duration6

borderWidth1

reverse

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

<div className="relative rounded-2xl border">
  Your content
  <BorderBeam />
</div>

npx @plumsydev/plum-ui add border-beam

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

<div className="relative rounded-2xl border p-6">
  …
  <BorderBeam />
</div>

Two beams with opposite directions and offset timing.

Unlimited projects, preview deployments and priority builds.

Mount it only while a build runs.

acme-web

main · 4f2c91a

Ready

Place inside a relative parent with a border radius.

Prop	Type	Default
`size` Beam length in px.	`number`	`80`
`duration` Seconds per lap.	`number`	`6`
`delay` Offset in seconds, to stagger several beams.	`number`	`0`
`borderWidth` Thickness in px — match the parent border.	`number`	`1`
`colorFrom` Head color of the beam.	`string`	`"var(--foreground)"`
`colorTo` Tail color of the beam.	`string`	`"transparent"`
`reverse` Travel counter-clockwise.	`boolean`	`false`