Typewriter Text

Typewriter effect with optional cursor and repeat loop.

Installation

Requires MotionProvider and gsap. Add the typewriter text component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/typewriter-text.json

Usage

import { TypewriterText } from "@/void/text/typewriter-text"

<TypewriterText speed={0.04} cursor repeat repeatDelay={1.5}>
  Hello, world.
</TypewriterText>

Examples

Once

Default — types once on mount.

Code

<TypewriterText cursor>Hello, world.</TypewriterText>

Repeat

`repeat` loops typing. Use `true` for infinite or a number for total plays.

Code

<TypewriterText repeat repeatDelay={1.5} cursor>
  Looping typewriter...
</TypewriterText>