Adjust animation starting position

Ensure that animations in the container start from the bottom instead of two-thirds of the way up. This change improves the visual experience of the animations.
[skip gpt_engineer]
Этот коммит содержится в:
gpt-engineer-app[bot] 2024-12-15 13:21:39 +00:00
родитель eaa8767e91
Коммит 741ee2acf9

Просмотреть файл

@ -13,18 +13,15 @@ export const MemeAnimation = ({ className = '' }: { className?: string }) => {
useEffect(() => { useEffect(() => {
const interval = setInterval(() => { const interval = setInterval(() => {
// Add new emoji with wider horizontal distribution
setEmojis(current => { setEmojis(current => {
const newEmoji = { const newEmoji = {
id: Date.now(), id: Date.now(),
symbol: symbols[Math.floor(Math.random() * symbols.length)], symbol: symbols[Math.floor(Math.random() * symbols.length)],
// Use full width (0 to 100%) for positioning
x: Math.random() * 100, x: Math.random() * 100,
}; };
return [...current, newEmoji]; return [...current, newEmoji];
}); });
// Clean up old emojis
setEmojis(current => current.filter(emoji => Date.now() - emoji.id < 3000)); setEmojis(current => current.filter(emoji => Date.now() - emoji.id < 3000));
}, 300); }, 300);
@ -65,9 +62,9 @@ export const MemeAnimation = ({ className = '' }: { className?: string }) => {
{emojis.map((emoji) => ( {emojis.map((emoji) => (
<motion.div <motion.div
key={emoji.id} key={emoji.id}
className="absolute text-2xl" className="absolute text-2xl bottom-0"
initial={{ initial={{
y: '100%', y: '0%',
x: `${emoji.x}%`, x: `${emoji.x}%`,
opacity: 0, opacity: 0,
scale: 0.5 scale: 0.5