30 lines
895 B
JavaScript
30 lines
895 B
JavaScript
|
import { useState, useEffect } from 'react';
|
||
|
|
|
||
|
|
const names = ['👨🏿💼 Jesse Egbosionu', '👨🏿💻 jesseinit', '😎 jessewithit'];
|
||
|
|
|
||
|
|
export default function AnimatedName() {
|
||
|
|
const [currentIndex, setCurrentIndex] = useState(0);
|
||
|
|
const [isAnimating, setIsAnimating] = useState(false);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const interval = setInterval(() => {
|
||
|
|
setIsAnimating(true);
|
||
|
|
|
||
|
|
setTimeout(() => {
|
||
|
|
setCurrentIndex((prevIndex) => (prevIndex + 1) % names.length);
|
||
|
|
setIsAnimating(false);
|
||
|
|
}, 500); // Half of animation duration for smooth transition
|
||
|
|
}, 3000); // Change name every 3 seconds
|
||
|
|
|
||
|
|
return () => clearInterval(interval);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<span className="animated-name-wrapper">
|
||
|
|
<span className={`highlight animated-name ${isAnimating ? 'fade-out' : 'fade-in'}`}>
|
||
|
|
{names[currentIndex]}
|
||
|
|
</span>
|
||
|
|
</span>
|
||
|
|
);
|
||
|
|
}
|