Typewriter

Free

Types a list of phrases one character at a time, deletes them and moves on, with a blinking caret.

Next on the roadmap

Ship the demo, Polish every menu, Launch the game

Customize

Phrases

Type speed70ms

Pause1400ms

Loop

Installation

npx shadcn@latest add https://ui.mekaigames.com/r/typewriter.json

Works in any project set up with the shadcn CLI.

Install the dependency.
npm install motion
Copy the code from the Code tab into components/ui/typewriter.tsx.

Usage

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

<Typewriter
  phrases={["Ship the demo", "Polish every menu", "Launch the game"]}
  typeSpeed={70}
  pause={1400}
/>

Props

8 properties

Property	Type	Default	Description
phrases	string[]	—	The phrases to type, in order.
typeSpeed	number	70	Average milliseconds per typed character.
deleteSpeed	number	40	Milliseconds per deleted character.
pause	number	1400	Milliseconds a finished phrase stays before it is deleted.
loop	boolean	true	Start again from the first phrase after the last one.
caret	boolean	true	Show a caret after the text.
caretColor	string	"#ff784f"	Color of the caret.
className	string	—	Extra classes for the text.

Dependencies: motion