Counter Star Loader
A one-shot loader: two odometer columns roll their digits while the counter walks across the bottom of the screen in six steps, then three four-point stars scale up in sequence to wipe the screen, and the headline swings in from a 3D Y-rotation as the site info lines and a toggle button pop in.
npx shadcn@latest add @compronents/counter-star-loaderInstalls 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 |
|---|---|---|---|
| digitsLeft / digitsRight | [number x6] | 9 8 7 4 2 0 / 9 5 9 7 4 0 | Digit values shown in the two rolling columns. |
| headline | string | "HauteMuse" | The headline that swings in from a 3D rotation. |
| revealerColors | [string, string, string] | white, lime, black | Fills of the three scaling star revealers. |
digitsLeft / digitsRighttupleThe six-digit values in each odometer column.
headline / infoLines / revealerColorstextThe 3D headline, corner info lines, and star colors.
gsap