I'll create a point counter with animated badges using Framer Motion. When points are earned, a badge will slide in from the top, then move to the counter and add its value.

This component features:

1. A point counter that displays the total score
2. Three buttons to add different point values (5, 10, and 25)

3. When you click a button, a badge with the point value:

   • Slides in from the top with a slight random horizontal offset
   • Pauses briefly so you can see the value
   • Animates toward the counter
   • Fades out as it adds its value to the total

The badges are color-coded based on their point value (amber for 5, emerald for 10, purple for 25). The animation sequence uses Framer Motion's array-based animation to create a multi-step animation path.

You can click the buttons multiple times to see multiple badges animate simultaneously!

I apologize for the issue. Let me fix the animation to make it more visible and follow the exact requirements - a badge sliding from the top and then going straight to the counter.

I've fixed the animation to make it more visible and follow the exact requirements:

1. The badge now clearly slides in from the top
2. It then moves directly to the counter in a straight line
3. When it reaches the counter, it adds its value to the total
4. The counter now has a subtle "pop" animation when the value increases

The animation is more pronounced and follows a clear path from top to counter. The badges are color-coded based on their point values, and the movement is smoother with proper timing.

Try clicking the buttons again - you should now see the badges slide in from the top and move directly to the counter before adding their value to the total.