Typewriter

1"use client"
2 
3import * as React from "react"
4 
5import { cn } from "@/lib/utils"
6 
7export interface TypewriterProps extends Omit<
8  React.ComponentProps<"span">,
9  "children"
10> {
11  /** Phrases typed in order. A single phrase types once and stops. */
12  words: string[]
13  /** Milliseconds per character while typing. */
14  typingSpeed?: number
15  /** Milliseconds per character while deleting. Deletes read faster. */
16  deletingSpeed?: number
17  /** Milliseconds held on a finished phrase before it deletes. */
18  holdDelay?: number
19  /** Start over after the last phrase. */
20  loop?: boolean
21  /** Show the blinking caret. */
22  caret?: boolean
23  /** Render the first phrase in full with no typing. */
24  disabled?: boolean
25}
26 
27export function Typewriter({
28  words,
29  typingSpeed = 70,
30  deletingSpeed = 40,
31  holdDelay = 1600,
32  loop = true,
33  caret = true,
34  disabled = false,
35  className,
36  ...props
37}: TypewriterProps) {
38  const phrases = words.length > 0 ? words : [""]
39  const longest = React.useMemo(
40    () => phrases.reduce((a, b) => (a.length >= b.length ? a : b), ""),
41    [phrases]
42  )
43 
44  const [index, setIndex] = React.useState(0)
45  const [text, setText] = React.useState("")
46  const [deleting, setDeleting] = React.useState(false)
47  const [enabled, setEnabled] = React.useState(false)
48 
49  // Typing is a text change, not a motion effect, but it is still motion to
50  // anyone who asked for less of it.
51  React.useEffect(() => {
52    if (disabled) {
53      return
54    }
55    const query = window.matchMedia("(prefers-reduced-motion: reduce)")
56    setEnabled(!query.matches)
57 
58    const onChange = (event: MediaQueryListEvent) => setEnabled(!event.matches)
59    query.addEventListener("change", onChange)
60    return () => query.removeEventListener("change", onChange)
61  }, [disabled])
62 
63  React.useEffect(() => {
64    if (!enabled) {
65      return
66    }
67 
68    const current = phrases[index % phrases.length]
69    const done = text === current
70    const atLast = index === phrases.length - 1
71 
72    if (done && !deleting) {
73      if (!loop && atLast) {
74        return
75      }
76      const timer = setTimeout(() => setDeleting(true), holdDelay)
77      return () => clearTimeout(timer)
78    }
79 
80    if (deleting && text === "") {
81      setDeleting(false)
82      setIndex((previous) => (previous + 1) % phrases.length)
83      return
84    }
85 
86    const timer = setTimeout(
87      () => {
88        setText((previous) =>
89          deleting
90            ? current.slice(0, previous.length - 1)
91// … truncated