Typewriter

A typewriter component that cycles through text with a synced flashing highlight animation.

Installation

pnpm dlx shadcn@latest add https://atlasui.dev/r/typewriter-html.json

Define a <p> tag with class typewriter in your HTML file.

<p class="typewriter"></p>

Define an array of strings in your script.js file.

const textArray = [
  "Building pixels with purpose",
  "Shipping faster than deadlines",
  "Deploy now, panic later!",
  "...",
];

Config	Type	Default	Description
`letterDelay`	`number`	`0.025`	Delay between each letter (in seconds)
`boxFadeDuration`	`number`	`0.125`	Duration of the box fade (in seconds)
`textFadeOutDuration`	`number`	`0.25`	Duration of the text fade out (in seconds)
`delayBetween`	`number`	`5500`	Delay between each text fade out (in ms)