Typing Animation Hero Block for React

Edit SENTENCE at the top of the file: the typed text and the invisible copy that holds its room both read it. One or two sentences work best; at 32 ms a character, a 100-character sentence takes about three seconds, and a long paragraph would keep visitors waiting. To type faster or slower, change speed, and delay for the wait before the first character (600 ms, so the headline lands first).

The paragraph is a one-cell grid holding two copies of the sentence: the whole one, invisible, and the typed one on top of it. The invisible copy sets the paragraph's height from the first frame, whatever the screen width and however many lines the sentence wraps to, so the buttons never jump down as lines fill in. A fixed height would clip the sentence on a phone, where it wraps to four or five lines.

The whole sentence, once, as soon as the page loads: TypingText keeps the full text in a visually hidden span and hides the typed letters and the caret from assistive technology, and the invisible copy is hidden too. So a screen reader never reads a half-typed sentence, nor the sentence twice. The headline is the page's one h1.

A caret that blinks forever is motion that never stops, which WCAG 2.2.2 asks to avoid, and it suggests that more text is coming. When the last character is typed, TypingText calls onComplete, which sets typed, and the caret switches to cursor="none", which keeps the line's height but draws nothing.

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

With reduced motion, the sentence appears whole at once, and the caret stands still until it's removed. Without JavaScript, the sentence shows whole too.

Use a typing sentence to reveal one sentence once, building a moment of anticipation under a fixed headline; here it also shows what a visitor would say to the product. Use a typewriter headline when you have several short benefits that finish the same sentence and want to cycle through them. Both keep the text readable to screen readers in full.