Docs New Advertise

Typewriter

Types a phrase with a human rhythm, holds it long enough to read, then backspaces or selects it away and moves on; the caret only blinks while it waits.

akatyping animation·typed text·rotating text

Install

Run this in any project set up for the shadcn CLI. It copies the Typewriter source into your components folder, so the code is yours to change.

npx shadcn@latest add https://devl.dev/r/typewriter.json

Use it

Import it and render it. Every prop has a typed default, so it works straight away, and you pass your own data when you’re ready.

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

export default function Page() {
  return <Typewriter />;
}

Built with

A free React motion component in the Text collection, written in TypeScript with Tailwind CSS on coss ui. MIT licensed.

npm: motion

Props

Read from the Typewriter source. Everything is optional unless it says required. It also accepts Omit<ComponentProps<"span">, "children">.

Prop	Type	Default
phrasesrequired	string[]	—
caretClassName	string	—
typeSpeed	number	—
deleteSpeed	number	—
wpm	number	—
erase	"backspace" \| "select"	—
loop	boolean	—
paused	boolean	—

More in Text

213

Blur Rise

Text that drifts up and comes into focus a letter or a word at a time as it scrolls into view, quick enough that nobody waits to read it.

214

Odometer

Digits that turn like a real counter: every place rolls the way the number moved, so 9 ticks over to 0 instead of spinning back, and it counts up the first time you scroll to it.

215

Flip Clock

A split-flap countdown where each changed digit's top flap falls away under gravity, darkening as it turns, and the new lower flap lands with one small rebound.

216

Marquee Text

An oversized headline that scrolls forever in alternating solid and outlined words, gliding to a halt when you hover instead of freezing mid-word.