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 @compronents/orbit-text-preloaderInstalls from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.
Checking access…
| 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