Damn, I like this website!

src/components/ui/typing-animation.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { ny } from '@/lib/utils'
+
+interface TypingAnimationProps {
+   text: string
+   duration?: number
+   className?: string
+}
+
+export default function TypingAnimation({
+   text,
+   duration = 200,
+   className,
+}: TypingAnimationProps) {
+   const [displayedText, setDisplayedText] = useState<string>('')
+   const [i, setI] = useState<number>(0)
+
+   useEffect(() => {
+      const typingEffect = setInterval(() => {
+         if (i < text.length) {
+            setDisplayedText(text.substring(0, i + 1))
+            setI(i + 1)
+         }
+         else {
+            clearInterval(typingEffect)
+         }
+      }, duration)
+
+      return () => {
+         clearInterval(typingEffect)
+      }
+   }, [duration, i])
+
+   return (
+      <h1
+         className={ny(
+            'font-display text-center text-4xl font-bold leading-[5rem] tracking-[-0.02em] drop-shadow-sm',
+            className,
+         )}
+      >
+         {displayedText || text}
+      </h1>
+   )
+}