Orbit Button
Orbit Button is a button in the UI HUB buttons collection. A button with a glowing particle that orbits its border in a continuous loop. On hover, the orbit speed doubles and a secondary particle appears.
The component is driven by 6 documented props (children, className, orbitColor, orbitSize, speed, onClick), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.
Implementation notes: Absolute positioned particle on border path; CSS/Framer rotation animation; Hover-triggered speed and count change.
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 Orbit Button?
Button with a glowing satellite particle orbiting its border. It is built as a React and Tailwind CSS component and can be previewed directly on this page.
Orbit Button at a glance
- Category
- Buttons
- Pricing
- Free to use
- Libraries
- Framer Motion
- Styling
- Tailwind CSS
- Configurable props
- 6
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Orbit Button works
A button with a glowing particle that orbits its border in a continuous loop. On hover, the orbit speed doubles and a secondary particle appears.
Technical information for Orbit Button
| Category | Buttons |
|---|---|
| Libraries | Framer Motion |
| Styling | Tailwind CSS |
| Rendering | requestAnimationFrame |
| State change | single slow orbit to dual fast orbit on hover |
| Props | 6 configurable |
| Usage example | Included on this page |
What Orbit Button requires
- Absolute positioned particle on border path
- CSS/Framer rotation animation
- Hover-triggered speed and count change
- Configurable orbit color and dot size
How to use Orbit Button
- 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 <OrbitButton /> in your page using that import path.
- Pass any of the 6 documented props to change colours, density, speed or behaviour.
Orbit Button questions
What is Orbit Button?
Button with a glowing satellite particle orbiting its border. It is built as a React and Tailwind CSS component and can be previewed directly on this page.
How does Orbit Button work?
A button with a glowing particle that orbits its border in a continuous loop. On hover, the orbit speed doubles and a secondary particle appears.
Which category does Orbit Button belong to?
Orbit Button 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 children prop do in Orbit Button?
Button label. It defaults to "Orbit".
What does the className prop do in Orbit Button?
Additional CSS classes. It defaults to "".
Is Orbit Button free to use?
Orbit Button 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 Orbit Button use?
Orbit Button uses Framer Motion and is styled with Tailwind CSS.
What does Orbit Button need to run?
Orbit Button needs Absolute positioned particle on border path, CSS/Framer rotation animation, Hover-triggered speed and count change and Configurable orbit color and dot size.