AstroAnimate Docs — Installation, Components & API

Renders text with a typewriter-style animation that cycles through an array of strings. Uses a JavaScript-driven typing effect with a CSS-only static fallback.

Preview/Playground

Created by

Vipin

Astro

import TypewriterText from "@astroanimate/core/TypewriterText";

<TypewriterText
  texts={["Hello", "World", "Astro"]}
  enhance
/>

Installation

bash

npm install @astroanimate/core

Usage

import TypewriterText from "@astroanimate/core/TypewriterText";

<TypewriterText
  texts={["Hello", "World", "Astro"]}
  enhance
/>

Displays animated typing/erasing text when enhance=true.

<TypewriterText
  texts={["Fast", "Reliable", "Astro-native"]}
  typeSpeed={60}
  eraseSpeed={30}
  pauseAfter={1500}
  enhance
/>

Customizes typing speed and timing behavior.

Props

Prop	Type	Default	Description
`texts`	`string[]`	`(required)`	Array of strings to cycle through (first string used as static fallback)
`enhance`	`boolean`	`false`	Enable JavaScript-powered typing animation (replaces static fallback content)
`typeSpeed`	`number`	`70`	Milliseconds per character during typing
`eraseSpeed`	`number`	`40`	Milliseconds per character during erasing
`pauseAfter`	`number`	`1800`	Milliseconds to pause after fully typing a string
`pauseEmpty`	`number`	`500`	Milliseconds to pause when fully erased
`showCursor`	`boolean`	`true`	Whether to render the cursor element
`cursor`	`string`	`"\|"`	Cursor character
`mainClassName`	`string`	`""`	Custom class applied to root element
`loop`	`boolean`	`true`	Whether to loop continuously
`erase`	`boolean`	`true`	Whether to erase before typing next phrase

Behavior

Displays the first string as static content by default (no JavaScript required)
When enhance=true, JavaScript replaces static content with dynamic typing animation
Animation progresses through multiple phases:
- Typing characters one by one
- Pausing after the full string is typed
- Erasing characters (if erase=true)
- Pausing before the next string
When loop=false, animation stops after one full cycle
When erase=false, text accumulates instead of being removed
Cursor is rendered using CSS and remains visible without JavaScript

Use When

Displaying rotating headlines or taglines
Creating typing effects for hero sections
Showing short, dynamic text content with progressive enhancement

Avoid When

Content must always be fully visible without JavaScript (only the first string is shown)
Displaying long or complex text blocks
Precise formatting or rich text rendering is required

Accessibility

Includes aria-label, aria-live="polite", and aria-atomic="true" for screen readers
Respects prefers-reduced-motion
Typing animation and cursor blinking are disabled when reduced motion is preferred
Static fallback ensures meaningful content is always available

Performance

Uses setTimeout-based scheduling for precise timing control
WeakMap prevents duplicate initialization
MutationObserver ensures timers are cleaned up when element is removed from the DOM
No layout shifts — content updates via textContent only

Credits

Credit to @vipin

Typewriter text