Reduced motion

Some people set their system to ask for reduced motion. Large movement, zooms and parallax can make them feel dizzy or sick.

Motion Studio gives each animation a reduced motion version: what those users see instead. You can preview it, edit it on the timeline, or let Studio adapt it for you in one step.

Reduced motion mode

Press the reduced motion button in the header to turn on reduced motion mode.

While it's on:

• The page plays as if your system asks for reduced motion. window.matchMedia("(prefers-reduced-motion: reduce)") and @media (prefers-reduced-motion) CSS rules both follow the button.
• The timeline shows Editing reduced motion. Every edit, from you or from chat, changes only the reduced motion version. The full motion animation stays as it is.
• The selected animation replays, so you can see the reduced motion version straight away.

Press the button again, or close the Editing reduced motion indicator, to go back to full motion.

When your system already asks for reduced motion, Studio starts in reduced motion mode and tells you so. Studio remembers the mode for the rest of the browser session. When the panel is closed, the page follows your real system setting again.

Studio's own panel animations always follow your real system setting, not the mode.

Edit a reduced motion version

In reduced motion mode, edit the timeline as normal. Drag tracks, change keyframes and easing, or prompt Ultramotion. The first edit creates the reduced motion version. Until then, the track plays its full motion animation for everyone.

A track whose reduced motion version differs from full motion shows the reduced motion icon. Hover it to see what differs.

Right-click a track, or one of its values, for more options:

Reduced motion versions are available for single animations and components. Sequences and Vue components can't have one yet.

Adapt for reduced motion

In reduced motion mode, Adapt for reduced motion leads the chat suggestions when the selected animation has no reduced motion version yet. Press it to give every track a reduced motion version in one step.

It follows a few simple rules:

• Entrances start at their end values, and only fade in. A scale up from 0.5, or a slide in from off screen, never shows.
• Exits fade out where they are.
• Other movement, such as hover, press and state changes, runs with no motion. The element goes straight to its end values.
• Loops that repeat forever, or faster than three times each second, run with no motion, whatever they animate.
• Tracks that are already safe, such as an opacity or colour change, stay as they are.

Fades last between 0.15 and 0.3 seconds. Delays and staggers stay as they are.

Movement here means position, size, transforms, masks, clip paths, line drawing and other values that change an element's size or shape.

Most animations adapt instantly with no language model, so the chat shows Instant. When Studio can't classify a track, Ultramotion asks Luna to adapt the timeline with the same rules. Studio then checks the reply, and stops any motion the reply left in.

As with any edit, check the result in the preview, then Apply.

Reduced motion warning

The reduced motion button turns yellow when the selected animation needs attention:

• In full motion mode, it moves an element on screen, or loops faster than three times each second, and has no reduced motion version.
• In either mode, its reduced motion version still moves, loops or flashes. For example, after you prompt "add more bounce" in reduced motion mode.

Hover the button to see why. To fix it, turn on reduced motion mode, then use Adapt for reduced motion or edit the animation.

The warning is advice only. Nothing is blocked. An animation that Motion already reduces, through the reduceMotion option or <MotionConfig reducedMotion="user">, doesn't show it for position, size and transforms.

In your code

Code stays the source of truth. On Apply, Studio writes the reduced motion version as a condition on the animation's own keyframes, options or props.

In JavaScript, it checks matchMedia:

animate(
  ".box",
  window.matchMedia("(prefers-reduced-motion: reduce)").matches
    ? { opacity: [0, 1] }
    : { scale: [0.5, 1], opacity: [0, 1] },
  { duration: 1 }
)

In React, it uses useReducedMotion:

export function Card() {
  const shouldReduceMotion = useReducedMotion()

  return (
    <motion.div
      animate={shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }}
    />
  )
}

Studio also reads conditions like these that you wrote yourself, so existing reduced motion code shows up as a reduced motion version. It reuses a useReducedMotion() result already in your component rather than adding a second one.

An animation guarded by the check, such as if (shouldReduceMotion) animate(...), runs only for reduced motion. An animation guarded by if (!shouldReduceMotion) is hidden in reduced motion mode.