diff --git a/src/components/game/animations/MemeAnimation.tsx b/src/components/game/animations/MemeAnimation.tsx index a5d5913..50984c3 100644 --- a/src/components/game/animations/MemeAnimation.tsx +++ b/src/components/game/animations/MemeAnimation.tsx @@ -13,13 +13,13 @@ export const MemeAnimation = ({ className = '' }: { className?: string }) => { useEffect(() => { const interval = setInterval(() => { - // Add new emoji with better horizontal distribution + // Add new emoji with wider horizontal distribution setEmojis(current => { const newEmoji = { id: Date.now(), symbol: symbols[Math.floor(Math.random() * symbols.length)], - // Spread more widely across the container width (from 5% to 95%) - x: Math.random() * 90 + 5, + // Use full width (0 to 100%) for positioning + x: Math.random() * 100, }; return [...current, newEmoji]; }); @@ -34,7 +34,7 @@ export const MemeAnimation = ({ className = '' }: { className?: string }) => { return (
{/* Background network effect */} -
+
{[...Array(20)].map((_, i) => (
{ 🌟 - {/* Floating emojis */} - - {emojis.map((emoji) => ( - + + {emojis.map((emoji) => ( + - {emoji.symbol} - - ))} - + ease: "easeOut", + opacity: { + duration: 3, + times: [0, 0.1, 0.8, 1] + }, + scale: { + duration: 3, + times: [0, 0.1, 0.8, 1] + } + }} + > + {emoji.symbol} + + ))} + +
); }; \ No newline at end of file