52 lines
1.6 KiB
TypeScript
52 lines
1.6 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
|
|
const logoVariants = [
|
|
{ emoji: '🎨', rotation: 360, scale: 1.2 },
|
|
{ emoji: '🌈', rotation: -360, scale: 1.1 },
|
|
{ emoji: '🎯', rotation: 720, scale: 1.3 },
|
|
{ emoji: '✨', rotation: -720, scale: 1.0 },
|
|
{ emoji: '🔄', rotation: 360, scale: 1.2 },
|
|
{ emoji: '🎪', rotation: -360, scale: 1.1 },
|
|
{ emoji: '🌀', rotation: 1080, scale: 1.2 },
|
|
{ emoji: '💫', rotation: -1080, scale: 1.0 },
|
|
{ emoji: '🖨️', rotation: 360, scale: 1.2 },
|
|
{ emoji: '🧵', rotation: -360, scale: 1.1 },
|
|
{ emoji: '🎭', rotation: 720, scale: 1.2 },
|
|
{ emoji: '🎲', rotation: -720, scale: 1.3 },
|
|
{ emoji: '🔮', rotation: 360, scale: 1.1 },
|
|
{ emoji: '💎', rotation: -360, scale: 1.2 },
|
|
{ emoji: '🌟', rotation: 1440, scale: 1.0 },
|
|
];
|
|
|
|
export const AnimatedLogo: React.FC = () => {
|
|
const [currentLogo, setCurrentLogo] = useState(0);
|
|
const [isAnimating, setIsAnimating] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
setIsAnimating(true);
|
|
setTimeout(() => {
|
|
setCurrentLogo((prev) => (prev + 1) % logoVariants.length);
|
|
setIsAnimating(false);
|
|
}, 500);
|
|
}, 5000);
|
|
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
const logo = logoVariants[currentLogo];
|
|
|
|
return (
|
|
<span
|
|
className="inline-block text-4xl transition-all duration-700 ease-in-out"
|
|
style={{
|
|
transform: isAnimating
|
|
? `rotate(${logo.rotation}deg) scale(0)`
|
|
: `rotate(0deg) scale(${logo.scale})`,
|
|
opacity: isAnimating ? 0 : 1,
|
|
}}
|
|
>
|
|
{logo.emoji}
|
|
</span>
|
|
);
|
|
}; |