Motion Lab

Motion Lab screenshots

A small tool that made cross-platform transitions easier to align.

Who this might help

If you’re a product / UX&UI designer in a small team, you’ve probably faced this: customize iOS & Android transition animations fast, align with stakeholders, and still deliver something engineers can implement with confidence. That’s why I built Motion Lab.

Background Recently I received an urgent task: improve and customize transitions across both iOS and Android. The hardest part wasn’t only understanding motion — it was making sure everyone could see it clearly, discuss it efficiently, align on a final version, and commit.

What made it hard

1. Motion takes practice, not just reading My transition experience mostly came from system docs, Figma prototypes, and quick demos via Claude Code. But motion intuition grows through repeated building, tweaking, and comparing — and that always takes time.
2. iOS: motion lives in code, hard to communicate visually Many iOS transitions are driven by SwiftUI. Even if you can read the implementation, it’s hard to “simulate” the motion and bring non-engineers into the discussion.
3. Android: great defaults, but customization can still be tricky Material 3 transitions are high quality, but the workflow often assumes “use as-is.” Fine-grained tuning and parameter-level alignment can still be challenging.

What I built: Motion Lab A lightweight cross-platform motion tool focused on three things: Visualize — everyone sees the same motion, no guesswork Customize — adjust key properties safely without touching code Deliver — export clear parameters engineers can map to implementation

How it’s structured Preset: baseline transition template (duration, easing, delay, offset…) Combo / Pattern: compose presets into more complex behaviors Properties: keep the key knobs adjustable for fast iteration Focused on 5 core use cases Instead of building a “motion encyclopedia,” I focused on 5 high-impact transition scenarios. Each supports presets + combos/patterns + adjustable properties — making it easier to preview variations, align stakeholders, and hand off a reproducible spec.

Shipping & iteration Built with Claude Code + Git + Vercel, iterated multiple times. Huge thanks to Liang for remote support to get deployment fully running — also my first successfully deployed project of the year.

What I hope this enables My goal is to make transitions less like “implementation hidden in code,” and more like a shared design object — something everyone can understand, adjust, align on, and ship. Motion Lab is still evolving, and so is my motion intuition. Feedback is always welcome.