Typewriter Component for Astro

Features

Respects prefers-reduced-motion: reduce: full message is presented immediately, following message appears after the same delay as if animated.
Works without JavaScript: all messages are shown immediately, separated by a comma.
Screen readers and search engines see all messages at once and immediately, separated by a comma.
So lightweight, that it doesn't react to attribute changes (that's why you use Astro, right?).

Installation

npm install astro-typewriter
# or
yarn add astro-typewriter
# or
pnpm add astro-typewriter

Usage

Basic example

---
import Typewriter from "astro-typewriter";
---

<Typewriter messages={["Hello World", "This was easy"]} />

With emojis

---
import Typewriter from "astro-typewriter";
---

<Typewriter
  messages={["Hello Emojis 👋", "❤️🧡💛💚💙💜"]}
  style="line-height: 1.2em"
/>

Add line-height: 1.2em to prevent layout shifts. → More info

With inherited styles

---
import Typewriter from "astro-typewriter";
---

<div class="fancy">
  <Typewriter messages={["Hello World", "This was easy"]} />
</div>

<style>
  .fancy {
    color: #b33e66;
    text-decoration: underline;
  }
</style>

With class styles

---
import Typewriter from "astro-typewriter";
---

<Typewriter messages={["Hello World", "This was easy"]} class="typewriter" />

<style>
  .typewriter {
    background: linear-gradient(to right, #121fcf 0%, #cf1512 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
</style>

With inline styles

---
import Typewriter from "astro-typewriter";
---

<Typewriter
  messages={["Hello World", "This was easy"]}
  style="color: green; font-family: monospace"
/>

With custom cursor

---
import Typewriter from "astro-typewriter";
---

<Typewriter messages={["Hello World", "This was easy"]} class="big" />
<br />
<Typewriter messages={["Hello World", "This was easy"]} class="emoji" />
<br />
<Typewriter messages={["Hello World", "This was easy"]} class="no-blink" />

<style>
  .big::part(typewriter)::after {
    color: lime;
    width: 0.5em;
    height: 1.5em;
    transform: translateY(0.4em);
  }
  .emoji::part(typewriter)::after {
    content: "❤️";
    background: transparent;
  }
  .no-blink::part(typewriter)::after {
    animation: none;
  }
</style>

With custom speeds

---
import Typewriter from "astro-typewriter";
---

<Typewriter
  messages={["I am a slow typer."]}
  writeSpeed={250}
  deleteSpeed={50}
  waitWritten={3000}
  waitDeleted={2000}
/>

All speeds are in milliseconds.

Attributes

messages: Array of strings to be typed out.
writeSpeed: Speed in milliseconds for typing characters.
deleteSpeed: Speed in milliseconds for deleting characters.
waitWritten: Time in milliseconds to wait after typing out a message.
waitDeleted: Time in milliseconds to wait after deleting a message.
*: Any → global attribute.