Border Beam

Visual Effects

Wraps content in a card whose rounded border is traced by a glowing violet-to-fuchsia comet, built from a mask-composite ring and a CSS Motion Path beam. Under prefers-reduced-motion the comet is dropped and the ring falls back to a static, legible gradient border.

Inspired by Cult UI — Border Beam (free, MIT) — independently built, not affiliated. Attribution policy

Pro plan

A glowing beam traces the border, forever.

Installation

npx shadcn@latest add https://parable-three.vercel.app/r/border-beam.json

Runs the shadcn CLI — the component source is copied intocomponents/parable/border-beam.tsx. You own it from there.

Usage

The exact code rendering the preview above.

<div className="grid w-full place-items-center p-8">
    <BorderBeam className="w-[280px] bg-[#0f0f10]" colorFrom="#8b5cf6" colorTo="#ec4899" duration={5}>
      <div className="p-6">
        <div className="flex items-center gap-2 text-sm font-semibold text-white">
          <Sparkles className="size-4 text-violet-400" />
          Pro plan
        </div>
        <p className="mt-2 text-xs leading-relaxed text-white/55">
          A glowing beam traces the border, forever.
        </p>
      </div>
    </BorderBeam>
  </div>

Props

BorderBeamProps extends React.HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
children	React.ReactNode	—	Content that sits on the card face, inside the traced border.
size	number	64	Beam length in px — the size of the travelling comet head.
duration	number	6	Seconds for one full lap around the perimeter.
delay	number	0	Delay in seconds before the beam starts — stagger multiple beams.
colorFrom	string	"#8b5cf6"	Head colour of the comet and one end of the static ring. Mirrors `--pb-violet`.
colorTo	string	"#ec4899"	Tail colour of the comet and the other end of the static ring. Mirrors `--pb-fuchsia`.
borderWidth	number	1.5	Border thickness in px — how wide the traced ring is.
radius	string	"16px"	Corner radius as any CSS length (e.g. `"16px"`, `"1rem"`).
reverse	boolean	false	Send the comet the other way around the border.