Terminal Text

1"use client";
2 
3import { useEffect, useState } from "react";
4import { motion } from "motion/react";
5import { cn } from "@/lib/utils";
6 
7const TYPE_SPEED = 55;
8const DELETE_SPEED = 28;
9const HOLD_TIME = 850;
10const SWITCH_DELAY = 120;
11 
12export const previewTexts = [
13  "build things that matter",
14  "simplicity is the ultimate sophistication",
15  "ship it. then make it better.",
16  "who let the dogs out",
17  "woff woff woff woff",
18];
19 
20interface TerminalTextProps {
21  texts?: string[];
22  prefix?: string;
23  className?: string;
24}
25 
26type TypeState = {
27  index: number;
28  visibleLength: number;
29  isDeleting: boolean;
30};
31 
32function getNextState(state: TypeState, textLength: number, totalText: number) {
33  const { index, visibleLength, isDeleting } = state;
34 
35  if (!isDeleting && visibleLength < textLength) {
36    return {
37      next: { ...state, visibleLength: visibleLength + 1 },
38      delay: TYPE_SPEED,
39    };
40  }
41  if (!isDeleting && visibleLength === textLength) {
42    return { next: { ...state, isDeleting: true }, delay: HOLD_TIME };
43  }
44  if (isDeleting && visibleLength > 0) {
45    return {
46      next: { ...state, visibleLength: visibleLength - 1 },
47      delay: DELETE_SPEED,
48    };
49  }
50  return {
51    next: {
52      index: (index + 1) % totalText,
53      visibleLength: 0,
54      isDeleting: false,
55    },
56    delay: SWITCH_DELAY,
57  };
58}
59 
60export function TerminalText({
61  texts = previewTexts,
62  prefix,
63  className = "text-emerald-600 dark:text-emerald-400",
64}: TerminalTextProps) {
65  const [state, setState] = useState<TypeState>({
66    index: 0,
67    visibleLength: 0,
68    isDeleting: false,
69  });
70 
71  const resolvedTexts = texts.length > 0 ? texts : previewTexts;
72  const text = resolvedTexts[state.index % resolvedTexts.length];
73  const visibleText = text.slice(0, state.visibleLength);
74 
75  useEffect(() => {
76    const { next, delay } = getNextState(
77      state,
78      text.length,
79      resolvedTexts.length
80    );
81    const id = setTimeout(() => setState(next), delay);
82    return () => clearTimeout(id);
83  }, [state, text, resolvedTexts.length]);
84 
85  return (
86    <motion.div
87      aria-live="polite"
88      className={cn("flex items-center font-mono tracking-[0.08em]", className)}
89    >
90      <span className="whitespace-nowrap">
91        {prefix && <span className="text-current/40">{prefix}</span>}
92        {visibleText}
93        <motion.span
94          aria-hidden="true"
95          animate={{ opacity: [1, 0, 1] }}
96          transition={{
97            duration: 0.9,
98            repeat: Infinity,
99// … truncated