Counter Word Preloader
A loading screen where four things run off one three second clock: a counter to 100, a word cycling through five variants, an image flicking through ten frames, and that image frame sliding from the left edge to its slot in the headline. When the curtain wipes up, headline words slide in from alternating sides, and the small image frame is measured, frozen at that exact box, then grown to fill the frame, so the thumbnail becomes the page background in one move.
npx shadcn@latest add https://ui.aryank.space/r/counter-word-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 |
|---|---|---|---|
| images | string[] | 10 BLANK frames | Flicked through during load. The one showing when the timeline ends becomes the page background. |
| rotatingWords / headingRows / footerCopy | string[] / [string, string, string] / string | BLANK copy | Preloader and hero copy. |
| preloaderBackground | string | #272d2d | Color of the loading curtain. |
rotatingWordstextWords cycled through during the load.
headingRowstextThe three headline rows.
gsap








