Browse components
Meteor Orbit
Icons circling a center on concentric rings while glowing meteor streaks race along each orbit.
Installation
npx shadcn@latest add @glint-ui/meteor-orbitFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/meteor-orbit.json
Usage
import { MeteorOrbit } from "@/components/ui/meteor-orbit";
<MeteorOrbit items={[{ label: "Database", icon: <Database /> }, { label: "Cloud", icon: <Cloud /> }]}>
<Logo />
</MeteorOrbit>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | ReactNode | — | Array of { label, icon }, spread round-robin over the rings. |
| children | ReactNode | — | Content in the middle. |
| size | number | 400 | Outer diameter in px. |
| rings | number | 3 | Number of orbits. |
| duration | number | 24 | Seconds per turn of the inner ring. |
| meteors | number | 2 | Meteor streaks per ring. |
| meteorColor | string | "#a3e635" | Meteor glow color. |
| iconSize | number | 44 | Icon bubble size in px. |
| pauseOnHover | boolean | true | Freeze everything while hovered. |
| className | string | — | Extra classes for the root element. |