# Typewriter

- Page: <https://kznlabs.github.io/labsUI/components/typewriter>

## Typewriter (`typewriter`, component)

Types out text character-by-character with optional phrase cycling and pulsing cursor. Full copy stays in the DOM for SEO.

- Install: `npx @kznlabs/labsui add typewriter`
- Docs: <https://kznlabs.github.io/labsUI/components/typewriter>
- Brings: platform, utils
- npm: clsx@^2.1.1, motion@14.7.1, tailwind-merge@^3.7.0

### API

- `<Typewriter>`: Typewriter effect for headers, quotes, and hero text. Full text stays in the DOM for SEO.
  - `text: string | readonly string[]`: Text to type, or an array of phrases to cycle through.
  - `cursor?: boolean` = `true`: Whether to show a blinking cursor (default: true).
  - `cursorChar?: string` = `"|"`: Custom character for the cursor (default: "|").
  - `cursorClassName?: string`: Classes for the blinking cursor.
  - `delay?: number` = `0`: Milliseconds to wait before starting typing (default: 0).
  - `deleteSpeed?: number` = `24`: Milliseconds per character while deleting (default: 24).
  - `loop?: boolean` = `true`: Whether to loop through phrases when text is an array (default: true).
  - `onComplete?: () => void`: Called when the text is fully typed.
  - `pauseDuration?: number` = `2000`: Milliseconds to pause once a phrase is fully typed (default: 2000).
  - `speed?: number` = `40`: Milliseconds per character while typing (default: 40).

### Usage

```tsx
<Typewriter text={["Clean details.", "Delightful springs."]} speed={40} />
```

### Example: headline.tsx

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

export function Headline() {
  return (
    <h2>
      Built for{" "}
      <Typewriter
        text={["clean details.", "accessible navigation.", "delightful springs."]}
        speed={40}
      />
    </h2>
  );
}
```