OrbitBorder

A comet of light running around an element's border.

Pro plan

Draw the eye without moving the layout.

Installation

bash
npx shadcn@latest add https://www.rad-ui.com/r/orbit-border.json

React
import OrbitBorder from "@/components/fx/orbit-border"

<OrbitBorder className="p-6">…</OrbitBorder>

The light is a pseudo-element: nothing is added to the accessibility tree.
Browsers without @property show a still highlight.
Pauses offscreen; `paused` stops it on demand.
prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) shows a still highlight.

Prop	Type	Default	Description
color	string	'#38bdf8'	Colour of the travelling light.
duration	number	4	Seconds per lap.
width	number	1.5	Border width in px.
radius	number	14	Corner radius in px.
paused	boolean	false	Stop the animation. It also pauses itself offscreen.
...props	ComponentProps<'div'>	—	Passed to the root div; children render above the effect.