# Typewriter Hero

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

Source: https://www.motion-components.dev/docs/recipes/typewriter-hero/

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

## Complete code

```html
<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

```html
<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

```html
<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

```html
<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.

```html
<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.