On each click, a "+100 XP" label floats upward from the click position and fades out over 860ms via CSS keyframes. A running total increments in the button label. Click position is captured from the mouse event and used to place the floating element.
Create a button where clicking spawns a floating "+100 XP" label at the click position.
On click:
- Capture mouse position relative to button via e.clientX - rect.left
- Add item {id: Date.now(), x} to state array
- Remove item after 900ms via setTimeout
Each item renders as an absolutely-positioned span playing a keyframe animation:
0%: translateY(0) scale(1) opacity 1
70%: translateY(-32px) scale(1.1) opacity 0.9
100%: translateY(-52px) scale(0.8) opacity 0
Also track a running total that increments +100 per click.
Disable animation under prefers-reduced-motion.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.