Motion.Production-grade
animation library
for the web.

Added

• Reduced motion mode. A new switch in the Studio panel makes CSS, matchMedia() and useReducedMotion() act as if your system asks for reduced motion. While the panel is open, the page follows the switch, even when your system setting is different. The Studio panel still follows your real setting.
• Edit a reduced motion version of a single animation or a component. With reduced motion mode on, your edits change only what users who ask for reduced motion see. The full motion animation stays as it is. Sequences, scroll and value animations, and Vue components do not have reduced motion versions yet.
• Edit existing useReducedMotion() and matchMedia("(prefers-reduced-motion: reduce)") conditions. Studio reads them as reduced motion versions, and Apply writes your edits into the condition that is already there.
• Disable or enable a track in full motion mode with "Disable animation" and "Enable animation" in its right-click menu. A disabled track goes straight to its end state with no motion, and its row shows at half opacity.
• In reduced motion mode, "Remove track" and "Delete animation" turn off only the reduced motion version. The full motion animation stays. "Delete animation" removes an animation that runs only for reduced motion. On a sequence or a Vue component, both refuse and change nothing.
• Copy a reduced motion version into the full motion animation with "Apply to base animation" in the right-click menu. "Reset override" removes the reduced motion version.
• Create reduced motion versions in one step. In reduced motion mode, when the selection has no reduced motion versions yet, the first chat suggestion, "Adapt for reduced motion", converts every animation in it. The other suggestions in reduced motion mode only remove or shorten motion. Entrances and exits become a short opacity fade (0.3 seconds or less), and an entrance still ends where the full motion animation leaves it. Other movement, such as a hover or a loop, turns off. Opacity, colour, filter and shadow changes stay, and so do delays and staggers. The result arrives as one chat reply, so one undo reverts it and Apply writes the code. On a component, it converts the selected pose. Sequences, scroll and value animations, and Vue components stay as they are.
• Use "Add animation" in reduced motion mode to make an animation that runs only for reduced motion.
• With reduced motion mode on, ask Ultramotion or your coding agent for "no motion when reduced". In reduced motion mode, chat edits change only the reduced motion version. With reduced motion mode off, ask it to turn an animation off or on.
• See a notice once per session when Studio starts in reduced motion mode because your system asks for reduced motion.

Improved

• Update the Studio panel to React 19.3.0.
• Edit each branch of a condition such as open ? { opacity: 1 } : { scale: 0 }, even when the branches animate different properties.

Fixed

• Fix a crash that blanked the page when a zero-duration animate() call ran again while the panel was open.