Typewriter Text

Text that animates itself character by character using a CSS steps() width animation on a monospace element. A blinking cursor is included by default. Useful for hero hooks, slide reveals, and LLM demo showcases. No JavaScript required.

Surfaces
webgoogle-meet-stagegoogle-apps-script-side-panelgoogle-apps-script-webmcp-apps
Degraded on
SurfaceNote
pdfRenders as fully-visible static text without animation
google-chatCSS animation not supported; renders as plain text
Live preview
A concise description of the content.
Fields
FieldType
textstring. The text to type out.required
sizestring. Font size e.g. "32px". Default "28px".optional
weightstring. Font weight e.g. "700". Default "700".optional
colorstring. Text colour. Default "#1a1a1a".optional
speed"slow" | "normal" | "fast" (optional, default "normal")optional
cursorbool. Show blinking cursor. Default true.optional
delaystring. CSS delay before typing starts. Default "0s".optional
Example payload
{
  "type": "typewriter_text",
  "text": "A concise description of the content."
}
ARD catalog entry
{
  "identifier": "urn:air:a2uicatalog.ai:atom:typewriter_text",
  "displayName": "Typewriter Text",
  "type": "application/vnd.a2ui.atom+json",
  "url": "https://a2uicatalog.ai/atoms/typewriter_text",
  "capabilities": [
    "web",
    "google-meet-stage",
    "google-apps-script-side-panel",
    "google-apps-script-web",
    "mcp-apps"
  ],
  "description": "Text that animates itself character by character using a CSS steps() width animation on a monospace element. A blinking cursor is included by default. Useful for hero hooks, slide reveals, and LLM demo showcases. No JavaScript required.",
  "representativeQueries": [
    "show a CSS typewriter animation that reveals text character by character",
    "text that animates itself character by character using a css steps() width animation on a monospace",
    "render a typewriter text"
  ]
}
← Full ARD catalog
Deploy your own Google Apps Script renderer

The renderer is an open-source Google Apps Script web app. Deploy your own instance in 4 commands — you own the URL, no dependency on the demo endpoint.

git clone https://github.com/a2uicatalog/a2ui
cd a2ui/apps-script-surface/gas-wired-renderer
clasp push && clasp deploy
Full deploy guide →