Linear shipped a new homepage section called “The Method” last week: a long-scroll page that walks through their product philosophy without showing the product. By the end, you understand what Linear does and why their issue tracker looks the way it does, even if you’ve never opened the app. That’s a strong move and it’s worth taking apart.
What’s working
The page is a single column at one breakpoint, then locks. Most marketing pages today bend over backwards to be responsive: fluid grids, container queries, the whole catalog. Linear didn’t bother. The Method is a fixed 720px reading column on desktop, full-bleed on mobile, and that’s it. No tablet-specific layout. No widescreen variation. The constraint reads as confidence: this is the format we wrote for, and we’re not going to compromise it for your 32” ultrawide.
Section transitions are timed to scroll velocity, not scroll position. Pull up the inspector and you’ll see the sticky-section trick: each “chapter” of The Method becomes position: sticky for the duration of its scroll range, and Linear hooks into the IntersectionObserver to fade in supporting headlines as you arrive. The clever part is that they’re not animating off scroll percentage; they’re animating off how fast you’re scrolling. Slow readers get the full fade. Speed-scrollers blow through with the section already in its final state. It feels alive without being annoying.
Type is doing 80% of the work. Linear’s type stack is one custom display face (a tightened Tiempos Headline variant) and Inter for body. Headlines are big: 96px on desktop, 56px on mobile, tracked tight, almost touching. Body copy sits at a comfortable 18px / 1.6 line-height. There are no illustrations. There are barely any images. The page breathes through type weight contrast and section rhythm alone.
What isn’t working
The fade-up animations on supporting copy are too slow. Each subhead and paragraph fades up over around 600ms. On a fast scroll, you can outrun the animation, and reading copy that’s 40% opacity is uncomfortable. The fix is the standard one: clamp the animation duration to a max of 250ms when the scroll velocity is high. Linear’s team has the JS chops to do it; they just haven’t yet. Watch this iterate.
The mobile reading column is too wide on small phones. At 375px viewport width, Linear’s reading column gets to 343px after padding, which is fine for body copy, but their 56px headlines wrap into 4-line stacks that look claustrophobic. Either dropping the mobile headline to 48px or pulling the side padding down to 12px each would solve it. Easy fix.
What to steal
-
The “single sticky column with section chapters” pattern. This is going to be everywhere by Q3: Linear is just the most visible recent shipping example. The mechanic is simple to implement: each section becomes
position: sticky; top: 0; height: 100vh;, then you scroll inside the section’s content. Apple’s product pages have done variations of this for years. Linear adapted it for editorial content. -
The “no product screenshots” pitch. A surprising number of SaaS marketing sites don’t need them. If your product’s value isn’t visual (if it’s a workflow, a discipline, a way of thinking) then leading with screenshots can actually undermine your pitch. The Method demonstrates that you can sell a tool by selling the worldview around it, then trust readers to follow the link.
-
Velocity-aware scroll animation. This is the one most teams skip and shouldn’t. Most scroll-driven animation on the web ignores how fast the user is moving and runs at fixed durations. The result is the well-known “I scrolled past it before it loaded” effect. Hooking velocity in is two lines of math; it makes the difference between “smooth” and “fighting me.”
The Method goes live for Linear’s enterprise sales conversations as a single shareable URL. Worth bookmarking, and worth opening the inspector on.