PRO

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.

Component

Underlume

Studios

Everything

Beneath

The Surface

Install
npx shadcn@latest add https://ui.aryank.space/r/counter-word-preloader.json

Installs from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.

Files

API
PropTypeDefaultDescription
imagesstring[]10 BLANK framesFlicked through during load. The one showing when the timeline ends becomes the page background.
rotatingWords / headingRows / footerCopystring[] / [string, string, string] / stringBLANK copyPreloader and hero copy.
preloaderBackgroundstring#272d2dColor of the loading curtain.
Customize
rotatingWordstext

Words cycled through during the load.

headingRowstext

The three headline rows.

Dependencies
gsap