Types a phrase, holds it, then deletes only what differs before typing the next one. A shared opening stays on screen and is dimmed while the rest is erased.
npx shadcn@latest add https://hyperblur.dev/r/typewriter-swap.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/typewriter-swap.tsx.
import { TypewriterSwap } from "@/components/hyperblur/typewriter-swap"
<TypewriterSwap phrases={["invoices from March", "invoices from Acme", "invoices overdue"]} />| Prop | Type | Default | Description |
|---|---|---|---|
| phrases | string[] | required | Phrases to cycle through. Phrases that start the same way keep that start when swapping. |
| typeSpeed | number | 62 | Average milliseconds per typed letter. |
| deleteSpeed | number | 30 | Milliseconds per deleted letter. |
| hold | number | 1700 | Milliseconds a finished phrase stays before it is swapped. |
| loop | boolean | true | Return to the first phrase after the last. When false it stops on the last phrase. |
| accent | string | "#7fb3ff" | Caret color. |