Satellites travel tilted elliptical orbits around a sync hub, growing as they pass in front and fading behind it. The hub sends out a pulse each time a satellite comes around.
Workspace · Northwind
Syncing your tools
npx shadcn@latest add https://hyperblur.dev/r/loader-orbit-sync.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/loader-orbit-sync.tsx.
import { LoaderOrbitSync } from "@/components/hyperblur/loader-orbit-sync"
<LoaderOrbitSync satellites={3} label="Syncing workspace" />| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 96 | Width and height of the loader in pixels. |
| color | string | "#2f7bff" | Color of the orbit lines and the outer shade of each satellite. |
| accent | string | "#7fb3ff" | Glow of the satellites, the hub icon and the hub pulse. |
| speed | number | 2.8 | Seconds for one satellite to complete an orbit. |
| satellites | number | 3 | Number of orbits and satellites, from 1 to 5. |
| label | string | Visible caption under the loader. Without it, Syncing is announced to screen readers only. |