An animated hero headline

A hero headline has one job: be read. Motion should help it land, not delay it. This guide builds a headline that reveals on load, a subline that follows, and a counter in the stats row.

Choose the reveal

• Blur reveal for calm, premium products.
• Word reveal for editorial weight.
• Wipe reveal when the line should feel unveiled.

import { BlurReveal } from "@/components/textlab/blur-reveal/blur-reveal";
import { StatReveal } from "@/components/textlab/stat-reveal/stat-reveal";

export function Hero() {
  return (
    <section>
      <BlurReveal as="h1" trigger="mount" text="Ship the story, not the slides" />
      <BlurReveal as="p" trigger="mount" delay={0.35} variant="line" text="Decks that write themselves from your docs." />
      <StatReveal value={12400} suffix="+" trigger="mount" delay={0.6} />
    </section>
  );
}

Time it as a sequence

Stagger the pieces, not just the letters: the headline first, the subline about a third of a second later, supporting numbers after that. Keep the whole entrance under about 1.2 seconds so nobody waits.

Check reduced motion

Turn on reduced motion in your OS settings and reload. The headline should be there instantly, with no blur and no movement. Every Textlab component does this out of the box.