Orbiting Border Glow React component
A border that a beam of light runs around: a bright conic streak orbits the edge of any card, button or badge, a soft halo of the same light spills outside it, and the beam picks up speed smoothly while you hover.
About the Orbiting Border Glow component
Orbiting Border Glow sends a streak of light around the edge of anything you wrap in it — a pricing card, a button, a status pill — while a soft halo of the same colour glows just outside, following the beam as it goes.
Hover it and the beam speeds up smoothly, then eases back when you leave. The light only moves while the element is on screen, and stays still with reduced motion turned on.
When to use it
Use it to point at one thing: the recommended plan, an AI or 'new' button, a live status, a featured card in a grid.
One or two per screen is plenty; a page full of orbiting borders stops pointing at anything.
Installation
Add the Orbiting Border Glow component to your project with the shadcn CLI. It lands in components/orbiting-border-glow.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/orbiting-border-glowOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<OrbitingBorderGlow /> accepts 9 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| colors Beam colours, from its tail to its head. | [string, string] | ["#7b61ff", "#38bdf8"] |
| duration Seconds for one lap. | number | 4 |
| hoverDuration Seconds for one lap while hovered or focused. | number | 1.6 |
| width Border width in px. | number | 1.5 |
| glow How far the glow spills outside, in px. 0 turns it off. | number | 18 |
| twin Two beams on opposite sides instead of one. | boolean | false |
| radius | number | 20 |
| background The fill inside the border. | string | "#0f0f11" |
| track Colour of the resting border the beam travels along. | string | "rgba(255,255,255,0.08)" |
- colors
Beam colours, from its tail to its head.
[string, string]Default: ["#7b61ff", "#38bdf8"] - duration
Seconds for one lap.
numberDefault: 4 - hoverDuration
Seconds for one lap while hovered or focused.
numberDefault: 1.6 - width
Border width in px.
numberDefault: 1.5 - glow
How far the glow spills outside, in px. 0 turns it off.
numberDefault: 18 - twin
Two beams on opposite sides instead of one.
booleanDefault: false - radiusnumberDefault: 20
- background
The fill inside the border.
stringDefault: "#0f0f11" - track
Colour of the resting border the beam travels along.
stringDefault: "rgba(255,255,255,0.08)"
npm dependencies
Installed for you by the shadcn CLI.
Orbiting Border Glow FAQ
- Can I change the colours and speed?
- colors takes the tail and head colours of the beam; duration is seconds per lap and hoverDuration the lap time while hovered.
- Can there be two beams?
- Yes, twin draws two beams on opposite sides of the border.
- How do I turn off the glow outside?
- Set glow={0}. Any other number is how far the halo spills past the edge, in pixels.
- Does it match my card's shape?
- Set radius to your corner radius (999 for pills) and background to the card colour; width sets how thick the border is.
