Border Beam

Border Beam is a button in the UI HUB buttons collection. A glowing light beam that orbits continuously around the border of any container element. Uses a conic gradient mask to create a traveling spotlight effect.

The component is driven by 8 documented props (className, size, duration, anchor, borderWidth, colorFrom and 2 more), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.

Implementation notes: CSS conic-gradient for beam shape; Continuous rotation animation; Configurable speed, anchor, and colors.

Preview the button in the browser above, copy the source, and paste it into your project. Buttons components in UI HUB are grouped by category so you can compare effects side by side before choosing one.