Your AI editor, now fluent in Motion. Introducing Motion Studio Codex. Allow your editor to access the full examples vault to scaffold complex animations or refine existing UI with official patterns. All without leaving your editor.

I have been working on a new design section for my website, giving me a way to practice my animation skills as suggested by @emilkowalski in his https://t.co/77svid9Jg6 course. This is the design viewer, allowing you to change themes and reload the animation. Still a work in

Created a Magnetic Grid with @motiondotdev.

Vertical Image Slider /> made with @motiondotdev

I'm not sure what I'm doing with this Motion+ profile feature but I do know that I keep making it. https://t.co/KhCtIoMOPE

OTP Input can be interesting, too Built with @motiondotdev

The most underrated hook in Motion It makes the animation run only when the user is on the page, and if they switch to another tab, the animation stops and starts again when they come back Super simple and useful, but I don't think many people know about this @motiondotdev

Ofc made with @motiondotdev

The kind of interaction that makes you scroll back and forth just for fun. → https://t.co/dO5Qj5lOFX

Motion Studio 5.0 gives your LLM access to all your saved transitions. This release also unifies the free and Motion+ MCPs, so the install instructions have been simplified too: https://t.co/aYN03Q8mBV

exploring animations on a file tree component with @motiondotdev demo → https://t.co/WFel6tkv9W

These are all saved to the cloud too, so they'll appear in all your editors where you have Motion Studio installed. They'll also (optionally) appear on your public Motion+ profile page, where other members can add them to their own collection.

Check out Motion Studio:

🚀 You can now save your favourite bezier easing curves, directly in your code editor. Tweak your Motion or CSS curve, preview, then save. Optionally give it a name, then with bulk editing apply it to multiple animations at once.

Save transition and bulk editing WIP

Motion Studio 4.2 introduces support for editing generic cubicBezier() easing functions, alongside existing support for CSS and Motion syntax. This means it can now also edit Anime.js animations, or wherever you use cubicBezier()

hold to submit button interaction using @motiondotdev

Some bezier easing editors do some of these things. None do all of them. Get them now with Motion+ BezierCurveEditor component: https://t.co/P8Jp04Z9K0 Extension:

But more importantly are the keyboard and touch inputs. Tab to a control point and use arrow keys to edit the curve in 0.1 increments (or hold shift for fine-grained edits). Touch-friendly hitboxes that never overlap.

The new BezierCurveEditor component is fully customisable, with props to style everything from control point radius and path color. There's also littlebig details like the reset control points, or the way handles always maintain their distance to the initial drag position.

This is the most accessible bezier easing editor ever made. Edit your CSS and Motion easings directly inside your favourite code editor with the Motion Studio Extension. Or build your own experience with the Motion Studio SDK.