Emoji Trail Preloader
A loading screen you can play with. A square rotates a half turn twice, shrinks to nothing, and hands off to the page reveal: the headline is split to characters that rise per row, and the centre image pops from zero into a twenty second continuous spin. While the loader is still up, moving the pointer four hundred pixels since the last drop spawns a badge at the cursor that springs in with a back ease, holds, then falls out of frame and removes itself. The queue is spaced by wall clock time, so a fast sweep still staggers the drops instead of firing them together. GSAP only.
Welcome to The Quiet Crowd! This is your gateway to a world of refined branding, where elegance meets ingenuity. Step into a realm where your brand's uniqueness whispers louder than a shout, captivating the hearts of your audience. The Quiet Crowd doesn't just create brands, it curates timeless identities that resonate.
The
Quiet Crowd
npx shadcn@latest add https://ui.aryank.space/r/emoji-trail-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 |
|---|---|---|---|
| badges | string[] | 4 BLANK badges | Pool drawn from at random for each drop. |
| heroImage | string | BLANK badge | Centre image that pops in and then spins continuously for twenty seconds a turn. |
| cursor | string | BLANK cursor.svg | Custom pointer, hot spot at 32 32. |
| preloaderBackground / loaderColor | string | #ded7ce / #c5beb5 | The loading card and the square rotating on it. |
headingRowstextHeadline rows, split to characters that rise per row.
heroBackgroundcolorPage colour revealed under the loader.
gsap