A full-screen curtain with a counter from 0 → 100, then lifts away. The "we care about first impressions" intro animation.
An intro curtain that covers the page on load, runs a big counter from 0 → 100, then slides up to reveal the site. Common on agency, portfolio, and high-design product launches. The counter is mostly theatrical — real pages don't take 2 seconds to load — but it sets a tone of "this site was crafted on purpose." Many sites time the curtain to actual asset loading, others (most) fake it for the drama.
An absolutely-positioned overlay covers the entire viewport on load. It contains a huge counter element. On DOMContentLoaded, a JS loop animates the counter from 0 to 100 over ~1.6 seconds. When it hits 100, a class is added that transitions the overlay's transform: translateY(-100%) over ~0.8 seconds, sliding it up like a curtain. The page content underneath has its own opacity/translate transitions delayed to start just as the curtain begins to leave, so the reveal is choreographed.
The curtain runs automatically. Click "Replay" to run it again.
One curtain. One counter. One choreographed reveal. The site begins.
Build an intro page-loader curtain. Full-screen overlay (position:fixed, inset:0, z-index:9999) with the brand's accent color background. Inside: huge counter element centered (font-size clamp(80,18vw,200), font-weight 200, font-variant-numeric:tabular-nums), brand name in small mono at bottom-left, and a thin progress bar at the bottom that fills 0→100% as the counter increases. On DOMContentLoaded, run a requestAnimationFrame loop that updates the counter from 0 to 100 over ~1600ms (ease-out cubic) — update both the counter text and the progress bar's width:percent. When the counter reaches 100, add a .lift class to the overlay that transitions transform:translateY(-100%) over 800ms with cubic-bezier(0.7,0,0.2,1), with transform-origin:bottom. Underlying page content (headline + paragraph + buttons) starts opacity:0 + translateY(24px) and has staggered transition-delays (0.9s, 1.1s, 1.3s) so it appears choreographed as the curtain leaves. Include a "Replay" button to demonstrate the effect again.