Ascender

Build a fullscreen preloader called Ascender.

Centre a single word on a near-black stage, set in a geometric sans at weight 700, around 17% of the stage's smaller dimension, tracking -0.05em, with each letter wrapped in its own inline-block element. Add a hairline white rule at 20% opacity below the word, a little wider than the word itself.

Animate every letter on the same 3.4s loop with cubic-bezier(0.22, 1, 0.36, 1), staggered by 85ms times its index so the word assembles left to right. The keyframes: start at opacity 0, blur 14px, translateY 70% and scaleY 1.5; arrive by 20% at opacity 1, no blur, translateY 0 and scaleY 1; hold that until 58%; then leave by 78% at opacity 0, blur 14px, translateY -55% and scaleY 1.5, and stay gone until the loop restarts.

The vertical scale is doing quiet work here. Stretching the letterform on the way in and out makes the blur read as speed rather than as an out-of-focus image, and it is what separates this from a plain fade.

Loop forever. Under prefers-reduced-motion, hold every letter in its settled state.