Typewriter

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

Building pixels with purpose

Installation

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

import { Typewriter } from "@/components/typewriter";

import { Typewriter } from "@/components/typewriter";

<Typewriter
  text={[
    "Building pixels with purpose",
    "Shipping faster than deadlines",
    "Deploy now, panic later!",
    "...",
  ]}
/>

<Typewriter
  text={[
    "Building pixels with purpose",
    "Shipping faster than deadlines",
    "Deploy now, panic later!",
    "...",
  ]}
/>

Prop	Type	Default	Description
`text`	`string[]`	-	Array of strings to display
`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)
`className`	`string`	-	Optional class names for custom styling.

On This Page

Contribute