Superhuman
How Superhuman uses minimum motion — a fade-in-place logo ticker and scroll-synced navigation — to build a page that feels calm, fast, and never demanding.
Patterns extracted
The reusable payload — scan, then diveFade-in-Place Logo Ticker
Motion that comes to you, not content you have to chase.
Outgoing
Incoming It’s way better than the Marquee component often used for Reviews/Credits section. My eye is static and I dont like things that are moving — not a fan of too much motion, i have to catch things.
Marquee moves content through space — your eye has to physically track it like watching a car drive past. If you blink or look away, you missed something. Superhuman’s version moves content in place — the layout doesn’t shift at all. Six logo slots stay fixed. Only the rightmost slot swaps, fading the outgoing logo to gray then fading the incoming one to full black. Your eye sits still and the change comes to you — a notification, not a chase.
There’s also a confidence signal: a static layout feels settled. A scrolling marquee feels like it’s nervously trying to fit more in. Fade-in-place says “we have enough credible names, we don’t need to rush them past you.”
Scrollspy Navigation
The active tab tracks where you are, not just where you click.
Mail active
Go active Instead of tabs-like implementation, they use scroll-to-section technique. When we scroll to a section => the header is highlighted for that particular service. It’s like a table of content on the left and when i scroll down to each section in the paragraph, the header title in the table of content is highlight. quite nice.
The technical name is scrollspy — the active tab tracks your scroll position and highlights to reflect where you are on the page. What makes it powerful is that it works in both directions: scroll down and the tab updates; click a tab and it jumps you there. Most tab implementations only do the second. Scrollspy does both, so navigation feels like reading, not operating a UI. The sticky tab bar is load-bearing — without it staying fixed at the top, the highlight change would be invisible.
Contained Product Animation
Motion inside a fixed frame — readers can ignore it, watchers can focus.
combination of gif-like illustration, not static is nice, since this is a tool, and a short gif showing them the sequence of action on how to use is better than a static illustration. I also feels like a scrolling smoothness is very easy to feel.
Static screenshots show what a tool looks like. Animation shows what it does. For productivity software, the sequence of actions — type a prompt → AI responds → result appears — is the value proposition. A screenshot of an inbox is just an inbox. The animation shows the moment of magic.
Crucially, the motion is contained — it lives entirely inside the right-side demo box. The layout doesn’t move. The tab bar doesn’t move. The text doesn’t move. The only thing animating is inside a bounded frame, so users who want to read can ignore it, and users who want to watch can focus on it. The consistent left-text / right-demo structure across all four products also creates the scrolling smoothness — every new section is instantly readable with no reorientation needed.
Overall
It’s way better than the Marquee. I also feels like a scrolling smoothness is very easy to feel.
Superhuman’s page is built around a single principle: motion serves the user, not the design. The logo ticker swaps in place rather than scrolling past. The product demos animate inside a box rather than across the screen. The scrollspy highlights rather than jumping. Every animation is the minimum needed to communicate the change — no more. The result is a page that feels fast and calm to scroll through, never anxious, never demanding.