build69
Sign inGet API key
build69  /  Components  /  Motion — Text Animations  /  typing-animation

typing-animation

v1.0.1Updated 21 Jul 2026

Lower-level MagicUI source primitive backing `AnimatedText.TypewriterText`. Prefer the `AnimatedText` composite from `@/components/motion/animated-text` unless you need direct access to the underlying API.

View source← Back to catalog

Preview

Live · 8 stories
DefaultOpen ↗
▸Why this is recommendedtexttypewriteranimationmagicui+2

The default, out-of-the-box typing-animation.

Recommended for+14
  • ✓Custom typewriter patterns not covered by AnimatedText
Tags+6
texttypewriteranimationmagicuiprimitivedefault
Features+4
  • Character-by-character typing
  • Optional blinking cursor
  • Rotating words list
  • Configurable type / delete speed
Not recommended for−2
  • ✕Most product surfaces (use the build69 `AnimatedText` composite)

Install

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

get_registry_item({ name: "typing-animation" })

Usage

import { TypingAnimation } from '@/components/motion/typing-animation';

<TypingAnimation words={['Build apps', 'Build agents']} />

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
words

Rotating list of strings

string[]—
typeSpeed

Type speed in ms per char

number—
deleteSpeed

Delete speed in ms per char

number—
showCursor

Show blinking cursor

boolean—

Related

Platform docsAll componentsSource files