Border Beam
A beam of light traveling around any border.
- 0.9 KB gzipped
- Deps: motion/react
- Reduced-motion safe
- Base UI & Radix compatible
Preview
<BorderBeam />
Installation
pnpm dlx shadcn@latest add https://paulkeys.org/r/border-beam.jsonAdds components/velora/border-beam.tsx, installs motion and merges the keyframes and tokens into your CSS.
Props
| Prop | Type | Default |
|---|---|---|
className | string | — |
sizeSize of the beam in px | number | 64 |
durationSeconds for one full loop | number | 6 |
delaySeconds of delay before starting | number | 0 |
reverse | boolean | false |
colorFrom | string | "var(--brand-from)" |
colorTo | string | "var(--brand-to)" |
Accessibility
- Reduced motion
- The beam is hidden entirely; only the parent's normal border remains.
- Keyboard
- Decorative — nothing to operate.
- Screen readers
- Decorative; aria-hidden.