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
Preview
Installation
pnpm dlx shadcn@latest add https://paulkeys.org/r/moving-border.jsonAdds components/velora/moving-border.tsx and merges the keyframes and tokens into your CSS.
Props
| Prop | Type | Default |
|---|---|---|
durationSeconds for one lap of the border | number | 4 |
sizeLength of the travelling light, in px | number | 90 |
radiusCorner radius of the border path, in px | number | 12 |
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.