Border Beam
A light that races around its parent’s border, inheriting the radius. Stack several with delays for orbiting comets.
css@propertyconic-gradient2 files · 70 locdeps: clsx, tailwind-merge
Installation
With the shadcn CLI, pointing at this platform’s registry:
npx shadcn@latest add https://opusui.131199999.xyz/r/border-beam.jsonOr offline, straight from your opus55 checkout (copies every file it needs):
node ../tailwind_component/opus55/scripts/add.mjs border-beamUsage
import { BorderBeam } from "@/components/opus/effects/border-beam";
<div className="relative rounded-2xl border">
<BorderBeam />
…
</div>API
| Prop | Type | Default | Description |
|---|---|---|---|
| colorFrom / colorTo | string | — | Head and tail colours. |
| duration | number | 6 | Seconds per lap. |
| width | number | 1.5 | Border thickness (px). |
| length | number | 0.18 | Beam length (fraction of a lap). |
| delay | number | 0 | Start offset (0–1 of a lap). |
| reverse | boolean | — | Counter-clockwise. |
Notes
- Animates a registered
@propertyangle — no JS. Parent needsposition: relative.