Components
Orbit
Icons, logos or avatars circling a centre on concentric rings at their own speeds. Items stay upright as they travel, grow on hover, and the orbits pause so they are easy to click.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { Orbit } from '@vizzele/react';
<Orbit
rings={[
{ radius: 80, items: [<Figma />, <Slack />, <Notion />] },
{ radius: 150, items: [<GitHub />, <Linear />, <Stripe />, <Vercel />], reverse: true },
]}
>
<Logo />
</Orbit>Props
| Prop | Type | Default | Description |
|---|---|---|---|
rings | { items, radius, duration?, reverse? }[] | — | Each ring; duration in seconds per turn (default radius ÷ 5). |
children | ReactNode | — | What sits in the middle. |
itemSize | number | 44 | Size of each item (px). |
pauseOnHover | boolean | true | Stop while hovered or focused. |
Accessibility
- Your items keep their own semantics — give icon-only links a name.
- Orbits pause on hover and keyboard focus, so nothing moves out from under the pointer or the focus ring.
- With reduced motion everything stays in place.