How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- On first load a fixed, full-screen curtain (ground #1E1512) covers the page. Centered in a column with a 28px gap: the monogram (72px wide, 92% opacity) and the counter (16px, letter-spacing 0.28em, tabular numbers, warm taupe #B4A594, zero padded to three digits: 000, 007, 042 … 100).
- The counter runs for 1000ms with an ease-out cubic (1 - (1 - t)^3), so it decelerates into 100.
- At 1120ms (the count plus a 120ms hold at 100) the curtain lifts: transform: translateY(0) to translateY(-100%) over 800ms cubic-bezier(0.76, 0, 0.24, 1). At the same moment a revealed window event fires and a global flag is set, so components that mount later still know the page is uncovered.
- At 1920ms the curtain is removed from the page and scrolling is unlocked (overflow: hidden on <html> until then).
- onRevealed(callback) runs the callback on the event, immediately if it already happened, and after 4 seconds at the latest, so nothing waiting on it is ever stranded.
- Fallbacks: the curtain is server-rendered so it covers the very first paint. With prefers-reduced-motion: reduce it never shows and revealed fires immediately. Without JavaScript it is hidden by a <noscript> rule, so the page is readable.