Konpo Landing Page Reveal
What it does
Auto-playing landing page intro: three vertical rolling counters tick to 100 while a background wipe scales up and 15 rounded thumbnails pop in from scale 0. On load complete, GSAP Flip animates every image from the top-left corner to the bottom-right with a staggered scale-punch, then masked SplitText lines rise into place for the nav, heading, side info and footer. Triggered entirely on DOMContentLoaded.
How it's built
| Category | preloader |
|---|---|
| Tech | gsap |
| GSAP plugins | Flip, SplitText |
| Complexity | page |
| Performance cost | medium |
| Mobile-safe | yes |
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 Page Reveal Animation (rolling counter + Flip image reveal + masked line text)
## Goal
Build an auto-playing landing-page intro for a design studio: three vertical rolling digit
columns count from 0 to 100 in the bottom-right corner while a lighter background panel wipes
up from the bottom and 15 rounded photo thumbnails pop in (scale 0 → 1) stacked in the
top-left corner. When the "load" finishes, the counter fades out and GSAP **Flip** animates
every thumbnail from the top-left corner to the bottom-right corner with a staggered
scale-punch (each image blows up to 2.5× mid-flight and settles back to 1). Finally, divider
lines draw in and every piece of text (nav, giant heading, side info, footer) rises into view
line-by-line through overflow masks via **SplitText**. Everything runs once on
`DOMContentLoaded` — no scroll, no hover.
## Tech
…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.