build69
Sign inGet API key
build69  /  Components  /  Motion — Text Animations  /  TypewriterText

TypewriterText

v1.0.1Updated 21 Jul 2026

Types text out character-by-character with an optional blinking cursor, either as a single static string or as a rotating list that types, pauses, deletes and moves to the next phrase. Wraps the MagicUI TypingAnimation primitive with build69 prop names (speed/deleteSpeed/pauseMs). Under prefers-reduced-motion it renders the first string statically instead of looping forever.

View source← Back to catalog

Preview

Live · 7 stories
All VariantsOpen ↗
▸Why this is recommendedanimationtexttypewritertyping+7

Every TypewriterText variant lined up for comparison.

Recommended for+14
  • ✓Rotating value propositions in a hero headline ("Build69 is a workspace for… Thai SMBs / invoice teams")
  • ✓Making an AI assistant reply feel like it is being streamed live
  • ✓Onboarding callouts that type out a personalised greeting
  • ✓Landing page subheads that cycle through customer segments
Tags+6
animationtexttypewritertypingrotatingheadlinemotionmarketingheroallvariants
Features+4
  • Rotating phrase list via `strings` — types, pauses, deletes, repeats
  • Single static string via `text` with `loop={false}` for a one-shot type-out
  • Blinking cursor toggled with `cursor`
  • Independent type and delete speeds plus a pause between phrases
  • Respects prefers-reduced-motion by rendering the first string statically (WCAG 2.3.3)
Not recommended for−2
  • ✕Body copy or long paragraphs
  • ✕Text that re-renders frequently from state
  • ✕Content that must be immediately readable by scanners or on first paint

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "TypewriterText" })

Usage

import { TypewriterText } from '@/components/motion/animated-text/typewriter-text';

<h1 className="font-heading text-3xl font-semibold">
  Build69 is a unified workspace for{' '}
  <TypewriterText
    strings={['Thai SMBs.', 'invoice teams.', 'sales managers.']}
    speed={70}
    deleteSpeed={35}
    pauseMs={1600}
  />
</h1>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
text

Single static string to type out. Ignored when `strings` is provided.

string—
strings

Rotating list of phrases; each is typed, held, then deleted.

string[]—
cursor

Show the blinking cursor (default: true).

boolean—
speed

Per-character typing speed in ms (default: 55).

number—
deleteSpeed

Per-character delete speed in ms (default: 30).

number—
pauseMs

Hold time in ms once a phrase is fully typed (default: 1400).

number—
loop

Loop the cycle. Defaults to true when `strings` has more than one entry.

boolean—
className

Classes merged onto the rendered span.

string—

Related

Platform docsAll componentsSource files