Preloader Counter

Create a preloader counter entrance. A full-screen dark overlay shown on first load: a large percentage counter (bottom-left, display size, tabular-nums, with the unit symbol after it in the accent color) counts 0 to 100 above a thin progress line, and when it hits 100 the whole overlay slides up like a curtain (transform: translateY(-100%), 550ms cubic-bezier(0.22, 1, 0.36, 1)), revealing the page. It leaves rather than fades, so the eye is carried upward into the content instead of just cutting to a new scene. In the top-left corner, a small letter-spaced uppercase wordmark at about 55% opacity - the wording is listed at the end. A bare counter could belong to any site; the wordmark is what makes the wait feel like part of yours. If a caption is given, set it in monospace under the progress line, letter-spaced, uppercase, at about 45% opacity. Pacing: count over ~2.2s with a slight hesitation around 80% (ease the curve so it slows there) - the pause makes it feel like real loading, while a perfectly even climb reads as decoration. If actual asset loading finishes first, jump the counter to 100 and release early; never hold a ready site behind a fake counter. Implementation: the overlay is position: fixed, inset 0, z-index above everything; drive the count with requestAnimationFrame; the progress line is a scaleX transform of that same count, never a second timer, or the bar and the number will drift apart. Use tabular numerals so 8, 88 and 100 hold the same places and the counter does not shuffle sideways as it climbs. Show it only on the first visit per session (sessionStorage flag), never on internal navigation - a preloader that replays is the fastest way to make a fast site feel slow. Under prefers-reduced-motion, skip the preloader entirely rather than shortening it. Make it mine: - Set the wordmark in the overlay's top-left corner to "Studio", letter-spaced and uppercase at about 55% opacity. - Set the symbol after the counter to "%", in the accent colour. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.