A central hub with concentric rings of icon tiles that orbit at different speeds and stay upright. Hovering pauses the motion.
npx shadcn@latest add https://hyperblur.dev/r/orbit-icons.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/orbit-icons.tsx.
import { OrbitIcons } from "@/components/hyperblur/orbit-icons"
<OrbitIcons className="w-80"><img src="/logo.svg" alt="Acme" /></OrbitIcons>| Prop | Type | Default | Description |
|---|---|---|---|
| items | { icon: ReactNode; label: string }[][] | six generic icons on three rings | One array of icon tiles per ring, from the inside out. Labels become the accessible name and tooltip. |
| radii | number[] | [0.44, 0.7, 0.96] | Ring diameters as a fraction of the component width. Rings without items are drawn empty. |
| duration | number | 22 | Seconds for one revolution of the inner ring. Each outer ring is slower and alternates direction. |
| accent | string | "#2f7bff" | Hub glow, ring highlight and hover color. |
| children | ReactNode | Content of the hub. Defaults to a gradient logo mark. |