Staggered blur word-reveal headline

Load-triggered reveal, each word blurs in on a stagger. Re-trigger on route change by toggling a class rather than replaying automatically, replaying every scroll gets annoying fast.

pattern · linear.app hero animation-textvanilla

Get a site with blocks like this

Live preview

open in new tab ↗

<section class="lwr-wrap">
  <h1 class="lwr-headline">
    <span class="lwr-word" style="--d:0">Built</span>
    <span class="lwr-word" style="--d:1">for</span>
    <span class="lwr-word" style="--d:2">teams</span>
    <span class="lwr-word" style="--d:3">who</span>
    <span class="lwr-word" style="--d:4">move</span>
    <span class="lwr-word" style="--d:5">fast.</span>
  </h1>
</section>

Block id: linear-hero-word-revealvanilla · swap-content

More hero blocks

Split hero with booking-card mockup

cal.com

Split hero with glowing app mockup

linear

Hero video dialog with thumbnail

magicui

Retro scrolling grid background

magicui

Want the whole site, not just the block?

We ship real client sites in 3 weeks — with blocks like this one, wired to your brand.

Get my free 15-min audit Book a Discovery Call