Blink is an investment app built to make investing feel light instead of heavy.
Their referral screen was the one place that promise disappeared. Invite a friend, get a few dollars, tap OK, done.
So instead of handing users the reward, we made them break it out of a piñata.
Shai Lanir designed the piñata with attitude. Not cute, not friendly, a little smug. The kind of character you actually want to hit. The design arrived complete from Figma, and I came in to build the flow, the timing, and the personality that only exists in motion.
The question was how to make three taps feel like a story.
A linear animation has a timeline. This has a user, and the user decides when the next thing happens. Once you stop building a sequence and start building a state machine, the work becomes about what each state communicates on its own, and what survives an unpredictable gap between one tap and the next.
Everything shipped as Lottie inside a React interface. No sound, so every beat had to read visually.
A white swipe, stars, a violent pendulum swing. The circles at the edges of the screen shift too, so the impact doesn’t stop at the piñata. It travels through the whole frame.
Those circles were the detail I pushed for. Because the experience is responsive, they couldn’t live inside the main animation. They were exported as a separate Lottie and handled on their own. More work for something most users will never consciously notice, and the reason the hit lands instead of just playing.
Then the speech bubble: “That didn’t hurt. Is that all you’ve got?”
The contrast between the violence of the hit and the indifference of the reaction did all the work. That gap only exists in timing.
The recoil is fast, because a slow hit reads as weak. The reaction after it is slower, because that is where the character lives and where the user reads the line.
State two takes a button off her eye and changes her tone: “Okay, that hurt.” State three breaks her open. Confetti, and the reward is revealed underneath.
The prize never changed. What changed is that you had to break something to get it.
Credits:
Design & Creative Direction: Shai Lanir
Animation Direction & Animation: Guy Nativ
Client: Blink
This website uses cookies to provide the smoothest possible user experience. Without these cookies, the website will not function properly, and your experience of our website will be diminished. Please accept cookies to continue browsing.
