Typewriter Web Component

TypeWriter Web Component

A web component for character-by-character text animation with HTML support. Suitable for interactive storytelling, educational tutorials, chat simulations, and dynamic content presentation.

Features

• HTML Support — Preserves tags including emphasis, links, code, and nested structures
• Bidirectional Text — Supports LTR and RTL text direction via dir attribute
• Dynamic Content — Update content with setText() method
• Playback Control — Methods for start, pause, resume, complete, and reset
• Progress Events — Dispatches progress events during animation
• Accessibility Features — ARIA live regions and optional reduced motion support

Configuration Attributes

• speed — Characters per second (default: 100)
• min-duration — Minimum animation duration in ms (default: 50)
• max-duration — Maximum animation duration in ms (default: 500)
• autostart — Auto-start on load, set to "false" to disable (default: true)
• dir — Text direction: "ltr" or "rtl" (default: ltr)
• respect-motion-preference — Respect prefers-reduced-motion media query (default: false)
• aria-label — ARIA label for the container region

JavaScript API

• start() — Begin animation from start
• pause() — Pause animation
• resume() — Resume paused animation
• complete() — Display all content instantly
• reset() — Clear content and reset state
• setText(html) — Replace content and reset

Events

• start — Dispatched when animation begins
• pause — Dispatched when animation pauses
• resume — Dispatched when animation resumes
• complete — Dispatched when animation finishes
• reset — Dispatched when component resets
• progress — Dispatched every 10 characters with {current, total, percent}

RTL

يدعم المكوّن النصوص العربية مع الحفاظ على الاتجاه الصحيح. يمكن دمج الروابط والنصوص الإنجليزية مثل TypeWriter داخل المحتوى العربي.

• يدعم القوائم النقطية بالاتجاه الصحيح
• يحافظ على التنسيق داخل العناصر
• يعمل مع الأكواد والعناصر المضمنة

Update

See TypeWriter Web Component V2 → with enhanced seek functionality, allowing to jump to any position in the animation timeline. Includes scrub controls, percentage-based seeking, improved pause/resume behavior, and better UI state management.

Technical Details

Built using Custom Elements API. Uses Light DOM for CSS inheritance. Whitespace normalization collapses consecutive spaces and skips formatting whitespace. Works in modern browsers supporting Custom Elements.