Translating Real‑World Motion Into Design

The first time I opened an animation program’s curve editor, it looked like an EKG: spikes and smooth hills charting speed over time. I didn’t know how to control it. As a filmmaker-turned-designer, I loved making things move on screen, but those curves felt like secret code. I tugged on handles to chase a snappy bounce or a gentle ease and ended up with motions that missed the mark. Easing was supposed to make animation feel natural; mine still felt flat.

I’m a self-taught animator. My classes were late‑night YouTube tutorials, a few online courses, and a lot of trial and error. Mograph Mentor and School of Motion helped, but nothing beat opening After Effects and practicing until it looked right. Over 15 years I learned the language of keyframes and easing, yet one question lingered: why not capture real motion first and use it as the starting point?

I found a clue watching other animators. As they refine timing, many conduct the screen with their hands, as if pulling movement from the air with an invisible string. I realized I did it too. While preparing a talk for ADPList’s Product Day, I tried an experiment: I filmed myself waving a sheet of paper, then animated a ball in After Effects to match its arc and timing. The result felt unusually alive because it was grounded in a physical gesture. I used that traced motion to make a point about motion branding and the value of shared patterns. Then came the obvious thought: could this be automated? Could a short video feed a tool and return an animation curve without manual tweaking?

That idea became Motion Maestro. It started as a nights‑and‑weekends project in my home office, born of frustration and curiosity. The premise is simple: record a physical movement and translate it into a ready‑made easing curve. Instead of plotting points on a graph and guessing, perform the motion and let it drive the timing.

My first prototype used a webcam to track a brightly colored Post‑it note. Later I tried my phone’s camera and sensors for smoother data. Under the hood, the tool logs position frame by frame and fits a cubic Bézier curve that mirrors acceleration and deceleration. In plain terms, it turns the ease‑in and ease‑out your hand already knows into a format tools like Figma or After Effects can read.

Here is how it works. I record a quick swipe on my phone: slow start, faster middle, gentle stop. Motion Maestro follows a color I set at capture, locks to that object, and measures changes in speed. It then outputs the four control points of a cubic Bézier that reproduces the timing. The curve might amount to an ease‑out with a hint of overshoot, but the key is that I performed it. I can paste the curve into Figma’s custom easing editor, apply it in After Effects, or import it into Rive or Cinema 4D. The prototype feels grounded because it is. And when it needs adjustment, the curve has meaning. The fast section is where I sped up; the small dip is where I added bounce. Long term, I want tighter integration with design workflows: record a motion on your phone and watch the curve appear in your file. I am not there yet, but the approach has already changed my day‑to‑day work.

Why it matters. Mastering the graph editor is a rite of passage in animation and a source of anxiety for newcomers. Many designers lean on the default “ease in, ease out” not because it is always right but because custom curves feel opaque. Motion Maestro acts as a translator. It takes an intuitive act, a gesture, and reveals the timing behind it. For a junior designer, watching a self‑made bounce become a visible curve can be clarifying. For a veteran, it is a quick way to prototype fresh ideas or break a rut.

Teams benefit too. In product work, engineers, UX designers, and motion specialists often talk past one another. One person’s “snappier” is another person’s “too abrupt.” Anchoring the discussion in a recorded gesture puts everyone on the same page. A designer can capture a menu opening that feels right and hand the exact curve to a developer. Instead of trading adjectives, they exchange an artifact. As with color tokens or type styles, motion curves can become system tokens. Imagine a library derived from real behaviors: a gentle spring, a crisp snap, a smooth glide. Used across prototypes, code, and polish, those curves bring consistency.

Building Motion Maestro has been a rewarding project at the intersection of creativity and code. It reminded me that reframing a hard problem can make it legible. By recording my own movements, I turned a technical chore into something I could read at a glance. Now, when I open a curve editor, I see possibilities and recall the motions behind them. I hope the tool and this story encourage others to approach motion with the same curiosity. If a self‑taught animator can jury‑rig a way to make sense of cubic Bézier curves, imagine what becomes possible with a fresh perspective and the right tools. Animation exists to breathe life into design. Sometimes the first step is to move your own hand.

Vimeo

Linkedin

E hello@iamp.at