How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
Preloader (on load)
- A black curtain covers the page. Bottom right: a counter in the display font (120px to 360px, 22vw between) that counts from 00 to 100 over 2.2s (power2.inOut), always two digits. While it runs the page can't scroll.
- 0.25s after it reaches 100, the curtain slides up and off the screen (1.1s, power4.inOut).
Intro (as the curtain lifts)
- Starting 0.55s before the curtain has finished lifting, the headline's letters rise from below their own baseline into place, from the middle outwards: the two middle letters first, the outer letters last (1.4s each, power4.out, 0.09s apart).
- 0.45s after the letters start, everything else (nav, tagline, work link, card, learn more, copyright) rises 40px and fades in over 1.6s (power3.out), 0.07s apart.
Layout (it fills any screen, no letterboxing)
- Everything is sized in "design pixels" (--tds-nh-dp, one pixel of a 1440-wide design), so the headline always runs edge to edge and the figure always stands in the same spot between the letters. The headline is 349.02 design pixels tall in type.
- Tall screens: the figure's feet sit on the bottom edge. Wide screens: the headline stays at 25.6% from the top and the extra picture is cropped below the fold. Beyond a 2.13:1 screen the figure's sides are feathered into the video.
- The nav stays fixed across both screens: logo and two links on the left, a "Reach out to us" button with a cut-corner outline on the right. Tagline top left, a "[ WORK WITH US ]" link top right, "Learn more" and the copyright along the bottom, a 239 by 261 card bottom right.
- Tablet (under 1024px): tighter nav, "Learn more" moves right, card scales to 85%. Phone (under 640px): nav links and card hidden, 12px text, a shallower bottom fade.
- The page scrollbar is hidden, so the layout width and the screen width agree.
Letters
- The headline and the handle are split into one box per letter. Each box clips its own letter, so the rise inside the box is cut off cleanly, and the box itself can still travel upward during the scroll.
- Splitting text into separate boxes loses the font's kerning, so each pair of letters is measured after the fonts load and the difference is added back as a small left margin. The split headline is as wide as the unsplit one.
Scroll (hero to second screen)
- The hero is pinned for exactly one screen of scrolling and the second screen slides over it. Over that scroll: the figure grows from 1× to 1.28× (from its feet), the video grows to 1.14×, each headline letter drifts up by its own random 18% to 80% of the screen height (picked once per letter, so resizing never reshuffles them), the card, learn more, copyright and tagline lift at their own speeds, and the copy fades (the top copy over the first quarter, the bottom row from 10% to 60%).
- The bottom fade is one screen taller than it looks: a solid black slab rides up just ahead of the second screen, so the two screens blend through the gradient instead of meeting on a hard edge.
- The scroll animation is only built after the intro has finished, so it starts from the settled hero.
- The handle on the second screen (16px Helvetica, uppercase, centered) rises letter by letter from the middle when the screen reaches 55% of the way up (once, 0.03s apart). Smooth scrolling: Lenis drives the page (1.1s, expo-out, touch 1.6×) and tells ScrollTrigger on every frame, so the pinned hero stays in step. It is paused during the preloader. "Learn more" scrolls to the second screen through Lenis. Fallbacks: reduced motion: no preloader and no motion, everything is shown at once and the page scrolls normally. The component cleans up after itself when it is removed.