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.
What is Border Beam?
Magical orbiting border glow beam for any container. It is built as a React and Tailwind CSS component and can be previewed directly on this page.
Border Beam at a glance
- Category
- Buttons
- Pricing
- Free to use
- Libraries
- Framer Motion
- Styling
- Tailwind CSS
- Configurable props
- 8
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Border Beam works
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.
Technical information for Border Beam
| Category | Buttons |
|---|---|
| Libraries | Framer Motion |
| Styling | Tailwind CSS |
| Rendering | CSS gradients, requestAnimationFrame |
| State change | static border to continuously orbiting glow beam |
| Props | 8 configurable |
| Usage example | Included on this page |
What Border Beam requires
- CSS conic-gradient for beam shape
- Continuous rotation animation
- Configurable speed, anchor, and colors
- Responsive border-radius inheritance
How to use Border Beam
- Install the dependencies: npm install framer-motion.
- Copy the usage example from the Source section of this page. It shows the import path and the props the component expects.
- Render <BorderBeam /> in your page using that import path.
- Pass any of the 8 documented props to change colours, density, speed or behaviour.
Border Beam questions
What is Border Beam?
Magical orbiting border glow beam for any container. It is built as a React and Tailwind CSS component and can be previewed directly on this page.
How does Border Beam work?
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.
Which category does Border Beam belong to?
Border Beam is listed under Buttons in the UI HUB catalog. Call-to-action buttons with real interaction design: magnetic pull on hover, glow and shimmer sweeps, press states and SVG-based shape morphs. Each button accepts its own label, href and colour props, so it drops into an existing layout without forcing a wrapper. Accessible focus states are preserved in every variant.
What does the className prop do in Border Beam?
Additional CSS classes for the container. It defaults to "".
What does the size prop do in Border Beam?
Size of the glowing beam in pixels. It defaults to 300.
Is Border Beam free to use?
Border Beam is a free component on UI HUB. You can preview it in the browser and read the full props table on the component page.
Which libraries does Border Beam use?
Border Beam uses Framer Motion and is styled with Tailwind CSS.
What does Border Beam need to run?
Border Beam needs CSS conic-gradient for beam shape, Continuous rotation animation, Configurable speed, anchor, and colors and Responsive border-radius inheritance.