Google Pay Payment Animations
After you enter your UPI PIN, the bank can take one second or ten. I designed nine animations for that wait. They all start, loop and end the same way, so any of them could sit in the same app.
A concept I started on my own. Not made with or for Google.
A payment isn't instant.
After you enter your PIN, the bank takes its time. Sometimes it's one second, sometimes ten. That wait is the most nervous part of paying. Most payment apps fill it with a spinner, which looks the same at second one and second ten and has nothing to do with paying.
Every animation has three parts: a start that grows out of the PIN dots, a loop that plays for as long as the bank needs, and an end that turns into the tick.
You type the last digit
The dots come together
Waiting for the bank, however long it takes
Everything turns into the tick
The payment details come in
We remember an experience by its best moment and its last one, not the average. So the tick is built as the peak, and the receipt is a calm end.
Anything that answers in under 0.4 s feels instant. The dots start moving 0.35 s after your last digit, long before the bank replies.
Swipe the chart to see all of it →
Nine animations, one set of rules.
Before drawing anything, I fixed what every animation has in common. Those shared rules are why a kolam and a kaleidoscope can sit in the same app.
Each one is a step your money takes. I dropped the phone and a few colour combinations because they looked like clip art.
Six PIN dots are already on screen, so they become the animation. Nothing new has to appear.
The bank can answer at any moment, even halfway through a change. So the end never waits for the loop to finish. The shape rounds off into a circle, the circle fills blue, and the tick draws.
A frame from the middle of each loop. They had to look right even when nothing moves.
One spring for everything.
Every shape change, landing and pop uses the same spring from Material 3. It goes a little past where it's headed, then settles back. That small overshoot gives things weight. Using it everywhere is why nine different ideas feel like one app.
Swipe the chart to see all of it →
The shape is the loader.
Every shape is a ring of lines drawn out from its centre. To change shape, each line grows or shrinks to its new length, and the whole thing turns a quarter on the way.
Three ways to wait.
A flower opening is a calm way to say “hold on”.
We're more patient with things that look good. A calm, pretty wait feels shorter.
A payment touches many things. The grid shows them all at once.
Things that move together look like one thing. The wave makes twelve tiles feel like one change.
It tells your money's story: coin, card, bank, QR code, shield.
We feel better when we can see progress. Each object feels like a step closer to done.
Each tile waits a little longer the further it is from the top left corner. So one change rolls across the grid like a wave, instead of twelve things happening at once.
Colour that never mixes.
The simplest ideas here: just the four Google colours, moving. They say Google before you read a single word. Where two ribbons cross, a thin white gap shows which one is on top.
People expect things to work like what they already know. A spinning ring already means “loading”, so nobody has to learn it.
Rings of arcs, with one ring cycling through all four colours
Four ribbons weave together and settle into a ring
One unbroken line through a grid of dots.
UPI is Indian. Every morning, kolams are drawn at Indian doorsteps to welcome people in, with one line that never lifts. Here, that line is the payment. It weaves while the bank thinks, and at the end it pulls in to become the tick.
Google colours travel along the thread
We keep watching things that aren't finished. The line is always about to close, so your eyes stay on it instead of the clock.
At every gap between two dots, the line either crosses over or turns back.
Choose at random and the line usually breaks into separate loops. Only about 1 in 8 patterns joins up into one line, so the code keeps trying until it finds one. That happens before the animation starts.
One slice, twelve mirrors.
A kaleidoscope never looks the same twice, so the wait never feels repetitive. It works like the real thing. I draw one thin slice, then copy it twelve times around the centre, flipping every other copy.
Bright M3 shapes on a night sky
We remember the thing that stands out. A payment that opens into a kaleidoscope is hard to forget.
Small physical stories.
Little scenes that show what you paid for, built from a kit of simple blue shapes. Popcorn for a movie ticket, a bag for shopping. Each has a bit of real physics in it, and both end on the same tick.
Popcorn pops, the tub squashes, the pile bubbles
Something drops in, the cloth bounces, the tag swings
It matches the picture already in your head. You see popcorn and you know it was the movie tickets.
Try them yourself.
Pick an animation, then decide how slow the bank is today.
Even a one second answer lets the start finish first. Use Loop under the phone to keep the bank waiting, then turn it off to let it answer.
Drawn in code.
There are no video or image files here. Each animation is drawn live, frame by frame, the same way on every phone on this page.
// on every frame
kolam.draw(canvas, time, answeredAt)
// answeredAt stays empty while the bank thinks.
// Set it, and the loop turns into the tick.Made with Claude Opus 5.5.
What I know about timing, springs and colour, written down once as instructions Claude follows.
Takes an idea and builds it to that standard, straight away.
I pick the ideas, cut most of them, and keep pushing the good ones until they feel right.
Every animation here was built with Claude Opus 5.5, using a set of motion skills I wrote for it. Because the skills already knew my standards, the first versions came out close to right. I spent my time on direction and taste, not on drawing. That's how nine of them came together in about a week.
Less time drawing. More time deciding.
What went wrong first.
The first versions blended one colour into the next. Blue into yellow turned a dull green, and it stopped looking like Google.
The fix: one rule. Colours never blend.
The motion worked from the first try. But plain shapes said nothing about money, so the animation felt empty.
The fix: same motion, better things. The shapes became what a payment touches.
A kolam is one line that ends where it began. My first grids never closed into one line, however many times I tried.
The fix: I tested thousands of patterns to find which grids can close. It only uses those now.
- 01The PIN dots
Six dots are already on screen. What if they became the animation?
- 02M3 shapes
Material 3 shapes morph into each other, so they became the first loaders.
- 03Payment objects
The shapes felt empty. Coins, cards and banks felt like money.
- 04Pure colour
Blended colours went muddy. Now they never mix.
- 05Indian roots
UPI is Indian, so I looked to kolams and festivals.
- 06Real physics
Small scenes where things squash, bounce and swing.
Did it work?
This is a concept, so there are no numbers from real payments. Here is what I can show: the four goals from the start, checked one by one.
- Work for any waitThe loop has no set length. Try 1 s and 10 s in the playground.
- End at any momentTurn Loop off whenever you like. Whatever is on screen rounds into the tick.
- Feel like GoogleThis one is my call, not a measurement. I kept to four colours and Material 3 shapes, and cut what drifted.
- Share one endingAll nine do.
Looking back, one timeline, one spring and one ending are what held it together. The hardest part was choosing. I made a lot more than what you see here and cut most of it, because it either didn't feel like Google or wasn't new.