Hello, I'm Nick. I design insane websites and user interfaces.
This is where I talk about all of the cool sites I find online.
I've been staring at one section of Extra for longer than I'd like to admit. Not the whole site. One move. The typewriter.
Extra is a mail app, and the landing page is skinned as a mail composer. The whole page looks like a Draft window. There's a FROM line, a TO line, a SUBJECT line, and then the hero video scales down as you scroll and lands inside the compose window as an ATTACHED file. That's already a good idea. Product IS the page chrome, so the marketing site demonstrates the product by being the product. Fine. Elegant. Move on.
Then you hit the body of the email and the thing that got me starts typing.
The detail I can't stop looking at
The copy renders letter by letter as you scroll. "Your life runs through email. Flights, packages, work, birthday parties, school updates, bills, job offers." One character per few pixels of scroll. That's not what makes it interesting. Lots of sites do typewriter effects.
Here's what makes it interesting. Scroll up and it backspaces. Scroll down and it types. Scroll fast and it types fast. Scroll slow and it types slow. The reveal is bound to scroll POSITION, not to a timer. Character count reads directly off where you are on the page. There's no "play once and lock." There's no debounce. It's a pure mapping from scroll progress to string length.
The technical version of this is a scroll-scrubbed timeline pinned to that section, with the character count of the copy tied to scroll progress in the pin range. GSAP ScrollTrigger with scrub: true gives you this shape. So does the Framer motion primitives that Extra appears to be built on. The mechanism is not exotic.
What's exotic is that somebody thought hard enough to bind reveal to position instead of to time.
Why that one decision changes everything
Think about a normal typewriter animation. It plays for a fixed duration on section entry. If you scroll fast, you shoot past it and see nothing. If you scroll slow, you sit there watching characters trickle out at a speed the animation picked, not one you asked for. Time-based typewriters are a betrayal of the reader. They either bore fast readers or lose slow ones.
Position-based reveal makes that tradeoff go away. A fast scroller gets a fast reveal and still sees every character. A slow scroller gets a slow reveal and doesn't have to wait for anyone. The reader controls the pace by scrolling, which is the input they were already using. The copy becomes unskippable without ever blocking anyone.
That last sentence is the whole reason I keep coming back to this page. Unskippable without blocking. Most attempts at making people read your copy involve a lightbox, a scroll-jack, a pin that fights the trackpad, or a modal that has to be dismissed. Extra just binds letters to scroll progress and lets the reader scrub through at whatever speed they were already scrolling.
The copy still gets read. Nobody has to fight for it.
The proof this is a real principle and not a party trick
Once you notice the site is doing this, you catch it everywhere. Watch the whole page and you see the same grammar applied to different objects. The hero video scales continuously as you scroll down and lands inside the ATTACHED field. Scroll up, it scales back out. The Send pill at the foot of the compose window expands into a full-bleed dark inbox panel, and the panel scales back down into a rounded card when you leave. Scale plus corner radius is the site's verb for promoting an element from "an object on the page" to "the whole environment" and back. All of it is bound to scroll position. All of it is bidirectional. All of it responds to the exact speed you're moving.
The phone-mockup section a little further down does the same thing horizontally. Feature screens sit queued off to the right, grayed out with reduced opacity. As you scroll, one slides into the phone frame and the previous slides out. The left column stays completely still. A stationary reference frame is what lets a horizontal slide read as intentional instead of noisy. That's another position-linked timeline, another "hold one thing still, move the other thing."
Even the tail. Text labels swap on scroll scrub. The background color interpolates from white to a warm yellow. Most sites blow their motion budget in the first screen and coast to the footer on static sections. Extra keeps the scroll-bound grammar going all the way down. Notable, because it costs something to do that and they paid it anyway.
Type-wise, the whole thing is ES Rebond Grotesque TRIAL Semibold for the display stack (up to 72px in the compose SUBJECT line) and Inter for the body. Nothing showy. The typography is the plate, not the meal. The scroll engine is the meal.
What I'm taking from this
Two things.
First, scroll position is a design tool most sites treat as a delivery mechanism. Extra treats it as an input the reader is actively controlling and builds the entire page around that reading. If your marketing copy needs to be read and you're using a time-based typewriter or a snap-in fade, you're solving the wrong problem. Bind reveal to position and the fast readers stop losing and the slow readers stop waiting.
Second, and this is the quieter one. The site does the same move at multiple scales. Scale-plus-radius for object promotion. Scroll-linked reveal for copy pacing. Held anchor + moving stage for horizontal slides. When a site invents a grammar and then applies it consistently, the page starts to feel like it was thought about by one brain instead of assembled from a Figma library. That coherence is what makes a site feel expensive. It has nothing to do with rendering budget and everything to do with somebody deciding what the site's verbs are and then using only those verbs.
I'm going to keep this page bookmarked. Not because I want to copy the typewriter (though the pattern is now in my head). Because I want to remember what a site looks like when somebody picked a grammar and stuck with it.
Want your site to move like this?
If you're building something where the copy has to be read and the motion has to earn its cost, this is exactly the kind of thinking Crazy Creative does. Scroll systems that reward scrollers instead of fighting them. One design grammar applied end to end instead of a scrapbook of trending effects. See what the studio has built at crazycreative.design.