Typewriter

1"use client"
2 
3import { ElementType, useEffect, useState } from "react"
4import { motion, Variants } from "motion/react"
5 
6import { cn } from "@/lib/utils"
7 
8interface TypewriterProps {
9  /**
10   * Text or array of texts to type out
11   */
12  text: string | string[]
13 
14  /**
15   * HTML Tag to render the component as
16   * @default div
17   */
18  as?: ElementType
19 
20  /**
21   * Speed of typing in milliseconds
22   * @default 50
23   */
24  speed?: number
25 
26  /**
27   * Initial delay before typing starts
28   * @default 0
29   */
30  initialDelay?: number
31 
32  /**
33   * Time to wait between typing and deleting
34   * @default 2000
35   */
36  waitTime?: number
37 
38  /**
39   * Speed of deleting characters
40   * @default 30
41   */
42  deleteSpeed?: number
43 
44  /**
45   * Whether to loop through texts array
46   * @default true
47   */
48  loop?: boolean
49 
50  /**
51   * Optional class name for styling
52   */
53  className?: string
54 
55  /**
56   * Whether to show the cursor
57   * @default true
58   */
59  showCursor?: boolean
60 
61  /**
62   * Hide cursor while typing
63   * @default false
64   */
65  hideCursorOnType?: boolean
66 
67  /**
68   * Character or React node to use as cursor
69   * @default "|"
70   */
71  cursorChar?: string | React.ReactNode
72 
73  /**
74   * Animation variants for cursor
75   */
76  cursorAnimationVariants?: {
77    initial: Variants["initial"]
78    animate: Variants["animate"]
79  }
80 
81  /**
82   * Optional class name for cursor styling
83   */
84  cursorClassName?: string
85}
86 
87const Typewriter = ({
88  text,
89  as: Tag = "div",
90  speed = 50,
91  initialDelay = 0,
92  waitTime = 2000,
93  deleteSpeed = 30,
94  loop = true,
95  className,
96  showCursor = true,
97  hideCursorOnType = false,
98  cursorChar = "|",
99  cursorClassName = "ml-1",
100  cursorAnimationVariants = {
101    initial: { opacity: 0 },
102    animate: {
103      opacity: 1,
104      transition: {
105        duration: 0.01,
106        repeat: Infinity,
107        repeatDelay: 0.4,
108        repeatType: "reverse",
109      },
110    },
111  },
112  ...props
113}: TypewriterProps & React.HTMLAttributes<HTMLElement>) => {
114  const [displayText, setDisplayText] = useState("")
115  const [currentIndex, setCurrentIndex] = useState(0)
116  const [isDeleting, setIsDeleting] = useState(false)
117  const [currentTextIndex, setCurrentTextIndex] = useState(0)
118 
119  const texts = Array.isArray(text) ? text : [text]
120 
121  useEffect(() => {
122    let timeout: NodeJS.Timeout
123 
124    const currentText = texts[currentTextIndex]
125 
126    const startTyping = () => {
127      if (isDeleting) {
128        if (displayText === "") {
129          setIsDeleting(false)
130// … truncated