Typewriter Hero

A hero section with a character-by-character typewriter headline and a fading subcopy. The typewriter adds presence, the reveal adds depth.

Preview

Complete code

<section class="hero">
  <h1>
    <motion-typewriter interval="0.04" delay="0.3" cursor>Build interactions that ship.</motion-typewriter>
  </h1>

  <motion-reveal y="16" duration="0.6">
    <p>Physics-based web components for any framework.
       No easing curves to tune.</p>
  </motion-reveal>
</section>

How it works

Typewriter headline

<h1>
  <motion-typewriter interval="0.04" delay="0.3" cursor>Build interactions that ship.</motion-typewriter>
</h1>

The typewriter reveals the headline one character at a time. interval is the time between characters in seconds. delay adds a pause, in seconds, before typing starts. The cursor attribute adds a blinking caret.

Reveal subcopy

<motion-reveal y="16" duration="0.6">
  <p>Physics-based web components.</p>
</motion-reveal>

The subcopy fades in with a slight lift. Without an explicit delay, it starts immediately when the element enters the viewport. The different durations create a natural choreography: the typewriter takes longer, the reveal resolves faster.

Variations

Looping

<h1>
  <motion-typewriter interval="0.04" delay="2" loop cursor>Build. Ship. Iterate.</motion-typewriter>
</h1>

Add loop to cycle through: type, pause, erase, retype. The delay is the pause between cycles in milliseconds.

Word-by-word

For a calmer, more editorial feel, use motion-headline instead. It reveals word by word with a mask slide rather than character by character.

<h1>
  <motion-headline by="words" interval="0.06" duration="1">The future of motion</motion-headline>
</h1>

Accessibility

The typewriter respects prefers-reduced-motion: the full text appears instantly with no character-by-character animation, and the caret does not blink. Screen readers always read the full text, even while it types. Put the typewriter inside the <h1>, not around it: it replaces its own content, so a heading inside it would be lost.