EffectsAnimated
Typewriter
Text that types itself out, cycling through phrases.
Typewriter types a phrase with a signal-colored block caret, holds, deletes and moves to the next (GSAP TextPlugin). It starts when it scrolls into view, and the first phrase is server-rendered for search engines.
Preview
Ship dashboards.
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/typewriter.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/typewriter.
Builds on: motion
Usage
import { Typewriter } from "@/components/ui/typewriter";
<Typewriter text={["dashboards.", "landing pages."]} />Motion
How it moves
A GSAP TextPlugin timeline types, holds and deletes each phrase.
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
Typewriter
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | string[] | — | Phrase(s) to type. |
| speed | number | 28 | Characters per second. |
| hold | number | 1.6 | Seconds before deleting. |
| loop | boolean | true | Cycle forever. |
| cursor | boolean | true | Block caret. |
Accessibility
- The first phrase is real text; the caret is aria-hidden.
- With reduced motion or --cl-motion: 0 the effect stays still and the content remains fully usable.
FAQ
Also searched as: typewriter effect react · typing animation · typed text · text typing effect · typewriter text