Typewriter Hero Block for React

Edit the WORDS array at the top of the file. Three to five short words work best: each one is typed, held for two seconds (pause) and deleted before the next, so a long list takes a while to come round. The chip keeps room for the longest word, whichever it is, so the headline never jumps as the words change length. The visually hidden sentence is built from the same array.

The whole sentence, once: "Turn tickets into docs, answers, changelogs, fixes". The typed letters and the caret are hidden from assistive technology, so a screen reader never reads a half-typed word or hears the headline change every few seconds. The headline is still the page's one h1.

It stops the typing and leaves the chip on its first word, "docs", with no caret. Press it again and the typing starts over from the first word. It's a toggle button (aria-pressed) named "Pause typing", so a screen reader says whether it's on. Anything that moves on its own for more than five seconds needs a way to stop it (WCAG 2.2.2), and a headline that types forever is no exception. The button is a control, not a call to action: the Shine Button stays the page's one primary.

All three are links to #: point them at your release notes, sign-up and a sample. On Base UI, each button renders its link with render={<a href="/signup" />} and nativeButton={false}.

With reduced motion each word appears whole, without being typed or deleted, and the caret stays still instead of blinking; the words still change in turn, and the pause button stops them. Without JavaScript, the chip shows its first word whole.

Change the props on TypingText: speed is the average time per letter (110 ms here), deleteSpeed the time to delete one (60 ms), and pause how long a typed word stays (2000 ms). Each keystroke's wait varies a little around speed (jitter), so it reads like a person typing; set jitter={0} for an even beat.

Use it when your product has several short benefits that finish the same sentence, and you want the first screen to say all of them. Use a static headline when one message carries the page: it's quicker to read, and nothing competes with your calls to action.