Animated Gradient Border Beam
A light beam that continuously travels around a card's border.
- Category
- Backgrounds
- Added
- 2026-08-22
- Deps
- none
- Updated
- 2026-09-01
Props
"use client";
export function BorderBeamCard({
label = "Border beam",
speed = 4,
}: {
label?: string;
speed?: number;
}) {
return (
<div
className="relative overflow-hidden rounded-2xl p-[2px]"
style={{ "--beam-speed": `${speed}s` } as React.CSSProperties}
>
<div className="viberdy-beam-spin pointer-events-none absolute inset-[-50%]" />
<div className="relative flex h-32 w-64 items-center justify-center rounded-2xl bg-neutral-900">
<span className="font-bold text-white">{label}</span>
</div>
<style jsx>{`
.viberdy-beam-spin {
background: conic-gradient(from 0deg, transparent 0%, #ff2d2d 8%, transparent 18%);
animation: viberdy-beam-rotate var(--beam-speed, 4s) linear infinite;
}
@keyframes viberdy-beam-rotate {
to {
transform: rotate(360deg);
}
}
`}</style>
</div>
);
}
About this background
This is the single-highlight sibling of Gradient Border Card in this library: instead of a full conic ring, the rotating layer's gradient is almost entirely transparent with one short bright arc — transparent 0% to accent 8% back to transparent by 18% — so what actually reads on screen is one comet of light chasing the border, not the whole ring glowing at once. That's the tell for which one to pick: a beam wants a mostly dark card so the light is the entire hook, while the full ring reads calmer and suits a lighter card. Mechanically it's the same trick as the ring version — an oversized (inset -50%) conic-gradient square spins behind a static, slightly-inset content layer, clipped by the outer rounded rect down to just the border-thickness ring. Oversizing matters: a shape rotating in place needs real overhang past its container, or its corners uncover gaps at 45-degree angles. Speed is threaded through the element's own inline style as a CSS custom property rather than interpolated into the style jsx template literal, which compiles to a frozen duration in this build's bundler. It's decorative only — the beam has no relationship to loading state, focus, or anything real happening on the card.
Curator’s note
Same trap as Skeleton Shimmer: the per-instance speed has to go through the element's own inline style as a CSS custom property, never interpolated directly inside a <style jsx> template literal — that compiles to a broken, frozen duration in this build.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Beam Sweep Backdrop
backgroundsSlow conic light beams rotating behind content, CSS-only and compositor-friendly.