"use client"; import { useEffect, useState } from "react"; import { motion } from "framer-motion"; import { cn } from "@/lib/utils"; export function Typewriter({ phrases, className, typingSpeed = 60, deletingSpeed = 30, pauseDuration = 1500, }: { phrases: string[]; className?: string; typingSpeed?: number; deletingSpeed?: number; pauseDuration?: number; }) { const [phraseIndex, setPhraseIndex] = useState(0); const [text, setText] = useState(""); const [deleting, setDeleting] = useState(false); useEffect(() => { const current = phrases[phraseIndex % phrases.length]; let timeout: ReturnType; if (!deleting && text === current) { timeout = setTimeout(() => setDeleting(true), pauseDuration); } else if (deleting && text === "") { setDeleting(false); setPhraseIndex((p) => p + 1); } else { timeout = setTimeout( () => { setText((t) => deleting ? current.slice(0, t.length - 1) : current.slice(0, t.length + 1) ); }, deleting ? deletingSpeed : typingSpeed ); } return () => clearTimeout(timeout); }, [text, deleting, phraseIndex, phrases, typingSpeed, deletingSpeed, pauseDuration]); return ( {text} ); } export default function Demo() { return (

Building

); }