Payment plans / PERSONAL EXPLORATION
A toggle with a little attitude.
A pricing interaction that makes choosing a plan feel as good as the product itself.
ANIMATION BY
Piyush KachaMY ROLE
Motion design · State machines · Interaction design
100K+
Views on X
1
Interactive Rive file
Personal
Concept project
BEHIND THE MOTION
Small interaction. Big personality.
Pricing pages are usually where the fun stops. I wanted to see what happens when a familiar monthly-to-yearly switch gets a little more character. The layout, chips, and transitions respond to the same decision, so the entire interface feels connected.
Designed around the interaction.
The hover states invite a click. The transition gives that click a clear result. I built the behaviour into a Rive state machine, so the interface responds to the user rather than running through a fixed animation.
An experiment that found its people.
This was a personal exploration, not a client commission. The post reached more than 100,000 views on X, as recorded in my project notes. More than anything, it confirmed how much people notice the small details of an interface.
For the developers: animation handoff details
| Animation | Artboard | State machine / view model | Controls / timelines |
|---|---|---|---|
| Payment plans | Advance | State Machine 1 | Monthly Plan Active Trigger, Yearly Plan Active Trigger |
UP NEXT
Granny AI