Nostalgia, Coupons, and a State Machine: The Swiggy Mother’s Day Story

Summary

Swiggy’s Mother’s Day campaign turned childhood nostalgia into an interactive game where users scanned virtual “mom weapons” such as a jhadu, chappal, wooden spoon, and belt to unlock coupons and cashback. The experience used Rive’s runtime animations, state machines, ViewModel properties, and backend data binding to drive scan-triggered states, reward values, and a dynamically assembled share page. Design authored visual logic inside Rive while engineering connected typed values from the React application, including strings and booleans for coupon labels and reveal transitions. A debugging issue showed that the Rive artboard needed the correct ViewModel binding and that a numeric value could not substitute for a boolean state-machine input. The team concludes that, after a learning curve, Rive reduced custom animation work and let design and engineering proceed with less blocking.

Takeaways

1. 1

   Rive state-machine transitions are typed against the inputs configured in the editor; passing a number where a boolean is expected can cause a transition to silently fail.

2. 2

   The Rive ViewModel must be linked to the artboard before runtime values can drive the animation. Values may update in React while producing no visible result if that binding is missing.

3. 3

   The implementation let designers own motion logic and visual states while engineers supplied backend data, reducing the custom animation and coordination work required for the campaign.