Orbit Text Preloader
A preloader of eight concentric text orbits that stretch, spin, and breathe around a counting percentage, then fade out to reveal a scaling hero image and rising copy.
npx shadcn@latest add https://ui.aryank.space/r/orbit-text-preloader.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| heroImage | string | BLANK-hosted JPG | Background image scaled from 1.25 to 1 on reveal. |
| orbitWords | string[] | Developer / Frontend / ... / Design | Words placed on the eight concentric orbit paths. |
| loaderBackground / loaderColor | string | "#d1d9b8" / "#0f0f0f" | Loader plate color and orbit text color. |
heroImageasset-urlThe hero revealed after the loader fades.
orbitWords / heroTexttextThe eight ring words and the hero copy line.
gsap