Portfolio for Nubank · Senior Motion Designer · São Paulo
I am Izaias Cavalcanti, a product designer and design engineer with 25+ years where design and engineering meet. I design motion as a system, write it as tokens and code, and ship it with the people who build the product. My research asks why people finish a task and still cannot say what happened. Good motion is one of the answers.
01 · Motion language
They come from the motion specification of my portfolio site and are short on purpose: when a decision is unclear, a principle decides it, and a reviewer can point at the one that was broken.
Motion shows where something came from, what replaced it, or what state it is in now. If an animation can be removed without losing information, it is removed.
Text is legible on the first paint and the main heading never animates. Nothing moves while it is being read.
Interface chrome uses curves whose control points stay at or below 1, so overshoot cannot be written. A product may speak its own physics only inside its own frame.
A response starts in the same frame as the input and is visible within 100 ms. Every animation is interruptible and never blocks the next input.
Reduced motion, keyboard, screen readers, seven languages and a mid range Android phone receive the same information, through alternatives designed per component.
02 · Lab · Try the system
These are the four curves from Compresso, the open source image engine I design and build, each paired here with one of its durations. This page itself runs on them. Play them, switch on reduced motion, or try to sneak a bouncy curve past the rule.
Full motion. Each dot travels its rail on its own curve and duration.
Press Check it.
The last row's delay, computed here as you drag. Compresso caps it so a long queue never animates for seconds.
03 · Work · Compresso
Compresso compresses, resizes and converts photos inside the browser and never returns a bigger file. The engine is open source under MIT, 3.6 KB gzipped, with zero dependencies, and the app is in early access. Its motion is defined once in tokens.css and mirrored in motion.ts, so styles and anything orchestrated in script obey the same system.
| Token | Value | Job |
|---|---|---|
| ease.standard | 0.32, 0.72, 0, 1 | Responses, sheets, colour |
| ease.entrance | 0.16, 1, 0.30, 1 | Arriving and settling |
| ease.exit | 0.40, 0, 1, 1 | Leaving |
| ease.glide | 0.65, 0, 0.35, 1 | Travel with a visible start and end |
| dur.micro | 120 ms | Hover, focus, colour |
| dur.standard | 240 ms | Sheets, popovers, toasts |
| dur.entrance | 360 ms | Content settling into place |
| dur.ceremony | 520 ms | One hairline, one ring, once |
| stagger | 24 ms, max 8 | Rows in a queue |
One storyboard, seven languages. All seven cuts run exactly the same 13 seconds, so the motion is identical whether the words run long in German or short in Chinese.
The mark is the mechanism. Two plates close over the photo and the size swaps on the cut, so the film shows the product's one promise in a single gesture.
The same press, cut for a store listing: the logo resolves out of the gesture the viewer just watched, so the brand reads as a consequence of the motion.
Vertical films at 60 fps, mastered at 2160 × 3840 and shown here at a lighter size.
04 · Work · Lessons I paid for
A series of eight voiceless shorts about what building products taught me. Each film is 16 bars at 100 BPM: 38.4 seconds, 2,304 frames at 60 fps. Every frame is drawn in code in headless Chromium from type and shapes in the repository, so any frame renders on its own and the same frame always renders the same.
Episode 001, version 4: every automatic gate passes. Provenance sign off and the composer's final mix are still open, so it is shown here as a work in progress.
Not shown: the gates for copy rules, fonts, loudness and the delivered files.
05 · Work · Volta
Volta is a pre launch product for Brazilian condos: a neighbour already going to the bakery carries your order on the same trip, arranged over WhatsApp. Payment by Pix is held until delivery and released only when the neighbour confirms a four digit code at the door. The motion has one job: make each step of that handoff visible, so nobody has to trust a screen that just says done.
06 · At scale
Motion at a company the size of Nubank is a design system problem and a people problem. These are the places I have done both.
Visa, via Hyperativa · 2020 to 2021
As UX Designer on the Global Authentication Redesign I prototyped and standardized one language for authentication across 15 regions, localized for each region's compliance rules, so implementation teams shipped 3x faster.
Netlex · 2021 to 2026
As Lead Product Designer for enterprise contract lifecycle management, I designed the Workflow Designer. Its usage grew 300% in six months, audits got 70% faster, and the product reached 100 clients in year one.
Netlex · leadership
I grew the design team from 2 to 10 designers and set the contribution standards for the shared component library in Storybook, the place where craft becomes something a whole team can repeat.
07 · Measuring motion
I wrote From Cognitive Load to Cognitive Distance, a book in 13 chapters on why people complete a task and still cannot explain it, with a practical evaluation framework. With it comes the Cognitive Distance Index, a score from 0 to 100 across four dimensions of understanding. The paper is in peer review at Information Systems (Elsevier).
That is how I would tie motion to outcomes: test whether people can say what changed after a transition, not only whether they finished the task, and read it next to adoption and retention, the way the Workflow Designer was judged at Netlex.
08 · How I work
I use Claude Code and Cursor every day, and every change is reviewed. Automated gates like the ones above are how I keep AI assisted work honest as it scales.
Studied Human Computer Interaction and Digital Accessibility at the University of São Paulo (USP). Portuguese native, English fluent, Spanish conversational.