The Quiet Crowd Landing Reveal
What it does
On page load a GSAP timeline wipes a clip-path preloader and spins a loader, then reveals the hero: heading characters (manually split into spans) slide up with a staggered power4.out tween while a circular hero image scales in and rotates infinitely. Moving the cursor during the load spawns emoji particles that pop in with a back.out ease and drop off-screen.
How it's built
| Category | preloader |
|---|---|
| Tech | gsap |
| Complexity | page |
| Performance cost | light |
| Mobile-safe | desktop-first |
Rebuild it with AI
This component's prompt is part of the paid library. Below you can read how it starts; the full prompt, the exact structure, timing and easing an AI agent needs to rebuild the effect, unlocks with any paid plan, yearly or lifetime.
# Landing Preloader + Hero Reveal with Cursor Emoji Confetti
## Goal
Build a full-screen playful/editorial landing intro. A neutral beige **preloader** holds a small spinning square loader for a few seconds, then wipes upward off the top of the screen to reveal a bright-yellow hero. As it reveals, the two-line headline animates in character by character (each glyph slides up from below its clip mask), and a circular orbit mark pops in beside the headline and starts an **endless slow rotation**. The signature detail: **while the preloader is still running**, moving the cursor sprinkles round emoji "stickers" at the pointer — each pops in with a bouncy `back.out` ease, hangs for a beat, then drops off the bottom of the screen and unmounts. All motion is GSAP core; text is split into `<span>`s manually (no SplitText plugin).
## Tech
Vanilla HTML/CSS/JS with ES module imports. Use **`gsap`** (npm) only — **no plugins** (no ScrollTrigger, no SplitText, no CustomEase) and no smooth-scroll library. The page does not scroll; it is a pure load-triggered sequence plus a `mousemove` particle spawner. `import gsap from "gsap";` at the top of the module. Everything runs immediately on module load (script is `type="module"`, placed at end of `<body>`).
## Layout / HTML
Semantic structure (class names are load-bearing — the JS/CSS query them):
```
<div class="container">
<div class="preloader">
<div class="loader"></div>
</div>
…Premium prompt
Unlock this prompt, and every other one
From $99/year, or $139 once for lifetime access. Commercial license included.
See pricing Or start with the free set Already bought? Sign in
New components in your inbox
One email a week, only when new components ship, each with its live demo and prompt.