Initial commit

src/hooks/useTypingEffect.ts

@@ -0,0 +1,53 @@
+import { useState, useEffect, useRef, useCallback } from 'react'
+import { useReducedMotion } from './useReducedMotion'
+
+interface UseTypingEffectOptions {
+  text: string
+  speed?: number
+  delay?: number
+  onComplete?: () => void
+}
+
+export function useTypingEffect({ text, speed = 50, delay = 0, onComplete }: UseTypingEffectOptions) {
+  const [displayed, setDisplayed] = useState('')
+  const [started, setStarted] = useState(false)
+  const [done, setDone] = useState(false)
+  const reducedMotion = useReducedMotion()
+  const indexRef = useRef(0)
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  const start = useCallback(() => {
+    if (started) return
+    setStarted(true)
+  }, [started])
+
+  useEffect(() => {
+    if (!started) return
+
+    if (reducedMotion) {
+      setDisplayed(text)
+      setDone(true)
+      onComplete?.()
+      return
+    }
+
+    const type = () => {
+      if (indexRef.current < text.length) {
+        setDisplayed(text.slice(0, indexRef.current + 1))
+        indexRef.current++
+        timeoutRef.current = setTimeout(type, speed)
+      } else {
+        setDone(true)
+        onComplete?.()
+      }
+    }
+
+    timeoutRef.current = setTimeout(type, delay)
+
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current)
+    }
+  }, [started, text, speed, delay, reducedMotion, onComplete])
+
+  return { displayed, done, start }
+}