Why I Made This

CSS transitions are deceptively simple. You add a transition property, pick a duration, maybe an easing — and it works. Until it doesn't feel right. The timing is slightly off, the easing makes the element look like it's fighting gravity, or the fade and the slide are out of sync in a way that reads as janky even if you can't immediately articulate why.

Fixing that usually means editing a CSS file, switching to the browser, waiting for a reload, triggering the interaction, squinting at it, and going back to edit again. Repeat fifteen times. I wanted something faster.

So I built the Motion Playground, now live under the Animation category in Mahrokh Labs. The idea is simple: tune your transition on a real component, see it animate instantly, copy the output when it feels right.

What You Can Do With It

The playground gives you controls over the CSS transition properties that actually matter for UI feel:

Transform properties — translateX, translateY, scale, and rotate, each with its own before/after value so you can define the full motion arc.
Opacity — control the start and end opacity independently from the movement, so a fade-in doesn't have to start at zero if you don't want it to.
Duration and delay — millisecond-level control. Small differences here matter more than most people expect.
Easing — a set of common curves plus a cubic-bezier option. ease-out vs ease-in-out on a modal entrance is not a subtle difference.
Component previews — you're not animating a generic box. The playground previews the transition on an actual Button, Card, Modal, Tooltip, or Toast so you can see it in a realistic context.

Every change is reflected live. No reload, no lag.

The Thing About Easing That I Keep Forgetting

Building this reminded me of something I re-learn every time I work on motion: ease-in almost never feels right for UI transitions.

ease-in starts slow and ends fast. That works for something falling or accelerating into the scene. But for most UI elements — a modal appearing, a tooltip fading in, a card expanding — it makes the element feel sluggish at the start and then aggressively snappy at the end. It reads as wrong even to people who can't name why.

ease-out (starts fast, ends slow) is what most UI motion wants. The element arrives quickly and then settles — which is how physical objects behave when they come to rest. Your eye reads it as natural.

The Motion Playground made this concrete for me in a way that reading about it never quite did. Being able to switch between curves on the same component and watch it respond immediately is a different kind of understanding.

One Decision I'm Still Not Sure About

The playground currently controls a single transition. In real interfaces, you often have compound transitions — opacity and transform animating together, sometimes with different durations or delays (staggering the fade slightly behind the slide, for example).

I debated whether to support multiple simultaneous transitions in the first version. I ended up not doing it — I wanted the tool to be immediately understandable without needing to explain its own UI first. But I'm genuinely unsure that was the right call. If you try the playground and find yourself wanting to layer a second transition on top, let me know.

How the Code Generation Works

The output is two things: the transition shorthand for your CSS rule, and a @keyframes block if the animation loops. Both are generated from state on every change.

I wrote the generator as a pure function that takes the current control state and returns a string. No template literals with conditionals scattered across components — just one function, one output, tested separately. It made the feature feel much more reliable because the only question was whether the state was right, not whether the rendering logic was correct.

The copy button just puts that string on the clipboard. Nothing clever — but clipboard access does require a user gesture, which is why the button exists rather than auto-copying on change.

Try It

The Motion Playground is at /labs/animation/motion-playground. Start with the Button component and ease-out, then switch to ease-in and back. If you feel the difference immediately, the playground is doing its job.

And if you've spent twenty minutes tweaking a transition timing in DevTools only to lose it on the next reload — this is exactly for that.