Velora UI

Moving Border

A light laps the button's border via offset-path.

  • 1.0 KB gzipped
  • Zero dependencies
  • Reduced-motion safe
  • Base UI & Radix compatible
Open in v0

Preview

Installation

pnpm dlx shadcn@latest add https://velora.colorlib.com/r/moving-border.json

Adds components/velora/moving-border.tsx and merges the keyframes and tokens into your CSS.

Props

PropTypeDefault
duration

Seconds for one lap of the border

number4
size

Length of the travelling light, in px

number90
radius

Corner radius of the border path, in px

number12
children*React.ReactNode—

Also accepts every <button> attribute, forwarded to the root element.

Accessibility

Reduced motion
The travelling light is replaced by a static glow on the top-left and bottom-right corners of the border.
Keyboard
A native <button>: Enter or Space activate it, with a visible focus-visible outline.
Screen readers
Announced as a button named by its text; the light layer is aria-hidden.