Micro-interactions
Motion that explains the interface.
Product motion that explains the interface — where the screen came from, what changed and what just worked.
- Problem
- Motion made screen by screen turns into noise — every designer picks a curve and the app feels built by different people.
- What I did
- I defined duration and easing as tokens, logged every pattern in a Motion Ledger and animated the key interactions of the Braip App and the design system from them.
- Outcome
- A motion vocabulary reused across screens, components and launch pieces, from the Figma keyframe to the final video.
Counting balance
The amount climbs to the real number and the card follows.
Sale detail
The screen leaves the list and opens the order in one gesture.
Withdraw
The bank account slides up on the standard overlay curve.
Biometrics
The padlock turns into Face ID before the home.
Light / Dark token
Swapping the primitive changes the whole theme.
Exploded home
The home's layers pull apart to show the system.
Full processContext, decisions and evidence, for those who want the detail.
Method
Motion enters the system as a token, not a per-screen tweak: duration, easing and distance are named, and every new pattern is logged in a Motion Ledger before it's reused. When a sheet slides up in the Braip App, it uses the same curve as every other one.
- Figma Motion and keyframes for the interaction inside the prototype.
- HyperFrames for launch pieces — deterministic video, rendered frame by frame.
- Code with the same token numbers, so prototype motion ships unchanged.
Pieces
The pieces above come from Braip App v2 and the Braip design system. Each one answers an interface question: where the screen came from, what changed, what just worked.
Outcomes are qualitative: I'm not cleared to publish these projects' metrics.
Next →SOS Beleza AbsolutaA style guide, stress-tested.