Completion deserves ceremony — but not a parade. When a pull request merges, the button transforms in 600ms: green bleeds to purple, 'Merge' cross-fades to 'Merged' with a checkmark drawing in, and 14 tiny confetti particles scatter outward then vanish. The celebration is brief enough to not interrupt workflow but present enough to mark the moment. This isn't decoration — it's a dopamine micro-dose that reinforces the ship-it behavior loop. The button then disables itself, resting in purple. The story is over.
Build a GitHub-style merge celebration micro-interaction. Design philosophy — reward completion: 1. Pre-merge button: bg #238636 (GitHub green), white text "Merge pull request", rounded-md, 14px font-weight 600. Subtle hover: brightness(1.1). 2. Click → Merge animation (600ms total): a. Button shrinks slightly (scale 0.95) for 100ms (press feedback) b. Background color transitions from green (#238636) to purple (#8957e5) over 300ms c. Text crossfades: "Merge pull request" → "Merged" with a checkmark icon sliding in from the left d. Button scales back to 1.0 with a slight overshoot (scale 1.05 → 1.0, 200ms spring) 3. Confetti burst (triggers at 300ms): - 12-16 small circles (3-5px) in purple (#8957e5), green (#238636), and white scatter outward from the button center - Each particle: random angle, random velocity (40-80px travel), opacity 1→0 over 500ms, slight gravity (translateY +10px) - Use CSS animations, not canvas — keeps it lightweight and accessible 4. Post-merge state: Button stays purple (#8957e5) with checkmark + "Merged" text. No further animation. Disabled state. 5. Border: The PR card's border briefly flashes purple (box-shadow: 0 0 0 2px #8957e5, fades out over 300ms). The celebration should feel earned, not gratuitous. One burst, then calm.