PROBLEM:
E-commerce flows often feel disconnected; when users tap "Add to cart", there’s little to no visual confirmation. This uncertainty might lead to duplicate additions and makes the flow feel less trustworthy

GOAL:
Provide a clear and delightful visual confirmation so users instantly recognize that the action was successful

SOLLUTION:
On hover, the cart icon changes to a plus icon with an intensified drop shadow. On tap, the button label dissolves into colourful balls that follow a curved path into the cart icon, which moves to collect them, then slides out and is replaced by a compact ‘Added’ confirmation with a checkmark. The entire animation is physics-based for a natural feel.

TECHNICAL NOTES:

• Built with Rive State Machines to manage interactive states and transitions.

• Uses hover and click triggers to control the animation.

• Fully vector-based, lightweight animation for high-performance rendering.

• Exported as a .riv file, ready for direct integration on mobile and web platforms.