Typing Text

1"use client";
2 
3/**
4 * @author: @dorianbaffier
5 * @description: Typewriter
6 * @version: 1.0.0
7 * @date: 2025-06-26
8 * @license: MIT
9 * @website: https://kokonutui.com
10 * @github: https://github.com/kokonut-labs/kokonutui
11 */
12 
13import { motion } from "motion/react";
14import { useEffect, useRef, useState } from "react";
15 
16type TypewriterSequence = {
17  text: string;
18  deleteAfter?: boolean;
19  pauseAfter?: number;
20};
21 
22type TypewriterTitleProps = {
23  sequences?: TypewriterSequence[];
24  typingSpeed?: number;
25  startDelay?: number;
26  autoLoop?: boolean;
27  loopDelay?: number;
28  deleteSpeed?: number;
29  pauseBeforeDelete?: number;
30  naturalVariance?: boolean;
31};
32 
33const DEFAULT_SEQUENCES: TypewriterSequence[] = [
34  { text: "Typewriter", deleteAfter: true },
35  { text: "Multiple Words", deleteAfter: true },
36  { text: "Auto Loop", deleteAfter: false },
37];
38 
39export default function TypewriterTitle({
40  sequences = DEFAULT_SEQUENCES,
41  typingSpeed = 50,
42  startDelay = 200,
43  autoLoop = true,
44  loopDelay = 1000,
45  deleteSpeed = 30,
46  pauseBeforeDelete = 1000,
47  naturalVariance = true,
48}: TypewriterTitleProps) {
49  const [displayText, setDisplayText] = useState("");
50  const sequenceIndexRef = useRef(0);
51  const charIndexRef = useRef(0);
52  const isDeletingRef = useRef(false);
53  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
54 
55  // Initialize with the sequences provided
56  const sequencesRef = useRef(sequences);
57  useEffect(() => {
58    sequencesRef.current = sequences;
59  }, [sequences]);
60 
61  useEffect(() => {
62    const getTypingDelay = () => {
63      if (!naturalVariance) {
64        return typingSpeed;
65      }
66 
67      // More natural human typing pattern
68      const random = Math.random();
69 
70      // 10% chance of a longer pause (thinking/hesitation)
71      if (random < 0.1) {
72        return typingSpeed * 2;
73      }
74 
75      // 10% chance of a burst (fast typing)
76      if (random > 0.9) {
77        return typingSpeed * 0.5;
78      }
79 
80      // Standard variance (+/- 40%)
81      const variance = 0.4;
82      const min = typingSpeed * (1 - variance);
83      const max = typingSpeed * (1 + variance);
84      return Math.random() * (max - min) + min;
85    };
86 
87    const runTypewriter = () => {
88      const currentSequence = sequencesRef.current[sequenceIndexRef.current];
89      if (!currentSequence) {
90        return;
91      }
92 
93      if (isDeletingRef.current) {
94        if (charIndexRef.current > 0) {
95          charIndexRef.current -= 1;
96// … truncated