diff --git a/src/components/game/animations/MemeAnimation.tsx b/src/components/game/animations/MemeAnimation.tsx index 1dfd2d7..76b9f2b 100644 --- a/src/components/game/animations/MemeAnimation.tsx +++ b/src/components/game/animations/MemeAnimation.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { motion } from 'framer-motion'; +import { motion, AnimatePresence } from 'framer-motion'; interface MemeSymbol { id: number; @@ -54,28 +54,20 @@ export const MemeAnimation = ({ className = '' }: { className?: string }) => { {/* Meme symbols with viral spread effect */} - {memeSymbols.map((meme) => ( - + {memeSymbols.map((meme) => ( + { `${meme.y + (Math.random() * 40 - 20)}%`, `${meme.y + (Math.random() * 60 - 30)}%` ], - transition: { - delay: meme.delay + 0.3, - duration: 2, - repeat: Infinity, - repeatType: "reverse", - ease: "easeInOut" - } - } - ]} - > - {meme.symbol} - - {/* Echo effect for viral spread visualization */} - {meme.symbol} + + {/* Echo effect for viral spread visualization */} + + {meme.symbol} + - - ))} + ))} + {/* Floating engagement indicators */} {[...Array(5)].map((_, i) => (