Counter Curtain Hero Reveal
What it does
Load sequence: a dark preloader counts 000 to 100 while a headline word rotates through five values, a light line advances and a small glass frame cycles through ten photos as it travels to its slot in the hero. The preloader text blurs out, the curtain wipes upward on a custom 'hop' ease, the hero words slide in from their masks and the frame expands with GSAP Flip until it becomes the section background under difference-blended type.
How it's built
| Category | preloader |
|---|---|
| Tech | gsap |
| GSAP plugins | CustomEase, SplitText, Flip |
| 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.
# Counter Curtain Hero Reveal — Load Counter, Rotating Word, Clip-Path Curtain & Flip-Expanding Frame
## Goal
Build a landing-page intro. A dark preloader shows the brand name top-left and a **rotating word** top-right (Studios → Season → Chamber → Archive → Vision), a **three-digit counter** bottom-left that runs 000 → 100, a caption bottom-right and a thin **iridescent progress line**. During the same 3 seconds a small **glass photo frame** in the hero (hidden under the preloader) **cycles through ten photos** and **travels from the section's left edge to its slot** inside the second headline row. Then: the preloader text **blurs and fades**, the panel **wipes upward** with a custom "hop" ease, the three headline rows **slide their words in from their masks** (row 1 and 3 from the left, row 2 from the right), the caption and nav fade/slide in, and the frame **expands with GSAP Flip until it fills the whole section** behind the type, which is `mix-blend-mode: difference` so it stays readable on any photo.
## Tech
Vanilla HTML/CSS/JS with ES module imports. `gsap` (npm) with **`CustomEase`**, **`SplitText`** and **`Flip`**. Font: **Hanken Grotesk** (500).
## Layout / HTML
```html
<div class="cc">
<div class="cc-preloader" aria-hidden="true">
<div class="cc-preloader__header">
<div class="cc-preloader__row"><h1>Underlume</h1></div>
<div class="cc-preloader__row"><h1 class="cc-preloader__word">Studios</h1></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