47 lines
1020 B
TypeScript
47 lines
1020 B
TypeScript
'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>
|
|
)
|
|
}
|