How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- Full-screen section (height: 100vh; min-height: 640px), near-black ground #070809. Content block sits on the right: it starts at the horizontal middle of the page and is vertically centered.
- Headline: Bebas Neue, uppercase, 72px (64px from 992 to 1279px, 56px under 992px, 38px under 480px), line-height 0.9, letter-spacing -0.02em, color #E3E6E4.
- Twinkle reveal: the script splits the headline into one <span> per character (spaces stay plain text so it still wraps). Every letter starts at opacity: 0 with transition: opacity 340ms ease. When the headline scrolls into view (its top passes 88% of the viewport height, checked on scroll, fires once) the letter order is shuffled (Fisher-Yates) and each letter gets transition-delay: slot × step where step = min(18, 820 / letterCount) ms. Then all letters switch to opacity: 1 at once, so they light up in the shuffled order.
- Subline and button fade from opacity: 0 to 1 over 1100ms cubic-bezier(0.22, 1, 0.36, 1) when their top passes 86% of the viewport. Anything already on screen when the page loads reveals immediately, and anything the visitor jumps past (anchor link, End key) is revealed too, so nothing is ever left invisible.
- Button: 44px tall, 28px side padding, uppercase 14px, letter-spacing -0.02em, light fill #F3F5F0 with ink text. Two corners are cut at 45° (top-right and bottom-left, 14px) with clip-path. On hover a teal fill (#34C3B5) sweeps across from the left in 460ms cubic-bezier(0.22, 1, 0.36, 1). It is a linear-gradient(to right, teal 50%, transparent 50%) sized 201% 100% moving from background-position: 100% 0 to 0 0 (201%, not 200%, avoids a hairline seam). The arrow nudges 4px up and to the right.
- Phones (under 768px): the content moves to the bottom of the screen, full width, with 24px/16px/40px padding and a 20px gap.
- Fallbacks: if JavaScript never runs, the headline is plain text and everything is visible. With prefers-reduced-motion: reduce, every letter is lit immediately and nothing fades. will-change is released after each letter finishes (2s backup timer), so the page doesn't keep extra layers in memory.