From ef09781b4221c6066eea59aabea01ba7b57ab838 Mon Sep 17 00:00:00 2001
From: Robert Penner <robertpenner@microsoft.com>
Date: Thu, 18 Dec 2025 22:32:52 +0000
Subject: [PATCH 01/23] refactor(motion, Slide): rename fromX/toX params to
 outX/inX

---
 .../library/src/atoms/slide-atom.test.ts      | 54 +++++++++----------
 .../library/src/atoms/slide-atom.ts           | 26 ++++-----
 .../library/src/components/Slide/Slide.ts     | 26 ++++-----
 .../src/components/Slide/slide-types.ts       |  8 +--
 .../src/Slide/SlideCardsDemo.stories.tsx      | 49 ++++++++++-------
 .../src/Slide/SlideDefault.stories.tsx        |  2 +-
 .../src/Slide/SlideDirections.stories.tsx     | 22 ++++----
 7 files changed, 99 insertions(+), 88 deletions(-)

diff --git a/packages/react-components/react-motion-components-preview/library/src/atoms/slide-atom.test.ts b/packages/react-components/react-motion-components-preview/library/src/atoms/slide-atom.test.ts
index 1ecd8d28a055f..d182dd37b7d1a 100644
--- a/packages/react-components/react-motion-components-preview/library/src/atoms/slide-atom.test.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/atoms/slide-atom.test.ts
@@ -40,25 +40,25 @@ describe('slideAtom', () => {
     expect(exitAtom.keyframes).toEqual([{ translate: '0px 0px' }, { translate: '0px 0px' }]);
   });
 
-  it('applies custom fromX and fromY values', () => {
+  it('applies custom outX and outY values', () => {
     const atom = slideAtom({
       direction: 'enter',
       duration: 300,
-      fromX: '100px',
-      fromY: '-50px',
+      outX: '100px',
+      outY: '-50px',
     });
 
     expect(atom.keyframes).toEqual([{ translate: '100px -50px' }, { translate: '0px 0px' }]);
   });
 
-  it('applies custom toX and toY values', () => {
+  it('applies custom inX and inY values', () => {
     const atom = slideAtom({
       direction: 'enter',
       duration: 300,
-      fromX: '100px',
-      fromY: '-50px',
-      toX: '20px',
-      toY: '10px',
+      outX: '100px',
+      outY: '-50px',
+      inX: '20px',
+      inY: '10px',
     });
 
     expect(atom.keyframes).toEqual([{ translate: '100px -50px' }, { translate: '20px 10px' }]);
@@ -68,16 +68,16 @@ describe('slideAtom', () => {
     const atom = slideAtom({
       direction: 'enter',
       duration: 300,
-      fromX: '100%',
-      fromY: '-100%',
-      toX: '50%',
-      toY: '25%',
+      outX: '100%',
+      outY: '-100%',
+      inX: '50%',
+      inY: '25%',
     });
 
     expect(atom.keyframes).toEqual([{ translate: '100% -100%' }, { translate: '50% 25%' }]);
   });
 
-  it('uses default values when fromX and fromY are not provided', () => {
+  it('uses default values when outX and outY are not provided', () => {
     const atom = slideAtom({
       direction: 'enter',
       duration: 300,
@@ -107,10 +107,10 @@ describe('slideAtom', () => {
       duration: 400,
       delay: 50,
       easing: 'ease-in-out',
-      fromX: '200px',
-      fromY: '100px',
-      toX: '50px',
-      toY: '25px',
+      outX: '200px',
+      outY: '100px',
+      inX: '50px',
+      inY: '25px',
     });
 
     expect(atom).toMatchObject({
@@ -125,8 +125,8 @@ describe('slideAtom', () => {
     const atom = slideAtom({
       direction: 'enter',
       duration: 300,
-      fromX: '0px',
-      fromY: '0px',
+      outX: '0px',
+      outY: '0px',
     });
 
     expect(atom.keyframes).toEqual([{ translate: '0px 0px' }, { translate: '0px 0px' }]);
@@ -160,18 +160,18 @@ describe('slideAtom', () => {
     const enterAtom = slideAtom({
       direction: 'enter',
       duration: 300,
-      fromX: '100px',
-      fromY: '-50px',
-      toX: '20px',
-      toY: '10px',
+      outX: '100px',
+      outY: '-50px',
+      inX: '20px',
+      inY: '10px',
     });
     const exitAtom = slideAtom({
       direction: 'exit',
       duration: 300,
-      fromX: '100px',
-      fromY: '-50px',
-      toX: '20px',
-      toY: '10px',
+      outX: '100px',
+      outY: '-50px',
+      inX: '20px',
+      inY: '10px',
     });
 
     expectSlideAtom(enterAtom, 'enter', '100px -50px', '20px 10px');
diff --git a/packages/react-components/react-motion-components-preview/library/src/atoms/slide-atom.ts b/packages/react-components/react-motion-components-preview/library/src/atoms/slide-atom.ts
index d3d270ab452cf..f42a9f3818b96 100644
--- a/packages/react-components/react-motion-components-preview/library/src/atoms/slide-atom.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/atoms/slide-atom.ts
@@ -2,10 +2,10 @@ import { AtomMotion, motionTokens } from '@fluentui/react-motion';
 import { BaseAtomParams } from '../types';
 
 interface SlideAtomParams extends BaseAtomParams {
-  fromX?: string;
-  fromY?: string;
-  toX?: string;
-  toY?: string;
+  outX?: string;
+  outY?: string;
+  inX?: string;
+  inY?: string;
 }
 
 /**
@@ -13,10 +13,10 @@ interface SlideAtomParams extends BaseAtomParams {
  * @param direction - The functional direction of the motion: 'enter' or 'exit'.
  * @param duration - The duration of the motion in milliseconds.
  * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
- * @param fromX - The starting X translate value with units (e.g., '50px', '100%'). Defaults to '0px'.
- * @param fromY - The starting Y translate value with units (e.g., '50px', '100%'). Defaults to '0px'.
- * @param toX - The ending X translate value with units (e.g.'5px', '10%'). Defaults to '0px'.
- * @param toY - The ending Y translate value with units (e.g., '5px', '10%'). Defaults to '0px'.
+ * @param outX - The starting X translate value with units (e.g., '50px', '100%'). Defaults to '0px'.
+ * @param outY - The starting Y translate value with units (e.g., '50px', '100%'). Defaults to '0px'.
+ * @param inX - The ending X translate value with units (e.g.'5px', '10%'). Defaults to '0px'.
+ * @param inY - The ending Y translate value with units (e.g., '5px', '10%'). Defaults to '0px'.
  * @param delay - Time (ms) to delay the animation. Defaults to 0.
  * @returns A motion atom object with translate keyframes and the supplied duration and easing.
  */
@@ -25,12 +25,12 @@ export const slideAtom = ({
   duration,
   easing = motionTokens.curveLinear,
   delay = 0,
-  fromX = '0px',
-  fromY = '0px',
-  toX = '0px',
-  toY = '0px',
+  outX = '0px',
+  outY = '0px',
+  inX = '0px',
+  inY = '0px',
 }: SlideAtomParams): AtomMotion => {
-  const keyframes = [{ translate: `${fromX} ${fromY}` }, { translate: `${toX} ${toY}` }];
+  const keyframes = [{ translate: `${outX} ${outY}` }, { translate: `${inX} ${inY}` }];
   if (direction === 'exit') {
     keyframes.reverse();
   }
diff --git a/packages/react-components/react-motion-components-preview/library/src/components/Slide/Slide.ts b/packages/react-components/react-motion-components-preview/library/src/components/Slide/Slide.ts
index 024d2d50e9463..493a53c31b1a1 100644
--- a/packages/react-components/react-motion-components-preview/library/src/components/Slide/Slide.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/components/Slide/Slide.ts
@@ -17,10 +17,10 @@ import { SlideParams } from './slide-types';
  * @param exitDuration - Time (ms) for the exit transition (slide-out). Defaults to the `duration` param for symmetry.
  * @param exitEasing - Easing curve for the exit transition (slide-out). Defaults to the `curveAccelerateMid` value.
  * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.
- * @param fromX - The X translate value with units to animate from. Defaults to `'0px'`.
- * @param fromY - The Y translate value with units to animate from. Defaults to `'20px'`.
- * @param toX - The X translate value with units to animate to. Defaults to `'0px'`.
- * @param toY - The Y translate value with units to animate to. Defaults to `'0px'`.
+ * @param outX - The X translate value with units to animate from. Defaults to `'0px'`.
+ * @param outY - The Y translate value with units to animate from. Defaults to `'0px'`.
+ * @param inX - The X translate value with units to animate to. Defaults to `'0px'`.
+ * @param inY - The Y translate value with units to animate to. Defaults to `'0px'`.
  * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.
  */
 const slidePresenceFn: PresenceMotionFn<SlideParams> = ({
@@ -30,23 +30,23 @@ const slidePresenceFn: PresenceMotionFn<SlideParams> = ({
   exitDuration = duration,
   exitEasing = motionTokens.curveAccelerateMid,
   exitDelay = delay,
-  fromX = '0px',
-  fromY = '20px',
-  toX = '0px',
-  toY = '0px',
+  outX = '0px',
+  outY = '0px',
+  inX = '0px',
+  inY = '0px',
   animateOpacity = true,
 }: SlideParams) => {
-  const enterAtoms = [slideAtom({ direction: 'enter', duration, easing, delay, fromX, fromY, toX, toY })];
+  const enterAtoms = [slideAtom({ direction: 'enter', duration, easing, delay, outX, outY, inX, inY })];
   const exitAtoms = [
     slideAtom({
       direction: 'exit',
       duration: exitDuration,
       easing: exitEasing,
       delay: exitDelay,
-      fromX,
-      fromY,
-      toX,
-      toY,
+      outX,
+      outY,
+      inX,
+      inY,
     }),
   ];
 
diff --git a/packages/react-components/react-motion-components-preview/library/src/components/Slide/slide-types.ts b/packages/react-components/react-motion-components-preview/library/src/components/Slide/slide-types.ts
index 444fe39a10077..c48c7ec4904db 100644
--- a/packages/react-components/react-motion-components-preview/library/src/components/Slide/slide-types.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/components/Slide/slide-types.ts
@@ -3,14 +3,14 @@ import type { BasePresenceParams, AnimateOpacity } from '../../types';
 export type SlideParams = BasePresenceParams &
   AnimateOpacity & {
     /** The X translate value with units to animate from. Defaults to `'0px'`. */
-    fromX?: string;
+    outX?: string;
 
     /** The Y translate value with units to animate from. Defaults to `'20px'`. */
-    fromY?: string;
+    outY?: string;
 
     /** The X translate value with units to animate to. Defaults to `'0px'`. */
-    toX?: string;
+    inX?: string;
 
     /** The Y translate value with units to animate to. Defaults to `'0px'`. */
-    toY?: string;
+    inY?: string;
   };
diff --git a/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideCardsDemo.stories.tsx b/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideCardsDemo.stories.tsx
index def04492dbfa2..1cfbcddc94ee3 100644
--- a/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideCardsDemo.stories.tsx
+++ b/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideCardsDemo.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { JSXElement } from '@fluentui/react-components';
 import { makeStyles, tokens, Button, Card, CardHeader, CardPreview, Body1 } from '@fluentui/react-components';
-import { SlideRelaxed } from '@fluentui/react-motion-components-preview';
+import { Slide } from '@fluentui/react-motion-components-preview';
 
 const useClasses = makeStyles({
   container: {
@@ -41,51 +41,60 @@ const cardData = [
     title: 'Welcome',
     content: 'Getting started',
     color: tokens.colorPaletteBlueBackground2,
-    fromX: '-50px',
-    fromY: '0px',
+    outX: '-50px',
+    outY: '0px',
   },
   {
     id: 2,
     title: 'Features',
     content: 'Explore the capabilities',
     color: tokens.colorPaletteGreenBackground2,
-    fromX: '0px',
-    fromY: '-50px',
+    outX: '0px',
+    outY: '-50px',
   },
   {
     id: 3,
     title: 'Customize',
     content: 'Make it your own',
     color: tokens.colorPalettePurpleBackground2,
-    fromX: '50px',
-    fromY: '0px',
+    outX: '50px',
+    outY: '0px',
   },
   {
     id: 4,
     title: 'Advanced',
     content: 'Pro techniques',
     color: tokens.colorPaletteRedBackground2,
-    fromX: '-30px',
-    fromY: '30px',
+    outX: '-30px',
+    outY: '30px',
   },
   {
     id: 5,
     title: 'Examples',
     content: 'Real-world usage',
     color: tokens.colorPalettePeachBackground2,
-    fromX: '0px',
-    fromY: '50px',
+    outX: '0px',
+    outY: '50px',
   },
   {
     id: 6,
     title: 'Resources',
     content: 'Documentation & help',
     color: tokens.colorPaletteLightTealBackground2,
-    fromX: '30px',
-    fromY: '30px',
+    outX: '30px',
+    outY: '30px',
   },
 ];
 
+// TODO: reduce samples
+// 3 bounces, 95% decay
+const springSettleCurve = `linear(0.000, 1.000 25%, 1.038 26%, 1.070 27%, 1.098 28%, 1.121 29%, 1.139 30%, 1.152 31%, 1.161 32%, 1.166 33%, 1.168 34%, 1.166 35%, 1.162 36%, 1.155 37%, 1.146 38%, 1.135 39%, 1.110 41%, 1.056 45%, 1.031 47%, 1.009 49%, 1.000 50%, 0.9916 51%, 0.9843 52%, 0.9781 53%, 0.9730 54%, 0.9690 55%, 0.9639 57%, 0.9624 59%, 0.9638 61%, 0.9674 63%, 0.9753 66%, 0.9903 71%, 0.9979 74%, 1.004 77%, 1.007 80%, 1.008 83%, 1.008 87%, 1.000 99%, 1.000)`;
+
+// 7% anticipation, exponent 3
+const anticipationRelaxedCurve = `linear(0.000, -0.001190 3%, -0.004500 6%, -0.01154 10%, -0.02328 15%, -0.04719 24%, -0.05672 28%, -0.06428 32%, -0.06810 35%, -0.06991 38%, -0.06931 41%, -0.06739 43%, -0.06410 45%, -0.05935 47%, -0.05302 49%, -0.04498 51%, -0.03513 53%, -0.02335 55%, -0.009525 57%, 0.006460 59%, 0.02472 61%, 0.04537 63%, 0.06852 65%, 0.09430 67%, 0.1228 69%, 0.1542 71%, 0.1885 73%, 0.2259 75%, 0.2665 77%, 0.3104 79%, 0.3577 81%, 0.4086 83%, 0.4631 85%, 0.5214 87%, 0.5835 89%, 0.6161 90%, 0.6497 91%, 0.6843 92%, 0.7200 93%, 0.7567 94%, 0.7945 95%, 0.8334 96%, 0.8733 97%, 0.9144 98%, 0.9566 99%, 1.000)`;
+// 7% anticipation, exponent 2
+const anticipationSnappyCurve = `linear(0.000, -0.01307 2%, -0.02479 4%, -0.03517 6%, -0.04419 8%, -0.05186 10%, -0.05818 12%, -0.06316 14%, -0.06678 16%, -0.06905 18%, -0.06998 20%, -0.06955 22%, -0.06777 24%, -0.06465 26%, -0.06017 28%, -0.05435 30%, -0.04717 32%, -0.03864 34%, -0.02877 36%, -0.01754 38%, -0.004966 40%, 0.008960 42%, 0.02424 44%, 0.04086 46%, 0.05884 48%, 0.07816 50%, 0.09884 52%, 0.1209 54%, 0.1442 56%, 0.1690 58%, 0.1950 60%, 0.2225 62%, 0.2512 64%, 0.2814 66%, 0.3128 68%, 0.3457 70%, 0.3798 72%, 0.4154 74%, 0.4522 76%, 0.4904 78%, 0.5300 80%, 0.5709 82%, 0.6132 84%, 0.6568 86%, 0.7018 88%, 0.7481 90%, 0.7958 92%, 0.8448 94%, 0.8952 96%, 0.9469 98%, 1.000)`;
+
 export const CardsDemo = (): JSXElement => {
   const classes = useClasses();
   const [visibleCards, setVisibleCards] = React.useState<Set<number>>(() => new Set(cardData.map(card => card.id)));
@@ -129,13 +138,15 @@ export const CardsDemo = (): JSXElement => {
 
       <div className={classes.cardGrid}>
         {cardData.map(card => (
-          <SlideRelaxed
+          <Slide
             key={card.id}
             visible={visibleCards.has(card.id)}
-            fromX={card.fromX}
-            fromY={card.fromY}
-            duration={350}
-            exitDuration={250}
+            outX={card.outX}
+            outY={card.outY}
+            duration={500}
+            exitDuration={500}
+            easing={springSettleCurve}
+            exitEasing={anticipationRelaxedCurve}
           >
             <Card className={classes.card}>
               <CardPreview className={classes.cardPreview} style={{ backgroundColor: card.color }}>
@@ -150,7 +161,7 @@ export const CardsDemo = (): JSXElement => {
                 description={<Body1>{card.content}</Body1>}
               />
             </Card>
-          </SlideRelaxed>
+          </Slide>
         ))}
       </div>
     </div>
diff --git a/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideDefault.stories.tsx b/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideDefault.stories.tsx
index e66ebb1901142..535f295603fb7 100644
--- a/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideDefault.stories.tsx
+++ b/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideDefault.stories.tsx
@@ -48,7 +48,7 @@ export const Default = (): JSXElement => {
         </Field>
       </div>
 
-      <Slide visible={visible}>
+      <Slide visible={visible} outY="20px">
         <div className={classes.card}>
           <LoremIpsum />
         </div>
diff --git a/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideDirections.stories.tsx b/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideDirections.stories.tsx
index 3a2344f2958a0..e24a7c69d1746 100644
--- a/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideDirections.stories.tsx
+++ b/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideDirections.stories.tsx
@@ -78,14 +78,14 @@ const useClasses = makeStyles({
 });
 
 const slideDirections = {
-  Top: { fromX: '0%', fromY: '-100%' },
-  'Top-Right': { fromX: '100%', fromY: '-100%' },
-  Right: { fromX: '100%', fromY: '0%' },
-  'Bottom-Right': { fromX: '100%', fromY: '100%' },
-  Bottom: { fromX: '0%', fromY: '100%' },
-  'Bottom-Left': { fromX: '-100%', fromY: '100%' },
-  Left: { fromX: '-100%', fromY: '0%' },
-  'Top-Left': { fromX: '-100%', fromY: '-100%' },
+  Top: { outX: '0%', outY: '-100%' },
+  'Top-Right': { outX: '100%', outY: '-100%' },
+  Right: { outX: '100%', outY: '0%' },
+  'Bottom-Right': { outX: '100%', outY: '100%' },
+  Bottom: { outX: '0%', outY: '100%' },
+  'Bottom-Left': { outX: '-100%', outY: '100%' },
+  Left: { outX: '-100%', outY: '0%' },
+  'Top-Left': { outX: '-100%', outY: '-100%' },
 };
 
 const directionIcons: Record<keyof typeof slideDirections, FluentIcon> = {
@@ -146,11 +146,11 @@ export const Directions = (): JSXElement => {
       </div>
 
       <div className={classes.demo}>
-        <Slide visible={visible} fromX={slideParams.fromX} fromY={slideParams.fromY}>
+        <Slide visible={visible} outX={slideParams.outX} outY={slideParams.outY}>
           <div className={classes.card}>
             <p>Slide from {selectedDirection}</p>
-            <p>fromX = {slideParams.fromX}</p>
-            <p>fromY = {slideParams.fromY}</p>
+            <p>outX = {slideParams.outX}</p>
+            <p>outY = {slideParams.outY}</p>
           </div>
         </Slide>
       </div>

From 56e6c2147b9d73938b6180e095d0e725c624c845 Mon Sep 17 00:00:00 2001
From: Robert Penner <robertpenner@microsoft.com>
Date: Thu, 18 Dec 2025 23:12:14 +0000
Subject: [PATCH 02/23] refactor(motion, Fade): rename fromOpacity/toOpacity
 params to outOpacity/inOpacity

---
 .../library/src/atoms/fade-atom.test.ts          | 16 ++++++++--------
 .../library/src/atoms/fade-atom.ts               | 14 +++++++-------
 .../library/src/components/Fade/Fade.ts          | 14 +++++++-------
 .../library/src/components/Fade/fade-types.ts    |  4 ++--
 4 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/packages/react-components/react-motion-components-preview/library/src/atoms/fade-atom.test.ts b/packages/react-components/react-motion-components-preview/library/src/atoms/fade-atom.test.ts
index f191387d025a8..b599117da67cb 100644
--- a/packages/react-components/react-motion-components-preview/library/src/atoms/fade-atom.test.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/atoms/fade-atom.test.ts
@@ -12,15 +12,15 @@ import {
 function expectFadeAtom(
   atom: import('@fluentui/react-motion').AtomMotion,
   direction: 'enter' | 'exit',
-  fromOpacity: number = 0,
-  toOpacity: number = 1,
+  outOpacity: number = 0,
+  inOpacity: number = 1,
 ) {
   expectValidAtomMotion(atom);
 
   if (direction === 'enter') {
-    expectKeyframeProperty(atom, 'opacity', [fromOpacity, toOpacity]);
+    expectKeyframeProperty(atom, 'opacity', [outOpacity, inOpacity]);
   } else {
-    expectKeyframeProperty(atom, 'opacity', [toOpacity, fromOpacity]);
+    expectKeyframeProperty(atom, 'opacity', [inOpacity, outOpacity]);
   }
 }
 
@@ -44,8 +44,8 @@ describe('fadeAtom', () => {
     const atom = fadeAtom({
       direction: 'enter',
       duration: 300,
-      fromOpacity: 0.5,
-      toOpacity: 0.8,
+      outOpacity: 0.5,
+      inOpacity: 0.8,
     });
 
     expect(atom.keyframes).toEqual([{ opacity: 0.5 }, { opacity: 0.8 }]);
@@ -110,8 +110,8 @@ describe('fadeAtom', () => {
   });
 
   it('validates custom opacity values with test utility', () => {
-    const enterAtom = fadeAtom({ direction: 'enter', duration: 300, fromOpacity: 0.2, toOpacity: 0.7 });
-    const exitAtom = fadeAtom({ direction: 'exit', duration: 300, fromOpacity: 0.3, toOpacity: 0.8 });
+    const enterAtom = fadeAtom({ direction: 'enter', duration: 300, outOpacity: 0.2, inOpacity: 0.7 });
+    const exitAtom = fadeAtom({ direction: 'exit', duration: 300, outOpacity: 0.3, inOpacity: 0.8 });
 
     expectFadeAtom(enterAtom, 'enter', 0.2, 0.7);
     expectFadeAtom(exitAtom, 'exit', 0.3, 0.8);
diff --git a/packages/react-components/react-motion-components-preview/library/src/atoms/fade-atom.ts b/packages/react-components/react-motion-components-preview/library/src/atoms/fade-atom.ts
index ab313bc508377..f509f552a5495 100644
--- a/packages/react-components/react-motion-components-preview/library/src/atoms/fade-atom.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/atoms/fade-atom.ts
@@ -6,10 +6,10 @@ interface FadeAtomParams extends BaseAtomParams {
   fill?: FillMode;
 
   /** The starting opacity value. Defaults to 0. */
-  fromOpacity?: number;
+  outOpacity?: number;
 
   /** The ending opacity value. Defaults to 1. */
-  toOpacity?: number;
+  inOpacity?: number;
 }
 
 /**
@@ -18,8 +18,8 @@ interface FadeAtomParams extends BaseAtomParams {
  * @param duration - The duration of the motion in milliseconds.
  * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
  * @param delay - The delay before the motion starts. Defaults to 0.
- * @param fromOpacity - The starting opacity value. Defaults to 0.
- * @param toOpacity - The ending opacity value. Defaults to 1.
+ * @param outOpacity - The starting opacity value. Defaults to 0.
+ * @param inOpacity - The ending opacity value. Defaults to 1.
  * @returns A motion atom object with opacity keyframes and the supplied duration and easing.
  */
 export const fadeAtom = ({
@@ -27,10 +27,10 @@ export const fadeAtom = ({
   duration,
   easing = motionTokens.curveLinear,
   delay = 0,
-  fromOpacity = 0,
-  toOpacity = 1,
+  outOpacity = 0,
+  inOpacity = 1,
 }: FadeAtomParams): AtomMotion => {
-  const keyframes = [{ opacity: fromOpacity }, { opacity: toOpacity }];
+  const keyframes = [{ opacity: outOpacity }, { opacity: inOpacity }];
   if (direction === 'exit') {
     keyframes.reverse();
   }
diff --git a/packages/react-components/react-motion-components-preview/library/src/components/Fade/Fade.ts b/packages/react-components/react-motion-components-preview/library/src/components/Fade/Fade.ts
index a09b421a1475f..e92c0a15ae559 100644
--- a/packages/react-components/react-motion-components-preview/library/src/components/Fade/Fade.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/components/Fade/Fade.ts
@@ -16,8 +16,8 @@ import { FadeParams } from './fade-types';
  * @param exitDuration - Time (ms) for the exit transition (fade-out). Defaults to the `duration` param for symmetry.
  * @param exitEasing - Easing curve for the exit transition (fade-out). Defaults to the `easing` param for symmetry.
  * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.
- * @param fromOpacity - The starting opacity value. Defaults to 0.
- * @param toOpacity - The ending opacity value. Defaults to 1.
+ * @param outOpacity - The starting opacity value. Defaults to 0.
+ * @param inOpacity - The ending opacity value. Defaults to 1.
  */
 export const fadePresenceFn: PresenceMotionFn<FadeParams> = ({
   duration = motionTokens.durationNormal,
@@ -26,18 +26,18 @@ export const fadePresenceFn: PresenceMotionFn<FadeParams> = ({
   exitDuration = duration,
   exitEasing = easing,
   exitDelay = delay,
-  fromOpacity = 0,
-  toOpacity = 1,
+  outOpacity = 0,
+  inOpacity = 1,
 }) => {
   return {
-    enter: fadeAtom({ direction: 'enter', duration, easing, delay, fromOpacity, toOpacity }),
+    enter: fadeAtom({ direction: 'enter', duration, easing, delay, outOpacity, inOpacity }),
     exit: fadeAtom({
       direction: 'exit',
       duration: exitDuration,
       easing: exitEasing,
       delay: exitDelay,
-      fromOpacity,
-      toOpacity,
+      outOpacity,
+      inOpacity,
     }),
   };
 };
diff --git a/packages/react-components/react-motion-components-preview/library/src/components/Fade/fade-types.ts b/packages/react-components/react-motion-components-preview/library/src/components/Fade/fade-types.ts
index e2f3b653e9051..050ddab8d336d 100644
--- a/packages/react-components/react-motion-components-preview/library/src/components/Fade/fade-types.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/components/Fade/fade-types.ts
@@ -2,8 +2,8 @@ import type { BasePresenceParams } from '../../types';
 
 export type FadeParams = BasePresenceParams & {
   /** The starting opacity value. Defaults to 0. */
-  fromOpacity?: number;
+  outOpacity?: number;
 
   /** The ending opacity value. Defaults to 1. */
-  toOpacity?: number;
+  inOpacity?: number;
 };

From 2b42c42da519ea1ec94b8709a005c12653f785be Mon Sep 17 00:00:00 2001
From: Robert Penner <robertpenner@microsoft.com>
Date: Fri, 19 Dec 2025 00:17:42 +0000
Subject: [PATCH 03/23] refactor(motion, Scale): rename fromScale/toScale
 params to outScale/inScale

---
 .../library/src/atoms/scale-atom.test.ts      | 38 +++++++++----------
 .../library/src/atoms/scale-atom.ts           | 14 +++----
 .../library/src/components/Scale/Scale.ts     | 14 +++----
 .../src/components/Scale/scale-types.ts       |  4 +-
 .../src/Scale/ScaleCustomization.stories.tsx  |  2 +-
 5 files changed, 36 insertions(+), 36 deletions(-)

diff --git a/packages/react-components/react-motion-components-preview/library/src/atoms/scale-atom.test.ts b/packages/react-components/react-motion-components-preview/library/src/atoms/scale-atom.test.ts
index 96a938d777134..9c25ed4c1b50c 100644
--- a/packages/react-components/react-motion-components-preview/library/src/atoms/scale-atom.test.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/atoms/scale-atom.test.ts
@@ -12,15 +12,15 @@ import {
 function expectScaleAtom(
   atom: import('@fluentui/react-motion').AtomMotion,
   direction: 'enter' | 'exit',
-  fromScale: number = 0.9,
-  toScale: number = 1,
+  outScale: number = 0.9,
+  inScale: number = 1,
 ) {
   expectValidAtomMotion(atom);
 
   if (direction === 'enter') {
-    expectKeyframeProperty(atom, 'scale', [fromScale, toScale]);
+    expectKeyframeProperty(atom, 'scale', [outScale, inScale]);
   } else {
-    expectKeyframeProperty(atom, 'scale', [toScale, fromScale]);
+    expectKeyframeProperty(atom, 'scale', [inScale, outScale]);
   }
 }
 
@@ -40,12 +40,12 @@ describe('scaleAtom', () => {
     expect(exitAtom.keyframes).toEqual([{ scale: 1 }, { scale: 0.9 }]);
   });
 
-  it('applies custom fromScale and toScale values', () => {
+  it('applies custom outScale and inScale values', () => {
     const atom = scaleAtom({
       direction: 'enter',
       duration: 300,
-      fromScale: 0.5,
-      toScale: 1.2,
+      outScale: 0.5,
+      inScale: 1.2,
     });
 
     expect(atom.keyframes).toEqual([{ scale: 0.5 }, { scale: 1.2 }]);
@@ -64,8 +64,8 @@ describe('scaleAtom', () => {
     const atom = scaleAtom({
       direction: 'enter',
       duration: 300,
-      fromScale: 0,
-      toScale: 1,
+      outScale: 0,
+      inScale: 1,
     });
 
     expect(atom.keyframes).toEqual([{ scale: 0 }, { scale: 1 }]);
@@ -75,8 +75,8 @@ describe('scaleAtom', () => {
     const atom = scaleAtom({
       direction: 'enter',
       duration: 300,
-      fromScale: 1.5,
-      toScale: 2.0,
+      outScale: 1.5,
+      inScale: 2.0,
     });
 
     expect(atom.keyframes).toEqual([{ scale: 1.5 }, { scale: 2.0 }]);
@@ -103,8 +103,8 @@ describe('scaleAtom', () => {
       duration: 400,
       delay: 75,
       easing: 'ease-in-out',
-      fromScale: 0.8,
-      toScale: 1.1,
+      outScale: 0.8,
+      inScale: 1.1,
     });
 
     expect(atom).toMatchObject({
@@ -119,8 +119,8 @@ describe('scaleAtom', () => {
     const atom = scaleAtom({
       direction: 'enter',
       duration: 300,
-      fromScale: 0.95,
-      toScale: 1.05,
+      outScale: 0.95,
+      inScale: 1.05,
     });
 
     expect(atom.keyframes).toEqual([{ scale: 0.95 }, { scale: 1.05 }]);
@@ -154,14 +154,14 @@ describe('scaleAtom', () => {
     const enterAtom = scaleAtom({
       direction: 'enter',
       duration: 300,
-      fromScale: 0.5,
-      toScale: 1.2,
+      outScale: 0.5,
+      inScale: 1.2,
     });
     const exitAtom = scaleAtom({
       direction: 'exit',
       duration: 300,
-      fromScale: 0.5,
-      toScale: 1.2,
+      outScale: 0.5,
+      inScale: 1.2,
     });
 
     expectScaleAtom(enterAtom, 'enter', 0.5, 1.2);
diff --git a/packages/react-components/react-motion-components-preview/library/src/atoms/scale-atom.ts b/packages/react-components/react-motion-components-preview/library/src/atoms/scale-atom.ts
index 4df0752bc64d2..aa01da1f5ffba 100644
--- a/packages/react-components/react-motion-components-preview/library/src/atoms/scale-atom.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/atoms/scale-atom.ts
@@ -2,8 +2,8 @@ import { AtomMotion, motionTokens } from '@fluentui/react-motion';
 import { BaseAtomParams } from '../types';
 
 interface ScaleAtomParams extends BaseAtomParams {
-  fromScale?: number;
-  toScale?: number;
+  outScale?: number;
+  inScale?: number;
 }
 
 /**
@@ -11,8 +11,8 @@ interface ScaleAtomParams extends BaseAtomParams {
  * @param direction - The functional direction of the motion: 'enter' or 'exit'.
  * @param duration - The duration of the motion in milliseconds.
  * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
- * @param fromScale - The starting scale value. Defaults to 0.9.
- * @param toScale - The ending scale value. Defaults to 1.
+ * @param outScale - The starting scale value. Defaults to 0.9.
+ * @param inScale - The ending scale value. Defaults to 1.
  * @param delay - Time (ms) to delay the animation. Defaults to 0.
  * @returns A motion atom object with scale keyframes and the supplied duration and easing.
  */
@@ -21,10 +21,10 @@ export const scaleAtom = ({
   duration,
   easing = motionTokens.curveLinear,
   delay = 0,
-  fromScale = 0.9,
-  toScale = 1,
+  outScale = 0.9,
+  inScale = 1,
 }: ScaleAtomParams): AtomMotion => {
-  const keyframes = [{ scale: fromScale }, { scale: toScale }];
+  const keyframes = [{ scale: outScale }, { scale: inScale }];
   if (direction === 'exit') {
     keyframes.reverse();
   }
diff --git a/packages/react-components/react-motion-components-preview/library/src/components/Scale/Scale.ts b/packages/react-components/react-motion-components-preview/library/src/components/Scale/Scale.ts
index 63a80815f2425..e0871c60a7188 100644
--- a/packages/react-components/react-motion-components-preview/library/src/components/Scale/Scale.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/components/Scale/Scale.ts
@@ -17,8 +17,8 @@ import { ScaleParams } from './scale-types';
  * @param exitDuration - Time (ms) for the exit transition (scale-out). Defaults to the `durationNormal` value (200 ms).
  * @param exitEasing - Easing curve for the exit transition (scale-out). Defaults to the `curveAccelerateMax` value.
  * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.
- * @param fromScale - The scale value to animate from. Defaults to `0.9`.
- * @param toScale - The scale value to animate to. Defaults to `1`.
+ * @param outScale - The scale value to animate from. Defaults to `0.9`.
+ * @param inScale - The scale value to animate to. Defaults to `1`.
  * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.
  */
 const scalePresenceFn: PresenceMotionFn<ScaleParams> = ({
@@ -28,19 +28,19 @@ const scalePresenceFn: PresenceMotionFn<ScaleParams> = ({
   exitDuration = motionTokens.durationNormal,
   exitEasing = motionTokens.curveAccelerateMax,
   exitDelay = delay,
-  fromScale = 0.9,
-  toScale = 1,
+  outScale = 0.9,
+  inScale = 1,
   animateOpacity = true,
 }) => {
-  const enterAtoms = [scaleAtom({ direction: 'enter', duration, easing, delay, fromScale, toScale })];
+  const enterAtoms = [scaleAtom({ direction: 'enter', duration, easing, delay, outScale, inScale })];
   const exitAtoms = [
     scaleAtom({
       direction: 'exit',
       duration: exitDuration,
       easing: exitEasing,
       delay: exitDelay,
-      fromScale,
-      toScale,
+      outScale,
+      inScale,
     }),
   ];
 
diff --git a/packages/react-components/react-motion-components-preview/library/src/components/Scale/scale-types.ts b/packages/react-components/react-motion-components-preview/library/src/components/Scale/scale-types.ts
index 162507086c1be..99531e7ca734a 100644
--- a/packages/react-components/react-motion-components-preview/library/src/components/Scale/scale-types.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/components/Scale/scale-types.ts
@@ -3,8 +3,8 @@ import type { BasePresenceParams, AnimateOpacity } from '../../types';
 export type ScaleParams = BasePresenceParams &
   AnimateOpacity & {
     /** The scale value to animate from. Defaults to `0.9`. */
-    fromScale?: number;
+    outScale?: number;
 
     /** The scale value to animate to. Defaults to `1`. */
-    toScale?: number;
+    inScale?: number;
   };
diff --git a/packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleCustomization.stories.tsx b/packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleCustomization.stories.tsx
index f3e0446f4b8b3..643cf7a7516ed 100644
--- a/packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleCustomization.stories.tsx
+++ b/packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleCustomization.stories.tsx
@@ -67,7 +67,7 @@ const CustomScaleVariant = createPresenceComponentVariant(Scale, {
   exitDuration: motionTokens.durationSlow,
   easing: curveOvershootFirmOut,
   exitEasing: curveOvershootFirmInOut,
-  fromScale: 0.5,
+  outScale: 0.5,
 });
 
 const LoremIpsum = () => (

From d97d8eb79c6a27a070f82e935365de14f5c40cef Mon Sep 17 00:00:00 2001
From: Robert Penner <robertpenner@microsoft.com>
Date: Fri, 19 Dec 2025 00:19:00 +0000
Subject: [PATCH 04/23] refactor(motion): update parameter descriptions for
 clarity in Fade, Scale, and Slide components

---
 .../library/src/atoms/fade-atom.ts                   |  8 ++++----
 .../library/src/atoms/scale-atom.ts                  |  6 ++++--
 .../library/src/atoms/slide-atom.ts                  | 12 ++++++++----
 .../library/src/components/Fade/Fade.ts              |  4 ++--
 .../library/src/components/Fade/fade-types.ts        |  4 ++--
 .../library/src/components/Scale/Scale.ts            |  4 ++--
 .../library/src/components/Scale/scale-types.ts      |  4 ++--
 .../library/src/components/Slide/Slide.ts            |  8 ++++----
 .../library/src/components/Slide/slide-types.ts      |  8 ++++----
 9 files changed, 32 insertions(+), 26 deletions(-)

diff --git a/packages/react-components/react-motion-components-preview/library/src/atoms/fade-atom.ts b/packages/react-components/react-motion-components-preview/library/src/atoms/fade-atom.ts
index f509f552a5495..a2200aae812be 100644
--- a/packages/react-components/react-motion-components-preview/library/src/atoms/fade-atom.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/atoms/fade-atom.ts
@@ -5,10 +5,10 @@ interface FadeAtomParams extends BaseAtomParams {
   /** Defines how values are applied before and after execution. Defaults to 'both'. */
   fill?: FillMode;
 
-  /** The starting opacity value. Defaults to 0. */
+  /** Opacity in the out state (exited). Defaults to 0. */
   outOpacity?: number;
 
-  /** The ending opacity value. Defaults to 1. */
+  /** Opacity in the in state (entered). Defaults to 1. */
   inOpacity?: number;
 }
 
@@ -18,8 +18,8 @@ interface FadeAtomParams extends BaseAtomParams {
  * @param duration - The duration of the motion in milliseconds.
  * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
  * @param delay - The delay before the motion starts. Defaults to 0.
- * @param outOpacity - The starting opacity value. Defaults to 0.
- * @param inOpacity - The ending opacity value. Defaults to 1.
+ * @param outOpacity - Opacity in the out state (exited). Defaults to 0.
+ * @param inOpacity - Opacity in the in state (entered). Defaults to 1.
  * @returns A motion atom object with opacity keyframes and the supplied duration and easing.
  */
 export const fadeAtom = ({
diff --git a/packages/react-components/react-motion-components-preview/library/src/atoms/scale-atom.ts b/packages/react-components/react-motion-components-preview/library/src/atoms/scale-atom.ts
index aa01da1f5ffba..46b95fdef5e63 100644
--- a/packages/react-components/react-motion-components-preview/library/src/atoms/scale-atom.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/atoms/scale-atom.ts
@@ -2,7 +2,9 @@ import { AtomMotion, motionTokens } from '@fluentui/react-motion';
 import { BaseAtomParams } from '../types';
 
 interface ScaleAtomParams extends BaseAtomParams {
+  /** Scale in the out state (exited). Defaults to 0.9. */
   outScale?: number;
+  /** Scale in the in state (entered). Defaults to 1. */
   inScale?: number;
 }
 
@@ -11,8 +13,8 @@ interface ScaleAtomParams extends BaseAtomParams {
  * @param direction - The functional direction of the motion: 'enter' or 'exit'.
  * @param duration - The duration of the motion in milliseconds.
  * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
- * @param outScale - The starting scale value. Defaults to 0.9.
- * @param inScale - The ending scale value. Defaults to 1.
+ * @param outScale - Scale in the out state (exited). Defaults to 0.9.
+ * @param inScale - Scale in the in state (entered). Defaults to 1.
  * @param delay - Time (ms) to delay the animation. Defaults to 0.
  * @returns A motion atom object with scale keyframes and the supplied duration and easing.
  */
diff --git a/packages/react-components/react-motion-components-preview/library/src/atoms/slide-atom.ts b/packages/react-components/react-motion-components-preview/library/src/atoms/slide-atom.ts
index f42a9f3818b96..1171b56e53c81 100644
--- a/packages/react-components/react-motion-components-preview/library/src/atoms/slide-atom.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/atoms/slide-atom.ts
@@ -2,9 +2,13 @@ import { AtomMotion, motionTokens } from '@fluentui/react-motion';
 import { BaseAtomParams } from '../types';
 
 interface SlideAtomParams extends BaseAtomParams {
+  /** X translate in the out state (exited). Defaults to '0px'. */
   outX?: string;
+  /** Y translate in the out state (exited). Defaults to '0px'. */
   outY?: string;
+  /** X translate in the in state (entered). Defaults to '0px'. */
   inX?: string;
+  /** Y translate in the in state (entered). Defaults to '0px'. */
   inY?: string;
 }
 
@@ -13,10 +17,10 @@ interface SlideAtomParams extends BaseAtomParams {
  * @param direction - The functional direction of the motion: 'enter' or 'exit'.
  * @param duration - The duration of the motion in milliseconds.
  * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
- * @param outX - The starting X translate value with units (e.g., '50px', '100%'). Defaults to '0px'.
- * @param outY - The starting Y translate value with units (e.g., '50px', '100%'). Defaults to '0px'.
- * @param inX - The ending X translate value with units (e.g.'5px', '10%'). Defaults to '0px'.
- * @param inY - The ending Y translate value with units (e.g., '5px', '10%'). Defaults to '0px'.
+ * @param outX - X translate in the out state (exited) with units (e.g., '50px', '100%'). Defaults to '0px'.
+ * @param outY - Y translate in the out state (exited) with units (e.g., '50px', '100%'). Defaults to '0px'.
+ * @param inX - X translate in the in state (entered) with units (e.g., '5px', '10%'). Defaults to '0px'.
+ * @param inY - Y translate in the in state (entered) with units (e.g., '5px', '10%'). Defaults to '0px'.
  * @param delay - Time (ms) to delay the animation. Defaults to 0.
  * @returns A motion atom object with translate keyframes and the supplied duration and easing.
  */
diff --git a/packages/react-components/react-motion-components-preview/library/src/components/Fade/Fade.ts b/packages/react-components/react-motion-components-preview/library/src/components/Fade/Fade.ts
index e92c0a15ae559..81dfa0c93a09c 100644
--- a/packages/react-components/react-motion-components-preview/library/src/components/Fade/Fade.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/components/Fade/Fade.ts
@@ -16,8 +16,8 @@ import { FadeParams } from './fade-types';
  * @param exitDuration - Time (ms) for the exit transition (fade-out). Defaults to the `duration` param for symmetry.
  * @param exitEasing - Easing curve for the exit transition (fade-out). Defaults to the `easing` param for symmetry.
  * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.
- * @param outOpacity - The starting opacity value. Defaults to 0.
- * @param inOpacity - The ending opacity value. Defaults to 1.
+ * @param outOpacity - Opacity in the out state (exited). Defaults to 0.
+ * @param inOpacity - Opacity in the in state (entered). Defaults to 1.
  */
 export const fadePresenceFn: PresenceMotionFn<FadeParams> = ({
   duration = motionTokens.durationNormal,
diff --git a/packages/react-components/react-motion-components-preview/library/src/components/Fade/fade-types.ts b/packages/react-components/react-motion-components-preview/library/src/components/Fade/fade-types.ts
index 050ddab8d336d..84ceaecbf77a5 100644
--- a/packages/react-components/react-motion-components-preview/library/src/components/Fade/fade-types.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/components/Fade/fade-types.ts
@@ -1,9 +1,9 @@
 import type { BasePresenceParams } from '../../types';
 
 export type FadeParams = BasePresenceParams & {
-  /** The starting opacity value. Defaults to 0. */
+  /** Opacity in the out state (exited). Defaults to 0. */
   outOpacity?: number;
 
-  /** The ending opacity value. Defaults to 1. */
+  /** Opacity in the in state (entered). Defaults to 1. */
   inOpacity?: number;
 };
diff --git a/packages/react-components/react-motion-components-preview/library/src/components/Scale/Scale.ts b/packages/react-components/react-motion-components-preview/library/src/components/Scale/Scale.ts
index e0871c60a7188..417d9c8e54c98 100644
--- a/packages/react-components/react-motion-components-preview/library/src/components/Scale/Scale.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/components/Scale/Scale.ts
@@ -17,8 +17,8 @@ import { ScaleParams } from './scale-types';
  * @param exitDuration - Time (ms) for the exit transition (scale-out). Defaults to the `durationNormal` value (200 ms).
  * @param exitEasing - Easing curve for the exit transition (scale-out). Defaults to the `curveAccelerateMax` value.
  * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.
- * @param outScale - The scale value to animate from. Defaults to `0.9`.
- * @param inScale - The scale value to animate to. Defaults to `1`.
+ * @param outScale - Scale in the out state (exited). Defaults to `0.9`.
+ * @param inScale - Scale in the in state (entered). Defaults to `1`.
  * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.
  */
 const scalePresenceFn: PresenceMotionFn<ScaleParams> = ({
diff --git a/packages/react-components/react-motion-components-preview/library/src/components/Scale/scale-types.ts b/packages/react-components/react-motion-components-preview/library/src/components/Scale/scale-types.ts
index 99531e7ca734a..44a1c6e1ae199 100644
--- a/packages/react-components/react-motion-components-preview/library/src/components/Scale/scale-types.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/components/Scale/scale-types.ts
@@ -2,9 +2,9 @@ import type { BasePresenceParams, AnimateOpacity } from '../../types';
 
 export type ScaleParams = BasePresenceParams &
   AnimateOpacity & {
-    /** The scale value to animate from. Defaults to `0.9`. */
+    /** Scale in the out state (exited). Defaults to `0.9`. */
     outScale?: number;
 
-    /** The scale value to animate to. Defaults to `1`. */
+    /** Scale in the in state (entered). Defaults to `1`. */
     inScale?: number;
   };
diff --git a/packages/react-components/react-motion-components-preview/library/src/components/Slide/Slide.ts b/packages/react-components/react-motion-components-preview/library/src/components/Slide/Slide.ts
index 493a53c31b1a1..c640af2e78331 100644
--- a/packages/react-components/react-motion-components-preview/library/src/components/Slide/Slide.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/components/Slide/Slide.ts
@@ -17,10 +17,10 @@ import { SlideParams } from './slide-types';
  * @param exitDuration - Time (ms) for the exit transition (slide-out). Defaults to the `duration` param for symmetry.
  * @param exitEasing - Easing curve for the exit transition (slide-out). Defaults to the `curveAccelerateMid` value.
  * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.
- * @param outX - The X translate value with units to animate from. Defaults to `'0px'`.
- * @param outY - The Y translate value with units to animate from. Defaults to `'0px'`.
- * @param inX - The X translate value with units to animate to. Defaults to `'0px'`.
- * @param inY - The Y translate value with units to animate to. Defaults to `'0px'`.
+ * @param outX - X translate in the out state (exited). Defaults to `'0px'`.
+ * @param outY - Y translate in the out state (exited). Defaults to `'0px'`.
+ * @param inX - X translate in the in state (entered). Defaults to `'0px'`.
+ * @param inY - Y translate in the in state (entered). Defaults to `'0px'`.
  * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.
  */
 const slidePresenceFn: PresenceMotionFn<SlideParams> = ({
diff --git a/packages/react-components/react-motion-components-preview/library/src/components/Slide/slide-types.ts b/packages/react-components/react-motion-components-preview/library/src/components/Slide/slide-types.ts
index c48c7ec4904db..7f72c99e9703d 100644
--- a/packages/react-components/react-motion-components-preview/library/src/components/Slide/slide-types.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/components/Slide/slide-types.ts
@@ -2,15 +2,15 @@ import type { BasePresenceParams, AnimateOpacity } from '../../types';
 
 export type SlideParams = BasePresenceParams &
   AnimateOpacity & {
-    /** The X translate value with units to animate from. Defaults to `'0px'`. */
+    /** X translate in the out state (exited). Defaults to `'0px'`. */
     outX?: string;
 
-    /** The Y translate value with units to animate from. Defaults to `'20px'`. */
+    /** Y translate in the out state (exited). Defaults to `'0px'`. */
     outY?: string;
 
-    /** The X translate value with units to animate to. Defaults to `'0px'`. */
+    /** X translate in the in state (entered). Defaults to `'0px'`. */
     inX?: string;
 
-    /** The Y translate value with units to animate to. Defaults to `'0px'`. */
+    /** Y translate in the in state (entered). Defaults to `'0px'`. */
     inY?: string;
   };

From 19a75fc8fd05abeb724f1ee6b0b620ca3913051b Mon Sep 17 00:00:00 2001
From: Robert Penner <robertpenner@microsoft.com>
Date: Fri, 19 Dec 2025 00:23:43 +0000
Subject: [PATCH 05/23] refactor(motion, Rotate): rename fromAngle/toAngle
 params to outAngle/inAngle and update related tests

---
 .../library/src/atoms/rotate-atom.test.ts     | 50 +++++++++----------
 .../library/src/atoms/rotate-atom.ts          | 16 +++---
 .../library/src/components/Rotate/Rotate.ts   | 16 +++---
 .../src/components/Rotate/rotate-types.ts     |  8 +--
 .../src/Rotate/RotateCardFlip.stories.tsx     | 10 ++--
 .../src/Rotate/RotateDefault.stories.tsx      | 18 +++----
 6 files changed, 60 insertions(+), 58 deletions(-)

diff --git a/packages/react-components/react-motion-components-preview/library/src/atoms/rotate-atom.test.ts b/packages/react-components/react-motion-components-preview/library/src/atoms/rotate-atom.test.ts
index d80f808ada135..6c0630dba0c03 100644
--- a/packages/react-components/react-motion-components-preview/library/src/atoms/rotate-atom.test.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/atoms/rotate-atom.test.ts
@@ -7,7 +7,7 @@ describe('rotateAtom', () => {
       direction: 'enter',
       duration: 300,
       easing: motionTokens.curveEasyEase,
-      fromAngle: -90,
+      outAngle: -90,
     });
 
     expect(atom).toMatchObject({
@@ -17,13 +17,13 @@ describe('rotateAtom', () => {
     });
   });
 
-  it('creates exit keyframes with rotation from 0 to toAngle', () => {
+  it('creates exit keyframes with rotation from 0 to inAngle', () => {
     const atom = rotateAtom({
       direction: 'exit',
       duration: 250,
       easing: motionTokens.curveAccelerateMin,
-      fromAngle: -90,
-      toAngle: 90,
+      outAngle: -90,
+      inAngle: 90,
     });
 
     expect(atom).toMatchObject({
@@ -46,7 +46,7 @@ describe('rotateAtom', () => {
     const atom = rotateAtom({
       direction: 'enter',
       duration: 300,
-      fromAngle: 45,
+      outAngle: 45,
     });
 
     expect(atom.easing).toBe(motionTokens.curveLinear);
@@ -56,19 +56,19 @@ describe('rotateAtom', () => {
     const atom = rotateAtom({
       direction: 'enter',
       duration: 300,
-      fromAngle: 180,
+      outAngle: 180,
     });
 
     expect(atom.keyframes[0]).toEqual({ rotate: 'z 180deg' });
     expect(atom.keyframes[1]).toEqual({ rotate: 'z 0deg' });
   });
 
-  it('applies custom fromAngle and toAngle values', () => {
+  it('applies custom outAngle and inAngle values', () => {
     const atom = rotateAtom({
       direction: 'enter',
       duration: 300,
-      fromAngle: 180,
-      toAngle: 45,
+      outAngle: 180,
+      inAngle: 45,
     });
 
     expect(atom.keyframes).toEqual([{ rotate: 'z 180deg' }, { rotate: 'z 45deg' }]);
@@ -79,21 +79,21 @@ describe('rotateAtom', () => {
       direction: 'enter',
       duration: 300,
       axis: 'x',
-      fromAngle: 45,
+      outAngle: 45,
     });
 
     const atomY = rotateAtom({
       direction: 'enter',
       duration: 300,
       axis: 'y',
-      fromAngle: 45,
+      outAngle: 45,
     });
 
     const atomZ = rotateAtom({
       direction: 'enter',
       duration: 300,
       axis: 'z',
-      fromAngle: 45,
+      outAngle: 45,
     });
 
     expect(atomX.keyframes[0]).toEqual({ rotate: 'x 45deg' });
@@ -101,22 +101,22 @@ describe('rotateAtom', () => {
     expect(atomZ.keyframes[0]).toEqual({ rotate: 'z 45deg' });
   });
 
-  it('uses toAngle when direction is exit', () => {
+  it('uses inAngle when direction is exit', () => {
     const atom = rotateAtom({
       direction: 'exit',
       duration: 300,
-      fromAngle: -90,
-      toAngle: 45,
+      outAngle: -90,
+      inAngle: 45,
     });
 
     expect(atom.keyframes).toEqual([{ rotate: 'z 45deg' }, { rotate: 'z -90deg' }]);
   });
 
-  it('uses default toAngle when not provided', () => {
+  it('uses default inAngle when not provided', () => {
     const atom = rotateAtom({
       direction: 'exit',
       duration: 300,
-      fromAngle: -90,
+      outAngle: -90,
     });
 
     expect(atom.keyframes).toEqual([{ rotate: 'z 0deg' }, { rotate: 'z -90deg' }]);
@@ -126,13 +126,13 @@ describe('rotateAtom', () => {
     const atomPositive = rotateAtom({
       direction: 'enter',
       duration: 300,
-      fromAngle: 90,
+      outAngle: 90,
     });
 
     const atomNegative = rotateAtom({
       direction: 'enter',
       duration: 300,
-      fromAngle: -45,
+      outAngle: -45,
     });
 
     expect(atomPositive.keyframes[0]).toEqual({ rotate: 'z 90deg' });
@@ -146,8 +146,8 @@ describe('rotateAtom', () => {
       delay: 50,
       easing: 'ease-in-out',
       axis: 'x',
-      fromAngle: 180,
-      toAngle: 45,
+      outAngle: 180,
+      inAngle: 45,
     });
 
     expect(atom).toMatchObject({
@@ -162,15 +162,15 @@ describe('rotateAtom', () => {
     const enterAtom = rotateAtom({
       direction: 'enter',
       duration: 300,
-      fromAngle: -90,
-      toAngle: 0,
+      outAngle: -90,
+      inAngle: 0,
     });
 
     const exitAtom = rotateAtom({
       direction: 'exit',
       duration: 300,
-      fromAngle: -90,
-      toAngle: 0,
+      outAngle: -90,
+      inAngle: 0,
     });
 
     expect(enterAtom.keyframes).toEqual([{ rotate: 'z -90deg' }, { rotate: 'z 0deg' }]);
diff --git a/packages/react-components/react-motion-components-preview/library/src/atoms/rotate-atom.ts b/packages/react-components/react-motion-components-preview/library/src/atoms/rotate-atom.ts
index b2212597a3d9b..84daa19c84bd1 100644
--- a/packages/react-components/react-motion-components-preview/library/src/atoms/rotate-atom.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/atoms/rotate-atom.ts
@@ -6,8 +6,10 @@ type Axis3D = NonNullable<RotateParams['axis']>;
 
 interface RotateAtomParams extends BaseAtomParams {
   axis?: Axis3D;
-  fromAngle?: number;
-  toAngle?: number;
+  /** Rotation angle in the out state (exited) in degrees. Defaults to -90. */
+  outAngle?: number;
+  /** Rotation angle in the in state (entered) in degrees. Defaults to 0. */
+  inAngle?: number;
 }
 
 const createRotateValue = (axis: Axis3D, angle: number): string => {
@@ -20,8 +22,8 @@ const createRotateValue = (axis: Axis3D, angle: number): string => {
  * @param duration - The duration of the motion in milliseconds.
  * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
  * @param axis - The axis of rotation: 'x', 'y', or 'z'. Defaults to 'y'.
- * @param fromAngle - The starting rotation angle in degrees. Defaults to -90.
- * @param toAngle - The ending rotation angle in degrees. Defaults to 0.
+ * @param outAngle - Rotation angle in the out state (exited) in degrees. Defaults to -90.
+ * @param inAngle - Rotation angle in the in state (entered) in degrees. Defaults to 0.
  * @param delay - Time (ms) to delay the animation. Defaults to 0.
  * @returns A motion atom object with rotate keyframes and the supplied duration and easing.
  */
@@ -31,10 +33,10 @@ export const rotateAtom = ({
   easing = motionTokens.curveLinear,
   delay = 0,
   axis = 'z',
-  fromAngle = -90,
-  toAngle = 0,
+  outAngle = -90,
+  inAngle = 0,
 }: RotateAtomParams): AtomMotion => {
-  const keyframes = [{ rotate: createRotateValue(axis, fromAngle) }, { rotate: createRotateValue(axis, toAngle) }];
+  const keyframes = [{ rotate: createRotateValue(axis, outAngle) }, { rotate: createRotateValue(axis, inAngle) }];
   if (direction === 'exit') {
     keyframes.reverse();
   }
diff --git a/packages/react-components/react-motion-components-preview/library/src/components/Rotate/Rotate.ts b/packages/react-components/react-motion-components-preview/library/src/components/Rotate/Rotate.ts
index e15225aa957c9..9b58d6b29c48f 100644
--- a/packages/react-components/react-motion-components-preview/library/src/components/Rotate/Rotate.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/components/Rotate/Rotate.ts
@@ -13,8 +13,8 @@ import { RotateParams } from './rotate-types';
  * @param exitEasing - Easing curve for the exit transition (rotate-out). Defaults to the `curveAccelerateMax` value.
  * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.
  * @param axis - The axis of rotation: 'x', 'y', or 'z'. Defaults to 'z'.
- * @param fromAngle - The starting rotation angle in degrees. Defaults to -90.
- * @param toAngle - The ending rotation angle in degrees. Defaults to 0.
+ * @param outAngle - Rotation angle in the out state (exited) in degrees. Defaults to -90.
+ * @param inAngle - Rotation angle in the in state (entered) in degrees. Defaults to 0.
  * @param animateOpacity - Whether to animate the opacity during the rotation. Defaults to `true`.
  */
 const rotatePresenceFn: PresenceMotionFn<RotateParams> = ({
@@ -25,8 +25,8 @@ const rotatePresenceFn: PresenceMotionFn<RotateParams> = ({
   exitEasing = motionTokens.curveAccelerateMax,
   exitDelay = delay,
   axis = 'z',
-  fromAngle = -90,
-  toAngle = 0,
+  outAngle = -90,
+  inAngle = 0,
   animateOpacity = true,
 }: RotateParams) => {
   const enterAtoms: AtomMotion[] = [
@@ -36,8 +36,8 @@ const rotatePresenceFn: PresenceMotionFn<RotateParams> = ({
       easing,
       delay,
       axis,
-      fromAngle,
-      toAngle,
+      outAngle,
+      inAngle,
     }),
   ];
 
@@ -48,8 +48,8 @@ const rotatePresenceFn: PresenceMotionFn<RotateParams> = ({
       easing: exitEasing,
       delay: exitDelay,
       axis,
-      fromAngle,
-      toAngle,
+      outAngle,
+      inAngle,
     }),
   ];
 
diff --git a/packages/react-components/react-motion-components-preview/library/src/components/Rotate/rotate-types.ts b/packages/react-components/react-motion-components-preview/library/src/components/Rotate/rotate-types.ts
index 39319ae9ea21b..ee164a074af8e 100644
--- a/packages/react-components/react-motion-components-preview/library/src/components/Rotate/rotate-types.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/components/Rotate/rotate-types.ts
@@ -11,14 +11,14 @@ export type RotateParams = BasePresenceParams &
     axis?: Axis3D;
 
     /**
-     * The starting rotation angle in degrees.
+     * Rotation angle in the out state (exited) in degrees.
      * Defaults to -90.
      */
-    fromAngle?: number;
+    outAngle?: number;
 
     /**
-     * The ending rotation angle in degrees.
+     * Rotation angle in the in state (entered) in degrees.
      * Defaults to 0.
      */
-    toAngle?: number;
+    inAngle?: number;
   };
diff --git a/packages/react-components/react-motion-components-preview/stories/src/Rotate/RotateCardFlip.stories.tsx b/packages/react-components/react-motion-components-preview/stories/src/Rotate/RotateCardFlip.stories.tsx
index 864610b3231f3..f03bd3c7fb323 100644
--- a/packages/react-components/react-motion-components-preview/stories/src/Rotate/RotateCardFlip.stories.tsx
+++ b/packages/react-components/react-motion-components-preview/stories/src/Rotate/RotateCardFlip.stories.tsx
@@ -59,7 +59,7 @@ const useClasses = makeStyles({
 const curveSpringRelaxed = `linear(0.0000 0.00%, 0.9935 36.00%, 1.042 38.00%, 1.072 40.00%, 1.084 42.00%, 1.080 44.00%, 1.055 47.00%, 0.9933 53.00%, 0.9746 57.00%, 0.9797 62.00%, 1.002 69.00%, 1.008 73.00%, 1.008 76.00%, 0.9980 87.00%, 1.000 100.00%)`;
 
 type RequiredRotateParams = Required<
-  Pick<RotateParams, 'axis' | 'fromAngle' | 'duration' | 'easing' | 'exitEasing' | 'exitDuration'>
+  Pick<RotateParams, 'axis' | 'outAngle' | 'duration' | 'easing' | 'exitEasing' | 'exitDuration'>
 >;
 
 type RotatePattern = {
@@ -78,7 +78,7 @@ const patterns: RotatePattern[] = [
     icon: '↔️',
     color: tokens.colorPaletteBlueForeground2,
     axis: 'y',
-    fromAngle: 180,
+    outAngle: 180,
     easing: curveSpringRelaxed,
     exitEasing: motionTokens.curveDecelerateMid,
     duration: motionTokens.durationUltraSlow * 4, // 2000ms = 500ms * 4
@@ -91,7 +91,7 @@ const patterns: RotatePattern[] = [
     icon: '↕️',
     color: tokens.colorPaletteGreenForeground2,
     axis: 'x',
-    fromAngle: 180,
+    outAngle: 180,
     easing: curveSpringRelaxed,
     exitEasing: motionTokens.curveDecelerateMid,
     duration: motionTokens.durationUltraSlow * 4, // 2000ms = 500ms * 4
@@ -104,7 +104,7 @@ const patterns: RotatePattern[] = [
     icon: '🔄',
     color: tokens.colorPaletteRedForeground2,
     axis: 'z',
-    fromAngle: 180,
+    outAngle: 180,
     easing: curveSpringRelaxed,
     exitEasing: motionTokens.curveDecelerateMid,
     duration: motionTokens.durationUltraSlow * 4, // 2000ms = 500ms * 4
@@ -156,7 +156,7 @@ export const CardFlip = (): JSXElement => {
             <Rotate
               visible={activePatterns.has(pattern.id)}
               axis={pattern.axis}
-              fromAngle={pattern.fromAngle}
+              outAngle={pattern.outAngle}
               duration={pattern.duration}
               easing={pattern.easing}
               exitEasing={pattern.exitEasing}
diff --git a/packages/react-components/react-motion-components-preview/stories/src/Rotate/RotateDefault.stories.tsx b/packages/react-components/react-motion-components-preview/stories/src/Rotate/RotateDefault.stories.tsx
index 558d7785d15d9..71c44a9d76f6c 100644
--- a/packages/react-components/react-motion-components-preview/stories/src/Rotate/RotateDefault.stories.tsx
+++ b/packages/react-components/react-motion-components-preview/stories/src/Rotate/RotateDefault.stories.tsx
@@ -104,11 +104,11 @@ export const Default = (props: React.ComponentProps<typeof Rotate>): JSXElement
   const [perspective, setPerspective] = React.useState<string>('1000px');
   const [duration, setDuration] = React.useState<number>(motionTokens.durationUltraSlow); // 500ms
   const [axis, setAxis] = React.useState<Axis3D>('z');
-  const [fromAngle, setFromAngle] = React.useState<number>(-90);
+  const [outAngle, setOutAngle] = React.useState<number>(-90);
 
   const perspectiveSliderId = useId();
   const durationSliderId = useId();
-  const fromAngleSliderId = useId();
+  const outAngleSliderId = useId();
 
   const perspectiveMin = 200;
   const perspectiveMax = 2000;
@@ -141,18 +141,18 @@ export const Default = (props: React.ComponentProps<typeof Rotate>): JSXElement
 
           <Field className={classes.sliderField}>
             <div className={classes.sliderHeader}>
-              <Label htmlFor={fromAngleSliderId} className={classes.sliderLabel}>
-                From Angle
+              <Label htmlFor={outAngleSliderId} className={classes.sliderLabel}>
+                Out Angle
               </Label>
-              <span className={classes.valueDisplay}>{fromAngle}°</span>
+              <span className={classes.valueDisplay}>{outAngle}°</span>
             </div>
             <Slider
               min={angleMin}
               max={angleMax}
-              defaultValue={fromAngle}
-              id={fromAngleSliderId}
+              defaultValue={outAngle}
+              id={outAngleSliderId}
               onChange={(_, data) => {
-                setFromAngle(data.value);
+                setOutAngle(data.value);
               }}
             />
           </Field>
@@ -198,7 +198,7 @@ export const Default = (props: React.ComponentProps<typeof Rotate>): JSXElement
         </div>
       </div>
 
-      <Rotate visible={visible} axis={axis} fromAngle={fromAngle} duration={duration}>
+      <Rotate visible={visible} axis={axis} outAngle={outAngle} duration={duration}>
         <div className={classes.card}>
           <LoremIpsum />
         </div>

From 6398060598c28c81a982694b43e94ef512f07885 Mon Sep 17 00:00:00 2001
From: Robert Penner <robertpenner@microsoft.com>
Date: Fri, 19 Dec 2025 00:28:36 +0000
Subject: [PATCH 06/23] refactor(motion, Blur): rename fromRadius/toRadius
 params to outRadius/inRadius and update related tests

---
 .../library/src/atoms/blur-atom.test.ts       | 24 +++++++++----------
 .../library/src/atoms/blur-atom.ts            | 16 +++++++------
 .../library/src/components/Blur/Blur.ts       | 14 +++++------
 .../library/src/components/Blur/blur-types.ts |  8 +++----
 .../stories/src/Blur/BlurDemo.stories.tsx     |  4 ++--
 .../stories/src/Blur/BlurRadius.stories.tsx   |  2 +-
 6 files changed, 35 insertions(+), 33 deletions(-)

diff --git a/packages/react-components/react-motion-components-preview/library/src/atoms/blur-atom.test.ts b/packages/react-components/react-motion-components-preview/library/src/atoms/blur-atom.test.ts
index 8940531c0b0b5..a1274a62c5da6 100644
--- a/packages/react-components/react-motion-components-preview/library/src/atoms/blur-atom.test.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/atoms/blur-atom.test.ts
@@ -7,7 +7,7 @@ describe('blurAtom', () => {
       direction: 'enter',
       duration: 300,
       easing: motionTokens.curveEasyEase,
-      fromRadius: '20px',
+      outRadius: '20px',
     });
 
     expect(atom).toMatchObject({
@@ -22,7 +22,7 @@ describe('blurAtom', () => {
       direction: 'exit',
       duration: 250,
       easing: motionTokens.curveAccelerateMin,
-      fromRadius: '15px',
+      outRadius: '15px',
     });
 
     expect(atom).toMatchObject({
@@ -32,18 +32,18 @@ describe('blurAtom', () => {
     });
   });
 
-  it('applies custom toRadius values', () => {
+  it('applies custom inRadius values', () => {
     const atom = blurAtom({
       direction: 'enter',
       duration: 300,
-      fromRadius: '20px',
-      toRadius: '5px',
+      outRadius: '20px',
+      inRadius: '5px',
     });
 
     expect(atom.keyframes).toEqual([{ filter: 'blur(20px)' }, { filter: 'blur(5px)' }]);
   });
 
-  it('uses default fromRadius when not provided', () => {
+  it('uses default outRadius when not provided', () => {
     const atom = blurAtom({
       direction: 'enter',
       duration: 300,
@@ -56,25 +56,25 @@ describe('blurAtom', () => {
     const atom = blurAtom({
       direction: 'enter',
       duration: 300,
-      fromRadius: '5px',
+      outRadius: '5px',
     });
 
     expect(atom.easing).toBe(motionTokens.curveLinear);
   });
 
-  it('handles different CSS units for fromRadius and toRadius', () => {
+  it('handles different CSS units for outRadius and inRadius', () => {
     const atomPx = blurAtom({
       direction: 'enter',
       duration: 300,
-      fromRadius: '8px',
-      toRadius: '2px',
+      outRadius: '8px',
+      inRadius: '2px',
     });
 
     const atomRem = blurAtom({
       direction: 'enter',
       duration: 300,
-      fromRadius: '1rem',
-      toRadius: '0.5rem',
+      outRadius: '1rem',
+      inRadius: '0.5rem',
     });
 
     expect(atomPx.keyframes[0]).toEqual({ filter: 'blur(8px)' });
diff --git a/packages/react-components/react-motion-components-preview/library/src/atoms/blur-atom.ts b/packages/react-components/react-motion-components-preview/library/src/atoms/blur-atom.ts
index 724b3bdc63793..d1dc821d75a32 100644
--- a/packages/react-components/react-motion-components-preview/library/src/atoms/blur-atom.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/atoms/blur-atom.ts
@@ -2,8 +2,10 @@ import { AtomMotion, motionTokens } from '@fluentui/react-motion';
 import { BaseAtomParams } from '../types';
 
 interface BlurAtomParams extends BaseAtomParams {
-  fromRadius?: string;
-  toRadius?: string;
+  /** Blur radius in the out state (exited). Defaults to '10px'. */
+  outRadius?: string;
+  /** Blur radius in the in state (entered). Defaults to '0px'. */
+  inRadius?: string;
 }
 
 /**
@@ -11,8 +13,8 @@ interface BlurAtomParams extends BaseAtomParams {
  * @param direction - The functional direction of the motion: 'enter' or 'exit'.
  * @param duration - The duration of the motion in milliseconds.
  * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
- * @param fromRadius - The blur radius value with units (e.g., '20px', '1rem'). Defaults to '10px'.
- * @param toRadius - The ending blur radius value with units (e.g., '0px', '5px'). Defaults to '0px'.
+ * @param outRadius - Blur radius in the out state (exited) with units (e.g., '20px', '1rem'). Defaults to '10px'.
+ * @param inRadius - Blur radius in the in state (entered) with units (e.g., '0px', '5px'). Defaults to '0px'.
  * @param delay - Time (ms) to delay the animation. Defaults to 0.
  * @returns A motion atom object with filter blur keyframes and the supplied duration and easing.
  */
@@ -21,10 +23,10 @@ export const blurAtom = ({
   duration,
   easing = motionTokens.curveLinear,
   delay = 0,
-  fromRadius = '10px',
-  toRadius = '0px',
+  outRadius = '10px',
+  inRadius = '0px',
 }: BlurAtomParams): AtomMotion => {
-  const keyframes = [{ filter: `blur(${fromRadius})` }, { filter: `blur(${toRadius})` }];
+  const keyframes = [{ filter: `blur(${outRadius})` }, { filter: `blur(${inRadius})` }];
   if (direction === 'exit') {
     keyframes.reverse();
   }
diff --git a/packages/react-components/react-motion-components-preview/library/src/components/Blur/Blur.ts b/packages/react-components/react-motion-components-preview/library/src/components/Blur/Blur.ts
index 6956c46b8ebbd..94bcdd044f75f 100644
--- a/packages/react-components/react-motion-components-preview/library/src/components/Blur/Blur.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/components/Blur/Blur.ts
@@ -12,8 +12,8 @@ import { BlurParams } from './blur-types';
  * @param exitDuration - Time (ms) for the exit transition (blur-out). Defaults to the `duration` param for symmetry.
  * @param exitEasing - Easing curve for the exit transition (blur-out). Defaults to the `curveAccelerateMin` value.
  * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.
- * @param fromRadius - The blur radius with units to animate from. Defaults to `'10px'`.
- * @param toRadius - The blur radius with units to animate to. Defaults to `'0px'`.
+ * @param outRadius - Blur radius in the out state (exited). Defaults to `'10px'`.
+ * @param inRadius - Blur radius in the in state (entered). Defaults to `'0px'`.
  * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.
  */
 const blurPresenceFn: PresenceMotionFn<BlurParams> = ({
@@ -23,19 +23,19 @@ const blurPresenceFn: PresenceMotionFn<BlurParams> = ({
   exitDuration = duration,
   exitEasing = motionTokens.curveAccelerateMin,
   exitDelay = delay,
-  fromRadius = '10px',
-  toRadius = '0px',
+  outRadius = '10px',
+  inRadius = '0px',
   animateOpacity = true,
 }) => {
-  const enterAtoms = [blurAtom({ direction: 'enter', duration, easing, delay, fromRadius, toRadius })];
+  const enterAtoms = [blurAtom({ direction: 'enter', duration, easing, delay, outRadius, inRadius })];
   const exitAtoms = [
     blurAtom({
       direction: 'exit',
       duration: exitDuration,
       easing: exitEasing,
       delay: exitDelay,
-      fromRadius,
-      toRadius,
+      outRadius,
+      inRadius,
     }),
   ];
 
diff --git a/packages/react-components/react-motion-components-preview/library/src/components/Blur/blur-types.ts b/packages/react-components/react-motion-components-preview/library/src/components/Blur/blur-types.ts
index 6f6e82c88241c..ea6e005e68b4c 100644
--- a/packages/react-components/react-motion-components-preview/library/src/components/Blur/blur-types.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/components/Blur/blur-types.ts
@@ -2,9 +2,9 @@ import type { BasePresenceParams, AnimateOpacity } from '../../types';
 
 export type BlurParams = BasePresenceParams &
   AnimateOpacity & {
-    /** The blur radius with units to animate from. Defaults to '10px'. */
-    fromRadius?: string;
+    /** Blur radius in the out state (exited). Defaults to '10px'. */
+    outRadius?: string;
 
-    /** The blur radius with units to animate to. Defaults to '0px'. */
-    toRadius?: string;
+    /** Blur radius in the in state (entered). Defaults to '0px'. */
+    inRadius?: string;
   };
diff --git a/packages/react-components/react-motion-components-preview/stories/src/Blur/BlurDemo.stories.tsx b/packages/react-components/react-motion-components-preview/stories/src/Blur/BlurDemo.stories.tsx
index 4e6b256afe7eb..82ff765ed3c0b 100644
--- a/packages/react-components/react-motion-components-preview/stories/src/Blur/BlurDemo.stories.tsx
+++ b/packages/react-components/react-motion-components-preview/stories/src/Blur/BlurDemo.stories.tsx
@@ -103,12 +103,12 @@ export const LayeredBlurDemo = (): JSXElement => {
           {images.map((image, index) => (
             <div key={image.id} className={classes.imageCard} onClick={() => toggleImage(index)}>
               {/* Background with blur effect - starts blurred, becomes clear when revealed */}
-              <Blur visible={revealedImages[index]} fromRadius="5px" animateOpacity={false}>
+              <Blur visible={revealedImages[index]} outRadius="5px" animateOpacity={false}>
                 <div className={classes.imageBackground} style={{ backgroundImage: image.gradient }} />
               </Blur>
 
               {/* "Click to reveal" button - starts clear, blurs/fades out when clicked */}
-              <Blur visible={!revealedImages[index]} fromRadius="10px" animateOpacity={true}>
+              <Blur visible={!revealedImages[index]} outRadius="10px" animateOpacity={true}>
                 <div className={classes.overlay}>
                   <div className={classes.overlayButton}>Click to reveal</div>
                 </div>
diff --git a/packages/react-components/react-motion-components-preview/stories/src/Blur/BlurRadius.stories.tsx b/packages/react-components/react-motion-components-preview/stories/src/Blur/BlurRadius.stories.tsx
index ddbac8a1fd69f..ffce3fff95165 100644
--- a/packages/react-components/react-motion-components-preview/stories/src/Blur/BlurRadius.stories.tsx
+++ b/packages/react-components/react-motion-components-preview/stories/src/Blur/BlurRadius.stories.tsx
@@ -67,7 +67,7 @@ export const Radius = (): JSXElement => {
           <div key={option.value} className={classes.example}>
             <h4>{option.label}</h4>
             <Button onClick={() => toggleSingle(index)}>{visibleStates[index] ? 'Hide' : 'Show'}</Button>
-            <Blur visible={visibleStates[index]} fromRadius={option.value}>
+            <Blur visible={visibleStates[index]} outRadius={option.value}>
               <div className={classes.card}>
                 <div>
                   Blur radius: {option.value}

From 1b4827437cc2e30ce305ed8a6e8e83432798f5cf Mon Sep 17 00:00:00 2001
From: Robert Penner <robertpenner@microsoft.com>
Date: Fri, 19 Dec 2025 00:32:09 +0000
Subject: [PATCH 07/23] refactor(motion, Collapse): rename fromSize parameter
 to outSize and update related tests

---
 .../src/components/Collapse/Collapse.ts       |  8 ++++----
 .../Collapse/collapse-atoms.test.ts           | 20 +++++++++----------
 .../src/components/Collapse/collapse-atoms.ts | 11 +++++-----
 .../src/components/Collapse/collapse-types.ts |  4 ++--
 .../Collapse/collapsePresenceFn.test.ts       |  6 +++---
 5 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/packages/react-components/react-motion-components-preview/library/src/components/Collapse/Collapse.ts b/packages/react-components/react-motion-components-preview/library/src/components/Collapse/Collapse.ts
index 8636946590396..eb08dbba76200 100644
--- a/packages/react-components/react-motion-components-preview/library/src/components/Collapse/Collapse.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/components/Collapse/Collapse.ts
@@ -27,7 +27,7 @@ import { fadeAtom } from '../../atoms/fade-atom';
  * @param exitOpacityDuration - Time (ms) for the opacity animation during exit. Defaults to `exitSizeDuration` for synchronized timing
  * @param animateOpacity - Whether to animate the opacity. Defaults to `true`
  * @param orientation - The orientation of the size animation. Defaults to `'vertical'` to expand/collapse the height
- * @param fromSize - The starting size for the expand animation. Defaults to `'0px'`
+ * @param outSize - Size in the out state (collapsed). Defaults to `'0px'`
  */
 const collapsePresenceFn: PresenceMotionFn<CollapseParams> = ({
   element,
@@ -52,14 +52,14 @@ const collapsePresenceFn: PresenceMotionFn<CollapseParams> = ({
   // Animation controls
   animateOpacity = true,
   orientation = 'vertical',
-  fromSize = '0px',
+  outSize = '0px',
 }) => {
   // ----- ENTER -----
   // The enter transition is an array of up to 3 motion atoms: size, whitespace and opacity.
   // For enter: size expands first, then opacity fades in after staggerDelay
   const enterAtoms: AtomMotion[] = [
     // Apply global delay to size atom - size expansion starts first
-    sizeEnterAtom({ orientation, duration: sizeDuration, easing, element, fromSize, delay }),
+    sizeEnterAtom({ orientation, duration: sizeDuration, easing, element, outSize, delay }),
     whitespaceAtom({ direction: 'enter', orientation, duration: sizeDuration, easing, delay }),
   ];
   // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.
@@ -85,7 +85,7 @@ const collapsePresenceFn: PresenceMotionFn<CollapseParams> = ({
       easing: exitEasing,
       element,
       delay: exitDelay + exitStaggerDelay,
-      fromSize,
+      outSize,
     }),
     whitespaceAtom({
       direction: 'exit',
diff --git a/packages/react-components/react-motion-components-preview/library/src/components/Collapse/collapse-atoms.test.ts b/packages/react-components/react-motion-components-preview/library/src/components/Collapse/collapse-atoms.test.ts
index d42ebca0633b2..f2b6e7d75d86d 100644
--- a/packages/react-components/react-motion-components-preview/library/src/components/Collapse/collapse-atoms.test.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/components/Collapse/collapse-atoms.test.ts
@@ -24,7 +24,7 @@ describe('collapse atoms', () => {
         duration: 300,
         easing: 'ease-out',
         element: mockElement,
-        fromSize: '0px',
+        outSize: '0px',
       });
 
       // Should expand from 0px to measured height (100px), then to unset
@@ -47,7 +47,7 @@ describe('collapse atoms', () => {
         duration: 250,
         easing: 'ease-in',
         element: mockElement,
-        fromSize: '5px',
+        outSize: '5px',
       });
 
       // Should expand from 5px to measured width (200px), then to unset
@@ -64,13 +64,13 @@ describe('collapse atoms', () => {
       });
     });
 
-    it('handles custom fromSize values', () => {
+    it('handles custom outSize values', () => {
       const atom = sizeEnterAtom({
         orientation: 'vertical',
         duration: 200,
         easing: motionTokens.curveLinear,
         element: mockElement,
-        fromSize: '10px',
+        outSize: '10px',
       });
 
       expect(atom.keyframes[0]).toMatchObject({ maxHeight: '10px' });
@@ -123,7 +123,7 @@ describe('collapse atoms', () => {
         duration: 300,
         easing: 'ease-in',
         element: mockElement,
-        fromSize: '0px',
+        outSize: '0px',
       });
 
       // Should collapse from measured height (100px) to 0px
@@ -146,7 +146,7 @@ describe('collapse atoms', () => {
         duration: 250,
         easing: 'ease-out',
         element: mockElement,
-        fromSize: '5px',
+        outSize: '5px',
       });
 
       // Should collapse from measured width (200px) to 5px
@@ -163,13 +163,13 @@ describe('collapse atoms', () => {
       });
     });
 
-    it('handles custom fromSize values', () => {
+    it('handles custom outSize values', () => {
       const atom = sizeExitAtom({
         orientation: 'vertical',
         duration: 200,
         easing: motionTokens.curveLinear,
         element: mockElement,
-        fromSize: '10px',
+        outSize: '10px',
       });
 
       expect(atom.keyframes[1]).toMatchObject({ maxHeight: '10px' });
@@ -417,7 +417,7 @@ describe('collapse atoms', () => {
         duration: 300,
         easing: 'ease-out',
         element: mockElement,
-        fromSize: '5px',
+        outSize: '5px',
       });
 
       const exitAtom = sizeExitAtom({
@@ -425,7 +425,7 @@ describe('collapse atoms', () => {
         duration: 300,
         easing: 'ease-out',
         element: mockElement,
-        fromSize: '5px',
+        outSize: '5px',
       });
 
       // Enter expands from 5px to 100px
diff --git a/packages/react-components/react-motion-components-preview/library/src/components/Collapse/collapse-atoms.ts b/packages/react-components/react-motion-components-preview/library/src/components/Collapse/collapse-atoms.ts
index 42a1ce80e6907..bb55861f87489 100644
--- a/packages/react-components/react-motion-components-preview/library/src/components/Collapse/collapse-atoms.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/components/Collapse/collapse-atoms.ts
@@ -16,7 +16,8 @@ interface SizeEnterAtomParams {
   duration: number;
   easing: string;
   element: HTMLElement;
-  fromSize?: string;
+  /** Size in the out state (collapsed). Defaults to '0'. */
+  outSize?: string;
   delay?: number;
 }
 
@@ -25,14 +26,14 @@ export const sizeEnterAtom = ({
   duration,
   easing,
   element,
-  fromSize = '0',
+  outSize = '0',
   delay = 0,
 }: SizeEnterAtomParams): AtomMotion => {
   const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);
 
   return {
     keyframes: [
-      { [sizeName]: fromSize, [overflowName]: 'hidden' },
+      { [sizeName]: outSize, [overflowName]: 'hidden' },
       { [sizeName]: toSize, offset: 0.9999, [overflowName]: 'hidden' },
       { [sizeName]: 'unset', [overflowName]: 'unset' },
     ],
@@ -53,14 +54,14 @@ export const sizeExitAtom = ({
   easing,
   element,
   delay = 0,
-  fromSize = '0',
+  outSize = '0',
 }: SizeExitAtomParams): AtomMotion => {
   const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);
 
   return {
     keyframes: [
       { [sizeName]: toSize, [overflowName]: 'hidden' },
-      { [sizeName]: fromSize, [overflowName]: 'hidden' },
+      { [sizeName]: outSize, [overflowName]: 'hidden' },
     ],
     duration,
     easing,
diff --git a/packages/react-components/react-motion-components-preview/library/src/components/Collapse/collapse-types.ts b/packages/react-components/react-motion-components-preview/library/src/components/Collapse/collapse-types.ts
index 2da251dac5de9..f49ca6d08ae36 100644
--- a/packages/react-components/react-motion-components-preview/library/src/components/Collapse/collapse-types.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/components/Collapse/collapse-types.ts
@@ -25,8 +25,8 @@ export type CollapseParams = BasePresenceParams &
     /** The orientation of the size animation. Defaults to `'vertical'` to expand/collapse the height. */
     orientation?: CollapseOrientation;
 
-    /** The starting size for the expand animation. Defaults to `'0px'`. */
-    fromSize?: string;
+    /** Size in the out state (collapsed). Defaults to `'0px'`. */
+    outSize?: string;
 
     /**
      * Time (ms) to delay the inner stagger between size and opacity animations.
diff --git a/packages/react-components/react-motion-components-preview/library/src/components/Collapse/collapsePresenceFn.test.ts b/packages/react-components/react-motion-components-preview/library/src/components/Collapse/collapsePresenceFn.test.ts
index 890de50249d66..d1facefff4df5 100644
--- a/packages/react-components/react-motion-components-preview/library/src/components/Collapse/collapsePresenceFn.test.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/components/Collapse/collapsePresenceFn.test.ts
@@ -257,13 +257,13 @@ describe('collapsePresenceFn', () => {
       expect(motion.enter[2]).toMatchObject({ duration: 0, delay: 0 });
     });
 
-    it('handles custom fromSize values', () => {
+    it('handles custom outSize values', () => {
       const motion = collapsePresenceFn({
         element: mockElement,
-        fromSize: '10px',
+        outSize: '10px',
       });
 
-      // Size atoms should use the custom fromSize
+      // Size atoms should use the custom outSize
       expect(motion.enter[0].keyframes[0]).toMatchObject({ maxHeight: '10px' });
       expect(motion.exit[1].keyframes[1]).toMatchObject({ maxHeight: '10px' });
     });

From e1513da47f45e8f97191b19a2bf5057a98f8d9d4 Mon Sep 17 00:00:00 2001
From: Robert Penner <robertpenner@microsoft.com>
Date: Fri, 19 Dec 2025 00:34:55 +0000
Subject: [PATCH 08/23] refactor(motion): replace "in the [in|out] state" with
 "for the..."

---
 .../library/src/atoms/blur-atom.ts               |  8 ++++----
 .../library/src/atoms/fade-atom.ts               |  8 ++++----
 .../library/src/atoms/rotate-atom.ts             |  8 ++++----
 .../library/src/atoms/scale-atom.ts              |  8 ++++----
 .../library/src/atoms/slide-atom.ts              | 16 ++++++++--------
 .../library/src/components/Blur/Blur.ts          |  4 ++--
 .../library/src/components/Blur/blur-types.ts    |  4 ++--
 .../library/src/components/Collapse/Collapse.ts  |  2 +-
 .../src/components/Collapse/collapse-atoms.ts    |  2 +-
 .../src/components/Collapse/collapse-types.ts    |  2 +-
 .../library/src/components/Fade/Fade.ts          |  4 ++--
 .../library/src/components/Fade/fade-types.ts    |  4 ++--
 .../library/src/components/Rotate/Rotate.ts      |  4 ++--
 .../src/components/Rotate/rotate-types.ts        |  4 ++--
 .../library/src/components/Scale/Scale.ts        |  4 ++--
 .../library/src/components/Scale/scale-types.ts  |  4 ++--
 .../library/src/components/Slide/Slide.ts        |  8 ++++----
 .../library/src/components/Slide/slide-types.ts  |  8 ++++----
 18 files changed, 51 insertions(+), 51 deletions(-)

diff --git a/packages/react-components/react-motion-components-preview/library/src/atoms/blur-atom.ts b/packages/react-components/react-motion-components-preview/library/src/atoms/blur-atom.ts
index d1dc821d75a32..e079375af5a28 100644
--- a/packages/react-components/react-motion-components-preview/library/src/atoms/blur-atom.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/atoms/blur-atom.ts
@@ -2,9 +2,9 @@ import { AtomMotion, motionTokens } from '@fluentui/react-motion';
 import { BaseAtomParams } from '../types';
 
 interface BlurAtomParams extends BaseAtomParams {
-  /** Blur radius in the out state (exited). Defaults to '10px'. */
+  /** Blur radius for the out state (exited). Defaults to '10px'. */
   outRadius?: string;
-  /** Blur radius in the in state (entered). Defaults to '0px'. */
+  /** Blur radius for the in state (entered). Defaults to '0px'. */
   inRadius?: string;
 }
 
@@ -13,8 +13,8 @@ interface BlurAtomParams extends BaseAtomParams {
  * @param direction - The functional direction of the motion: 'enter' or 'exit'.
  * @param duration - The duration of the motion in milliseconds.
  * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
- * @param outRadius - Blur radius in the out state (exited) with units (e.g., '20px', '1rem'). Defaults to '10px'.
- * @param inRadius - Blur radius in the in state (entered) with units (e.g., '0px', '5px'). Defaults to '0px'.
+ * @param outRadius - Blur radius for the out state (exited) with units (e.g., '20px', '1rem'). Defaults to '10px'.
+ * @param inRadius - Blur radius for the in state (entered) with units (e.g., '0px', '5px'). Defaults to '0px'.
  * @param delay - Time (ms) to delay the animation. Defaults to 0.
  * @returns A motion atom object with filter blur keyframes and the supplied duration and easing.
  */
diff --git a/packages/react-components/react-motion-components-preview/library/src/atoms/fade-atom.ts b/packages/react-components/react-motion-components-preview/library/src/atoms/fade-atom.ts
index a2200aae812be..371c59fd257f6 100644
--- a/packages/react-components/react-motion-components-preview/library/src/atoms/fade-atom.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/atoms/fade-atom.ts
@@ -5,10 +5,10 @@ interface FadeAtomParams extends BaseAtomParams {
   /** Defines how values are applied before and after execution. Defaults to 'both'. */
   fill?: FillMode;
 
-  /** Opacity in the out state (exited). Defaults to 0. */
+  /** Opacity for the out state (exited). Defaults to 0. */
   outOpacity?: number;
 
-  /** Opacity in the in state (entered). Defaults to 1. */
+  /** Opacity for the in state (entered). Defaults to 1. */
   inOpacity?: number;
 }
 
@@ -18,8 +18,8 @@ interface FadeAtomParams extends BaseAtomParams {
  * @param duration - The duration of the motion in milliseconds.
  * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
  * @param delay - The delay before the motion starts. Defaults to 0.
- * @param outOpacity - Opacity in the out state (exited). Defaults to 0.
- * @param inOpacity - Opacity in the in state (entered). Defaults to 1.
+ * @param outOpacity - Opacity for the out state (exited). Defaults to 0.
+ * @param inOpacity - Opacity for the in state (entered). Defaults to 1.
  * @returns A motion atom object with opacity keyframes and the supplied duration and easing.
  */
 export const fadeAtom = ({
diff --git a/packages/react-components/react-motion-components-preview/library/src/atoms/rotate-atom.ts b/packages/react-components/react-motion-components-preview/library/src/atoms/rotate-atom.ts
index 84daa19c84bd1..d3f35e218d608 100644
--- a/packages/react-components/react-motion-components-preview/library/src/atoms/rotate-atom.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/atoms/rotate-atom.ts
@@ -6,9 +6,9 @@ type Axis3D = NonNullable<RotateParams['axis']>;
 
 interface RotateAtomParams extends BaseAtomParams {
   axis?: Axis3D;
-  /** Rotation angle in the out state (exited) in degrees. Defaults to -90. */
+  /** Rotation angle for the out state (exited) in degrees. Defaults to -90. */
   outAngle?: number;
-  /** Rotation angle in the in state (entered) in degrees. Defaults to 0. */
+  /** Rotation angle for the in state (entered) in degrees. Defaults to 0. */
   inAngle?: number;
 }
 
@@ -22,8 +22,8 @@ const createRotateValue = (axis: Axis3D, angle: number): string => {
  * @param duration - The duration of the motion in milliseconds.
  * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
  * @param axis - The axis of rotation: 'x', 'y', or 'z'. Defaults to 'y'.
- * @param outAngle - Rotation angle in the out state (exited) in degrees. Defaults to -90.
- * @param inAngle - Rotation angle in the in state (entered) in degrees. Defaults to 0.
+ * @param outAngle - Rotation angle for the out state (exited) in degrees. Defaults to -90.
+ * @param inAngle - Rotation angle for the in state (entered) in degrees. Defaults to 0.
  * @param delay - Time (ms) to delay the animation. Defaults to 0.
  * @returns A motion atom object with rotate keyframes and the supplied duration and easing.
  */
diff --git a/packages/react-components/react-motion-components-preview/library/src/atoms/scale-atom.ts b/packages/react-components/react-motion-components-preview/library/src/atoms/scale-atom.ts
index 46b95fdef5e63..c2e8ee8bf6948 100644
--- a/packages/react-components/react-motion-components-preview/library/src/atoms/scale-atom.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/atoms/scale-atom.ts
@@ -2,9 +2,9 @@ import { AtomMotion, motionTokens } from '@fluentui/react-motion';
 import { BaseAtomParams } from '../types';
 
 interface ScaleAtomParams extends BaseAtomParams {
-  /** Scale in the out state (exited). Defaults to 0.9. */
+  /** Scale for the out state (exited). Defaults to 0.9. */
   outScale?: number;
-  /** Scale in the in state (entered). Defaults to 1. */
+  /** Scale for the in state (entered). Defaults to 1. */
   inScale?: number;
 }
 
@@ -13,8 +13,8 @@ interface ScaleAtomParams extends BaseAtomParams {
  * @param direction - The functional direction of the motion: 'enter' or 'exit'.
  * @param duration - The duration of the motion in milliseconds.
  * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
- * @param outScale - Scale in the out state (exited). Defaults to 0.9.
- * @param inScale - Scale in the in state (entered). Defaults to 1.
+ * @param outScale - Scale for the out state (exited). Defaults to 0.9.
+ * @param inScale - Scale for the in state (entered). Defaults to 1.
  * @param delay - Time (ms) to delay the animation. Defaults to 0.
  * @returns A motion atom object with scale keyframes and the supplied duration and easing.
  */
diff --git a/packages/react-components/react-motion-components-preview/library/src/atoms/slide-atom.ts b/packages/react-components/react-motion-components-preview/library/src/atoms/slide-atom.ts
index 1171b56e53c81..928e02fd67260 100644
--- a/packages/react-components/react-motion-components-preview/library/src/atoms/slide-atom.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/atoms/slide-atom.ts
@@ -2,13 +2,13 @@ import { AtomMotion, motionTokens } from '@fluentui/react-motion';
 import { BaseAtomParams } from '../types';
 
 interface SlideAtomParams extends BaseAtomParams {
-  /** X translate in the out state (exited). Defaults to '0px'. */
+  /** X translate for the out state (exited). Defaults to '0px'. */
   outX?: string;
-  /** Y translate in the out state (exited). Defaults to '0px'. */
+  /** Y translate for the out state (exited). Defaults to '0px'. */
   outY?: string;
-  /** X translate in the in state (entered). Defaults to '0px'. */
+  /** X translate for the in state (entered). Defaults to '0px'. */
   inX?: string;
-  /** Y translate in the in state (entered). Defaults to '0px'. */
+  /** Y translate for the in state (entered). Defaults to '0px'. */
   inY?: string;
 }
 
@@ -17,10 +17,10 @@ interface SlideAtomParams extends BaseAtomParams {
  * @param direction - The functional direction of the motion: 'enter' or 'exit'.
  * @param duration - The duration of the motion in milliseconds.
  * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
- * @param outX - X translate in the out state (exited) with units (e.g., '50px', '100%'). Defaults to '0px'.
- * @param outY - Y translate in the out state (exited) with units (e.g., '50px', '100%'). Defaults to '0px'.
- * @param inX - X translate in the in state (entered) with units (e.g., '5px', '10%'). Defaults to '0px'.
- * @param inY - Y translate in the in state (entered) with units (e.g., '5px', '10%'). Defaults to '0px'.
+ * @param outX - X translate for the out state (exited) with units (e.g., '50px', '100%'). Defaults to '0px'.
+ * @param outY - Y translate for the out state (exited) with units (e.g., '50px', '100%'). Defaults to '0px'.
+ * @param inX - X translate for the in state (entered) with units (e.g., '5px', '10%'). Defaults to '0px'.
+ * @param inY - Y translate for the in state (entered) with units (e.g., '5px', '10%'). Defaults to '0px'.
  * @param delay - Time (ms) to delay the animation. Defaults to 0.
  * @returns A motion atom object with translate keyframes and the supplied duration and easing.
  */
diff --git a/packages/react-components/react-motion-components-preview/library/src/components/Blur/Blur.ts b/packages/react-components/react-motion-components-preview/library/src/components/Blur/Blur.ts
index 94bcdd044f75f..93311e8a63041 100644
--- a/packages/react-components/react-motion-components-preview/library/src/components/Blur/Blur.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/components/Blur/Blur.ts
@@ -12,8 +12,8 @@ import { BlurParams } from './blur-types';
  * @param exitDuration - Time (ms) for the exit transition (blur-out). Defaults to the `duration` param for symmetry.
  * @param exitEasing - Easing curve for the exit transition (blur-out). Defaults to the `curveAccelerateMin` value.
  * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.
- * @param outRadius - Blur radius in the out state (exited). Defaults to `'10px'`.
- * @param inRadius - Blur radius in the in state (entered). Defaults to `'0px'`.
+ * @param outRadius - Blur radius for the out state (exited). Defaults to `'10px'`.
+ * @param inRadius - Blur radius for the in state (entered). Defaults to `'0px'`.
  * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.
  */
 const blurPresenceFn: PresenceMotionFn<BlurParams> = ({
diff --git a/packages/react-components/react-motion-components-preview/library/src/components/Blur/blur-types.ts b/packages/react-components/react-motion-components-preview/library/src/components/Blur/blur-types.ts
index ea6e005e68b4c..1269a8b8d9b69 100644
--- a/packages/react-components/react-motion-components-preview/library/src/components/Blur/blur-types.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/components/Blur/blur-types.ts
@@ -2,9 +2,9 @@ import type { BasePresenceParams, AnimateOpacity } from '../../types';
 
 export type BlurParams = BasePresenceParams &
   AnimateOpacity & {
-    /** Blur radius in the out state (exited). Defaults to '10px'. */
+    /** Blur radius for the out state (exited). Defaults to '10px'. */
     outRadius?: string;
 
-    /** Blur radius in the in state (entered). Defaults to '0px'. */
+    /** Blur radius for the in state (entered). Defaults to '0px'. */
     inRadius?: string;
   };
diff --git a/packages/react-components/react-motion-components-preview/library/src/components/Collapse/Collapse.ts b/packages/react-components/react-motion-components-preview/library/src/components/Collapse/Collapse.ts
index eb08dbba76200..9ab2bbcc71e5c 100644
--- a/packages/react-components/react-motion-components-preview/library/src/components/Collapse/Collapse.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/components/Collapse/Collapse.ts
@@ -27,7 +27,7 @@ import { fadeAtom } from '../../atoms/fade-atom';
  * @param exitOpacityDuration - Time (ms) for the opacity animation during exit. Defaults to `exitSizeDuration` for synchronized timing
  * @param animateOpacity - Whether to animate the opacity. Defaults to `true`
  * @param orientation - The orientation of the size animation. Defaults to `'vertical'` to expand/collapse the height
- * @param outSize - Size in the out state (collapsed). Defaults to `'0px'`
+ * @param outSize - Size for the out state (collapsed). Defaults to `'0px'`
  */
 const collapsePresenceFn: PresenceMotionFn<CollapseParams> = ({
   element,
diff --git a/packages/react-components/react-motion-components-preview/library/src/components/Collapse/collapse-atoms.ts b/packages/react-components/react-motion-components-preview/library/src/components/Collapse/collapse-atoms.ts
index bb55861f87489..ac037bf720bc8 100644
--- a/packages/react-components/react-motion-components-preview/library/src/components/Collapse/collapse-atoms.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/components/Collapse/collapse-atoms.ts
@@ -16,7 +16,7 @@ interface SizeEnterAtomParams {
   duration: number;
   easing: string;
   element: HTMLElement;
-  /** Size in the out state (collapsed). Defaults to '0'. */
+  /** Size for the out state (collapsed). Defaults to '0'. */
   outSize?: string;
   delay?: number;
 }
diff --git a/packages/react-components/react-motion-components-preview/library/src/components/Collapse/collapse-types.ts b/packages/react-components/react-motion-components-preview/library/src/components/Collapse/collapse-types.ts
index f49ca6d08ae36..56cb7f91d3c96 100644
--- a/packages/react-components/react-motion-components-preview/library/src/components/Collapse/collapse-types.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/components/Collapse/collapse-types.ts
@@ -25,7 +25,7 @@ export type CollapseParams = BasePresenceParams &
     /** The orientation of the size animation. Defaults to `'vertical'` to expand/collapse the height. */
     orientation?: CollapseOrientation;
 
-    /** Size in the out state (collapsed). Defaults to `'0px'`. */
+    /** Size for the out state (collapsed). Defaults to `'0px'`. */
     outSize?: string;
 
     /**
diff --git a/packages/react-components/react-motion-components-preview/library/src/components/Fade/Fade.ts b/packages/react-components/react-motion-components-preview/library/src/components/Fade/Fade.ts
index 81dfa0c93a09c..b7d205a20d41b 100644
--- a/packages/react-components/react-motion-components-preview/library/src/components/Fade/Fade.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/components/Fade/Fade.ts
@@ -16,8 +16,8 @@ import { FadeParams } from './fade-types';
  * @param exitDuration - Time (ms) for the exit transition (fade-out). Defaults to the `duration` param for symmetry.
  * @param exitEasing - Easing curve for the exit transition (fade-out). Defaults to the `easing` param for symmetry.
  * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.
- * @param outOpacity - Opacity in the out state (exited). Defaults to 0.
- * @param inOpacity - Opacity in the in state (entered). Defaults to 1.
+ * @param outOpacity - Opacity for the out state (exited). Defaults to 0.
+ * @param inOpacity - Opacity for the in state (entered). Defaults to 1.
  */
 export const fadePresenceFn: PresenceMotionFn<FadeParams> = ({
   duration = motionTokens.durationNormal,
diff --git a/packages/react-components/react-motion-components-preview/library/src/components/Fade/fade-types.ts b/packages/react-components/react-motion-components-preview/library/src/components/Fade/fade-types.ts
index 84ceaecbf77a5..7e239d7a68e6e 100644
--- a/packages/react-components/react-motion-components-preview/library/src/components/Fade/fade-types.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/components/Fade/fade-types.ts
@@ -1,9 +1,9 @@
 import type { BasePresenceParams } from '../../types';
 
 export type FadeParams = BasePresenceParams & {
-  /** Opacity in the out state (exited). Defaults to 0. */
+  /** Opacity for the out state (exited). Defaults to 0. */
   outOpacity?: number;
 
-  /** Opacity in the in state (entered). Defaults to 1. */
+  /** Opacity for the in state (entered). Defaults to 1. */
   inOpacity?: number;
 };
diff --git a/packages/react-components/react-motion-components-preview/library/src/components/Rotate/Rotate.ts b/packages/react-components/react-motion-components-preview/library/src/components/Rotate/Rotate.ts
index 9b58d6b29c48f..b6b75f56364b8 100644
--- a/packages/react-components/react-motion-components-preview/library/src/components/Rotate/Rotate.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/components/Rotate/Rotate.ts
@@ -13,8 +13,8 @@ import { RotateParams } from './rotate-types';
  * @param exitEasing - Easing curve for the exit transition (rotate-out). Defaults to the `curveAccelerateMax` value.
  * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.
  * @param axis - The axis of rotation: 'x', 'y', or 'z'. Defaults to 'z'.
- * @param outAngle - Rotation angle in the out state (exited) in degrees. Defaults to -90.
- * @param inAngle - Rotation angle in the in state (entered) in degrees. Defaults to 0.
+ * @param outAngle - Rotation angle for the out state (exited) in degrees. Defaults to -90.
+ * @param inAngle - Rotation angle for the in state (entered) in degrees. Defaults to 0.
  * @param animateOpacity - Whether to animate the opacity during the rotation. Defaults to `true`.
  */
 const rotatePresenceFn: PresenceMotionFn<RotateParams> = ({
diff --git a/packages/react-components/react-motion-components-preview/library/src/components/Rotate/rotate-types.ts b/packages/react-components/react-motion-components-preview/library/src/components/Rotate/rotate-types.ts
index ee164a074af8e..175a0511803ac 100644
--- a/packages/react-components/react-motion-components-preview/library/src/components/Rotate/rotate-types.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/components/Rotate/rotate-types.ts
@@ -11,13 +11,13 @@ export type RotateParams = BasePresenceParams &
     axis?: Axis3D;
 
     /**
-     * Rotation angle in the out state (exited) in degrees.
+     * Rotation angle for the out state (exited) in degrees.
      * Defaults to -90.
      */
     outAngle?: number;
 
     /**
-     * Rotation angle in the in state (entered) in degrees.
+     * Rotation angle for the in state (entered) in degrees.
      * Defaults to 0.
      */
     inAngle?: number;
diff --git a/packages/react-components/react-motion-components-preview/library/src/components/Scale/Scale.ts b/packages/react-components/react-motion-components-preview/library/src/components/Scale/Scale.ts
index 417d9c8e54c98..a87e3357632fb 100644
--- a/packages/react-components/react-motion-components-preview/library/src/components/Scale/Scale.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/components/Scale/Scale.ts
@@ -17,8 +17,8 @@ import { ScaleParams } from './scale-types';
  * @param exitDuration - Time (ms) for the exit transition (scale-out). Defaults to the `durationNormal` value (200 ms).
  * @param exitEasing - Easing curve for the exit transition (scale-out). Defaults to the `curveAccelerateMax` value.
  * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.
- * @param outScale - Scale in the out state (exited). Defaults to `0.9`.
- * @param inScale - Scale in the in state (entered). Defaults to `1`.
+ * @param outScale - Scale for the out state (exited). Defaults to `0.9`.
+ * @param inScale - Scale for the in state (entered). Defaults to `1`.
  * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.
  */
 const scalePresenceFn: PresenceMotionFn<ScaleParams> = ({
diff --git a/packages/react-components/react-motion-components-preview/library/src/components/Scale/scale-types.ts b/packages/react-components/react-motion-components-preview/library/src/components/Scale/scale-types.ts
index 44a1c6e1ae199..20065d6bb8f75 100644
--- a/packages/react-components/react-motion-components-preview/library/src/components/Scale/scale-types.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/components/Scale/scale-types.ts
@@ -2,9 +2,9 @@ import type { BasePresenceParams, AnimateOpacity } from '../../types';
 
 export type ScaleParams = BasePresenceParams &
   AnimateOpacity & {
-    /** Scale in the out state (exited). Defaults to `0.9`. */
+    /** Scale for the out state (exited). Defaults to `0.9`. */
     outScale?: number;
 
-    /** Scale in the in state (entered). Defaults to `1`. */
+    /** Scale for the in state (entered). Defaults to `1`. */
     inScale?: number;
   };
diff --git a/packages/react-components/react-motion-components-preview/library/src/components/Slide/Slide.ts b/packages/react-components/react-motion-components-preview/library/src/components/Slide/Slide.ts
index c640af2e78331..24a77c0e0ca81 100644
--- a/packages/react-components/react-motion-components-preview/library/src/components/Slide/Slide.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/components/Slide/Slide.ts
@@ -17,10 +17,10 @@ import { SlideParams } from './slide-types';
  * @param exitDuration - Time (ms) for the exit transition (slide-out). Defaults to the `duration` param for symmetry.
  * @param exitEasing - Easing curve for the exit transition (slide-out). Defaults to the `curveAccelerateMid` value.
  * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.
- * @param outX - X translate in the out state (exited). Defaults to `'0px'`.
- * @param outY - Y translate in the out state (exited). Defaults to `'0px'`.
- * @param inX - X translate in the in state (entered). Defaults to `'0px'`.
- * @param inY - Y translate in the in state (entered). Defaults to `'0px'`.
+ * @param outX - X translate for the out state (exited). Defaults to `'0px'`.
+ * @param outY - Y translate for the out state (exited). Defaults to `'0px'`.
+ * @param inX - X translate for the in state (entered). Defaults to `'0px'`.
+ * @param inY - Y translate for the in state (entered). Defaults to `'0px'`.
  * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.
  */
 const slidePresenceFn: PresenceMotionFn<SlideParams> = ({
diff --git a/packages/react-components/react-motion-components-preview/library/src/components/Slide/slide-types.ts b/packages/react-components/react-motion-components-preview/library/src/components/Slide/slide-types.ts
index 7f72c99e9703d..9bdc186ca9201 100644
--- a/packages/react-components/react-motion-components-preview/library/src/components/Slide/slide-types.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/components/Slide/slide-types.ts
@@ -2,15 +2,15 @@ import type { BasePresenceParams, AnimateOpacity } from '../../types';
 
 export type SlideParams = BasePresenceParams &
   AnimateOpacity & {
-    /** X translate in the out state (exited). Defaults to `'0px'`. */
+    /** X translate for the out state (exited). Defaults to `'0px'`. */
     outX?: string;
 
-    /** Y translate in the out state (exited). Defaults to `'0px'`. */
+    /** Y translate for the out state (exited). Defaults to `'0px'`. */
     outY?: string;
 
-    /** X translate in the in state (entered). Defaults to `'0px'`. */
+    /** X translate for the in state (entered). Defaults to `'0px'`. */
     inX?: string;
 
-    /** Y translate in the in state (entered). Defaults to `'0px'`. */
+    /** Y translate for the in state (entered). Defaults to `'0px'`. */
     inY?: string;
   };

From 159df9fd98f861582ec76af0a4b1407d9c6fa370 Mon Sep 17 00:00:00 2001
From: Robert Penner <robertpenner@microsoft.com>
Date: Fri, 19 Dec 2025 00:59:52 +0000
Subject: [PATCH 09/23] chore: yarn change

---
 ...nents-preview-3617eb57-b9e9-4358-857b-effc8fe8bb7f.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-react-motion-components-preview-3617eb57-b9e9-4358-857b-effc8fe8bb7f.json

diff --git a/change/@fluentui-react-motion-components-preview-3617eb57-b9e9-4358-857b-effc8fe8bb7f.json b/change/@fluentui-react-motion-components-preview-3617eb57-b9e9-4358-857b-effc8fe8bb7f.json
new file mode 100644
index 0000000000000..7ef2d391cc1e3
--- /dev/null
+++ b/change/@fluentui-react-motion-components-preview-3617eb57-b9e9-4358-857b-effc8fe8bb7f.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "refactor(motion-components): improve parameter naming from 'from/to' to 'out/in'",
+  "packageName": "@fluentui/react-motion-components-preview",
+  "email": "robertpenner@microsoft.com",
+  "dependentChangeType": "patch"
+}

From 6213f109b1ea9d6dc20abb385dca07679db175e2 Mon Sep 17 00:00:00 2001
From: Robert Penner <robertpenner@microsoft.com>
Date: Fri, 19 Dec 2025 01:07:12 +0000
Subject: [PATCH 10/23] chore: update .api.md

---
 .../react-motion-components-preview.api.md    | 36 +++++++++----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/packages/react-components/react-motion-components-preview/library/etc/react-motion-components-preview.api.md b/packages/react-components/react-motion-components-preview/library/etc/react-motion-components-preview.api.md
index d8a1e912712fa..8c685c4a8c5b1 100644
--- a/packages/react-components/react-motion-components-preview/library/etc/react-motion-components-preview.api.md
+++ b/packages/react-components/react-motion-components-preview/library/etc/react-motion-components-preview.api.md
@@ -14,12 +14,12 @@ import * as React_2 from 'react';
 export const Blur: PresenceComponent<BlurParams>;
 
 // @public
-export const blurAtom: ({ direction, duration, easing, delay, fromRadius, toRadius, }: BlurAtomParams) => AtomMotion;
+export const blurAtom: ({ direction, duration, easing, delay, outRadius, inRadius, }: BlurAtomParams) => AtomMotion;
 
 // @public (undocumented)
 export type BlurParams = BasePresenceParams & AnimateOpacity & {
-    fromRadius?: string;
-    toRadius?: string;
+    outRadius?: string;
+    inRadius?: string;
 };
 
 // @public
@@ -39,7 +39,7 @@ export type CollapseDurations = {
 // @public (undocumented)
 export type CollapseParams = BasePresenceParams & AnimateOpacity & CollapseDurations & {
     orientation?: CollapseOrientation;
-    fromSize?: string;
+    outSize?: string;
     staggerDelay?: number;
     exitStaggerDelay?: number;
 };
@@ -54,12 +54,12 @@ export const CollapseSnappy: PresenceComponent<CollapseParams>;
 export const Fade: PresenceComponent<FadeParams>;
 
 // @public
-export const fadeAtom: ({ direction, duration, easing, delay, fromOpacity, toOpacity, }: FadeAtomParams) => AtomMotion;
+export const fadeAtom: ({ direction, duration, easing, delay, outOpacity, inOpacity, }: FadeAtomParams) => AtomMotion;
 
 // @public (undocumented)
 export type FadeParams = BasePresenceParams & {
-    fromOpacity?: number;
-    toOpacity?: number;
+    outOpacity?: number;
+    inOpacity?: number;
 };
 
 // @public (undocumented)
@@ -72,25 +72,25 @@ export const FadeSnappy: PresenceComponent<FadeParams>;
 export const Rotate: PresenceComponent<RotateParams>;
 
 // @public
-export const rotateAtom: ({ direction, duration, easing, delay, axis, fromAngle, toAngle, }: RotateAtomParams) => AtomMotion;
+export const rotateAtom: ({ direction, duration, easing, delay, axis, outAngle, inAngle, }: RotateAtomParams) => AtomMotion;
 
 // @public (undocumented)
 export type RotateParams = BasePresenceParams & AnimateOpacity & {
     axis?: Axis3D;
-    fromAngle?: number;
-    toAngle?: number;
+    outAngle?: number;
+    inAngle?: number;
 };
 
 // @public
 export const Scale: PresenceComponent<ScaleParams>;
 
 // @public
-export const scaleAtom: ({ direction, duration, easing, delay, fromScale, toScale, }: ScaleAtomParams) => AtomMotion;
+export const scaleAtom: ({ direction, duration, easing, delay, outScale, inScale, }: ScaleAtomParams) => AtomMotion;
 
 // @public (undocumented)
 export type ScaleParams = BasePresenceParams & AnimateOpacity & {
-    fromScale?: number;
-    toScale?: number;
+    outScale?: number;
+    inScale?: number;
 };
 
 // @public (undocumented)
@@ -103,14 +103,14 @@ export const ScaleSnappy: PresenceComponent<ScaleParams>;
 export const Slide: PresenceComponent<SlideParams>;
 
 // @public
-export const slideAtom: ({ direction, duration, easing, delay, fromX, fromY, toX, toY, }: SlideAtomParams) => AtomMotion;
+export const slideAtom: ({ direction, duration, easing, delay, outX, outY, inX, inY, }: SlideAtomParams) => AtomMotion;
 
 // @public (undocumented)
 export type SlideParams = BasePresenceParams & AnimateOpacity & {
-    fromX?: string;
-    fromY?: string;
-    toX?: string;
-    toY?: string;
+    outX?: string;
+    outY?: string;
+    inX?: string;
+    inY?: string;
 };
 
 // @public (undocumented)

From 7580299928f316e92f799fbe4d058e698d4daa72 Mon Sep 17 00:00:00 2001
From: Robert Penner <robertpenner@microsoft.com>
Date: Fri, 19 Dec 2025 01:14:21 +0000
Subject: [PATCH 11/23] refactor(motion, SlideCardsDemo): simplify spring
 settle and anticipation curves

---
 .../stories/src/Slide/SlideCardsDemo.stories.tsx      | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideCardsDemo.stories.tsx b/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideCardsDemo.stories.tsx
index 1cfbcddc94ee3..d5ee32016303d 100644
--- a/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideCardsDemo.stories.tsx
+++ b/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideCardsDemo.stories.tsx
@@ -86,14 +86,11 @@ const cardData = [
   },
 ];
 
-// TODO: reduce samples
 // 3 bounces, 95% decay
-const springSettleCurve = `linear(0.000, 1.000 25%, 1.038 26%, 1.070 27%, 1.098 28%, 1.121 29%, 1.139 30%, 1.152 31%, 1.161 32%, 1.166 33%, 1.168 34%, 1.166 35%, 1.162 36%, 1.155 37%, 1.146 38%, 1.135 39%, 1.110 41%, 1.056 45%, 1.031 47%, 1.009 49%, 1.000 50%, 0.9916 51%, 0.9843 52%, 0.9781 53%, 0.9730 54%, 0.9690 55%, 0.9639 57%, 0.9624 59%, 0.9638 61%, 0.9674 63%, 0.9753 66%, 0.9903 71%, 0.9979 74%, 1.004 77%, 1.007 80%, 1.008 83%, 1.008 87%, 1.000 99%, 1.000)`;
+const curveSpringEnter = `linear(0, 1 25%, 1.070 27%, 1.121 29%, 1.152 31%, 1.166 33%, 1.162 36%, 1.123 40%, 1.031 47%, 0.9916 51%, 0.9690 55%, 0.9628 60%, 1.002 76%, 1.008 87%, 1.000)`;
 
 // 7% anticipation, exponent 3
-const anticipationRelaxedCurve = `linear(0.000, -0.001190 3%, -0.004500 6%, -0.01154 10%, -0.02328 15%, -0.04719 24%, -0.05672 28%, -0.06428 32%, -0.06810 35%, -0.06991 38%, -0.06931 41%, -0.06739 43%, -0.06410 45%, -0.05935 47%, -0.05302 49%, -0.04498 51%, -0.03513 53%, -0.02335 55%, -0.009525 57%, 0.006460 59%, 0.02472 61%, 0.04537 63%, 0.06852 65%, 0.09430 67%, 0.1228 69%, 0.1542 71%, 0.1885 73%, 0.2259 75%, 0.2665 77%, 0.3104 79%, 0.3577 81%, 0.4086 83%, 0.4631 85%, 0.5214 87%, 0.5835 89%, 0.6161 90%, 0.6497 91%, 0.6843 92%, 0.7200 93%, 0.7567 94%, 0.7945 95%, 0.8334 96%, 0.8733 97%, 0.9144 98%, 0.9566 99%, 1.000)`;
-// 7% anticipation, exponent 2
-const anticipationSnappyCurve = `linear(0.000, -0.01307 2%, -0.02479 4%, -0.03517 6%, -0.04419 8%, -0.05186 10%, -0.05818 12%, -0.06316 14%, -0.06678 16%, -0.06905 18%, -0.06998 20%, -0.06955 22%, -0.06777 24%, -0.06465 26%, -0.06017 28%, -0.05435 30%, -0.04717 32%, -0.03864 34%, -0.02877 36%, -0.01754 38%, -0.004966 40%, 0.008960 42%, 0.02424 44%, 0.04086 46%, 0.05884 48%, 0.07816 50%, 0.09884 52%, 0.1209 54%, 0.1442 56%, 0.1690 58%, 0.1950 60%, 0.2225 62%, 0.2512 64%, 0.2814 66%, 0.3128 68%, 0.3457 70%, 0.3798 72%, 0.4154 74%, 0.4522 76%, 0.4904 78%, 0.5300 80%, 0.5709 82%, 0.6132 84%, 0.6568 86%, 0.7018 88%, 0.7481 90%, 0.7958 92%, 0.8448 94%, 0.8952 96%, 0.9469 98%, 1.000)`;
+const curveAnticipationExit = `linear(0, -0.01368 11%, -0.06081 30%, -0.07000 39%, -0.05935 47%, -0.02949 54%, 0.01530 60%, 0.08107 66%, 0.1542 71%, 0.2458 76%, 0.3577 81%, 0.4917 86%, 0.6497 91%, 0.7945 95%, 0.9566 99%, 1.000)`;
 
 export const CardsDemo = (): JSXElement => {
   const classes = useClasses();
@@ -145,8 +142,8 @@ export const CardsDemo = (): JSXElement => {
             outY={card.outY}
             duration={500}
             exitDuration={500}
-            easing={springSettleCurve}
-            exitEasing={anticipationRelaxedCurve}
+            easing={curveSpringEnter}
+            exitEasing={curveAnticipationExit}
           >
             <Card className={classes.card}>
               <CardPreview className={classes.cardPreview} style={{ backgroundColor: card.color }}>

From 468e5e5fbea0972da6996bf68d6a1c692ebbb274 Mon Sep 17 00:00:00 2001
From: Robert Penner <robertpenner@microsoft.com>
Date: Fri, 19 Dec 2025 01:19:51 +0000
Subject: [PATCH 12/23] refactor(motion, RotateCardFlip): update exit easing to
 use anticipation curve

---
 .../stories/src/Rotate/RotateCardFlip.stories.tsx   | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/react-components/react-motion-components-preview/stories/src/Rotate/RotateCardFlip.stories.tsx b/packages/react-components/react-motion-components-preview/stories/src/Rotate/RotateCardFlip.stories.tsx
index f03bd3c7fb323..09b0595ac5348 100644
--- a/packages/react-components/react-motion-components-preview/stories/src/Rotate/RotateCardFlip.stories.tsx
+++ b/packages/react-components/react-motion-components-preview/stories/src/Rotate/RotateCardFlip.stories.tsx
@@ -57,6 +57,7 @@ const useClasses = makeStyles({
 });
 
 const curveSpringRelaxed = `linear(0.0000 0.00%, 0.9935 36.00%, 1.042 38.00%, 1.072 40.00%, 1.084 42.00%, 1.080 44.00%, 1.055 47.00%, 0.9933 53.00%, 0.9746 57.00%, 0.9797 62.00%, 1.002 69.00%, 1.008 73.00%, 1.008 76.00%, 0.9980 87.00%, 1.000 100.00%)`;
+const curveAnticipation = `linear(0, -0.01210 6%, -0.07124 19%, -0.08333 25%, -0.07200 30%, -0.04316 34%, 0.007701 38%, 0.06276 41%, 0.1342 44%, 0.2238 47%, 0.4463 53%, 0.5760 57%, 0.6836 61%, 0.7713 65%, 0.8411 69%, 0.9063 74%, 0.9506 79%, 0.9820 85%, 0.9982 93%, 1)`;
 
 type RequiredRotateParams = Required<
   Pick<RotateParams, 'axis' | 'outAngle' | 'duration' | 'easing' | 'exitEasing' | 'exitDuration'>
@@ -80,9 +81,9 @@ const patterns: RotatePattern[] = [
     axis: 'y',
     outAngle: 180,
     easing: curveSpringRelaxed,
-    exitEasing: motionTokens.curveDecelerateMid,
+    exitEasing: curveAnticipation,
     duration: motionTokens.durationUltraSlow * 4, // 2000ms = 500ms * 4
-    exitDuration: motionTokens.durationUltraSlow,
+    exitDuration: motionTokens.durationUltraSlow * 2,
   },
   {
     id: 'flip-vertical',
@@ -93,9 +94,9 @@ const patterns: RotatePattern[] = [
     axis: 'x',
     outAngle: 180,
     easing: curveSpringRelaxed,
-    exitEasing: motionTokens.curveDecelerateMid,
+    exitEasing: curveAnticipation,
     duration: motionTokens.durationUltraSlow * 4, // 2000ms = 500ms * 4
-    exitDuration: motionTokens.durationUltraSlow,
+    exitDuration: motionTokens.durationUltraSlow * 2,
   },
   {
     id: 'spin',
@@ -106,9 +107,9 @@ const patterns: RotatePattern[] = [
     axis: 'z',
     outAngle: 180,
     easing: curveSpringRelaxed,
-    exitEasing: motionTokens.curveDecelerateMid,
+    exitEasing: curveAnticipation,
     duration: motionTokens.durationUltraSlow * 4, // 2000ms = 500ms * 4
-    exitDuration: motionTokens.durationUltraSlow,
+    exitDuration: motionTokens.durationUltraSlow * 2,
   },
 ];
 

From dc3cb285ac316242d5221d8b6c2509afd1175f25 Mon Sep 17 00:00:00 2001
From: Robert Penner <robertpenner@microsoft.com>
Date: Fri, 19 Dec 2025 01:26:05 +0000
Subject: [PATCH 13/23] refactor(motion, SlideDirections): update prop names
 from "fromX" and "fromY" to "outX" and "outY"

---
 .../stories/src/Slide/SlideDirections.stories.md                | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideDirections.stories.md b/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideDirections.stories.md
index 115459deaee97..5908219e491e4 100644
--- a/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideDirections.stories.md
+++ b/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideDirections.stories.md
@@ -1 +1 @@
-`Slide` supports directions using `fromX` and `fromY` props in `px`, `%`, etc.
+`Slide` supports directions using `outX` and `outY` props in `px`, `%`, etc.

From 25fae58a0b76faa10c1f1830d35962a96e198d48 Mon Sep 17 00:00:00 2001
From: Robert Penner <robertpenner@microsoft.com>
Date: Fri, 19 Dec 2025 01:31:19 +0000
Subject: [PATCH 14/23] fix(react-drawer): update slide atom param from "fromX"
 to "outX"

---
 .../stories/src/Drawer/DrawerMultipleLevels.stories.tsx     | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-components/react-drawer/stories/src/Drawer/DrawerMultipleLevels.stories.tsx b/packages/react-components/react-drawer/stories/src/Drawer/DrawerMultipleLevels.stories.tsx
index 0fc5490108383..39289b8f9194b 100644
--- a/packages/react-components/react-drawer/stories/src/Drawer/DrawerMultipleLevels.stories.tsx
+++ b/packages/react-components/react-drawer/stories/src/Drawer/DrawerMultipleLevels.stories.tsx
@@ -57,16 +57,16 @@ const useStyles = makeStyles({
 const BodyPresenceMotion = createPresenceComponent<{ level: 1 | 2 }>(({ level }) => {
   const duration = motionTokens.durationNormal;
   const easing = motionTokens.curveEasyEase;
-  const fromX = level === 1 ? '-100%' : '100%';
+  const outX = level === 1 ? '-100%' : '100%';
 
   return {
     enter: [
       fadeAtom({ direction: 'enter', duration, easing }),
-      slideAtom({ direction: 'enter', duration, easing, fromX }),
+      slideAtom({ direction: 'enter', duration, easing, outX }),
     ],
     exit: [
       fadeAtom({ direction: 'exit', duration, easing }),
-      slideAtom({ direction: 'exit', duration, easing, fromX }),
+      slideAtom({ direction: 'exit', duration, easing, outX }),
     ],
   };
 });

From 814e328c373136458e2f6fe73f29c64a6abb0cb3 Mon Sep 17 00:00:00 2001
From: Robert Penner <robertpenner@microsoft.com>
Date: Fri, 19 Dec 2025 01:31:48 +0000
Subject: [PATCH 15/23] fix(react-message-bar): update slide atom param from
 "fromY" to "outY"

---
 .../src/components/MessageBarGroup/MessageBarGroup.motions.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-components/react-message-bar/library/src/components/MessageBarGroup/MessageBarGroup.motions.tsx b/packages/react-components/react-message-bar/library/src/components/MessageBarGroup/MessageBarGroup.motions.tsx
index 143443064a3fe..f02ce02cffd8e 100644
--- a/packages/react-components/react-message-bar/library/src/components/MessageBarGroup/MessageBarGroup.motions.tsx
+++ b/packages/react-components/react-message-bar/library/src/components/MessageBarGroup/MessageBarGroup.motions.tsx
@@ -16,7 +16,7 @@ export const MessageBarMotion = createPresenceComponent<{ animate?: MessageBarGr
       enter:
         animate === 'both'
           ? // enter with slide and fade
-            [fadeAtom({ direction: 'enter', duration }), slideAtom({ direction: 'enter', fromY: '-100%', duration })]
+            [fadeAtom({ direction: 'enter', duration }), slideAtom({ direction: 'enter', outY: '-100%', duration })]
           : [], // no enter motion
 
       // Always exit with a fade

From 6f5e03bfa95c92a3a51eb2f16e237cfa5ba04efc Mon Sep 17 00:00:00 2001
From: Robert Penner <robertpenner@microsoft.com>
Date: Fri, 19 Dec 2025 01:33:55 +0000
Subject: [PATCH 16/23] chore: yarn change

---
 ...t-message-bar-7b748ebd-6fe2-4639-ba7a-65ce4ceb7bcd.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-react-message-bar-7b748ebd-6fe2-4639-ba7a-65ce4ceb7bcd.json

diff --git a/change/@fluentui-react-message-bar-7b748ebd-6fe2-4639-ba7a-65ce4ceb7bcd.json b/change/@fluentui-react-message-bar-7b748ebd-6fe2-4639-ba7a-65ce4ceb7bcd.json
new file mode 100644
index 0000000000000..c74ee1590c2d5
--- /dev/null
+++ b/change/@fluentui-react-message-bar-7b748ebd-6fe2-4639-ba7a-65ce4ceb7bcd.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix(react-message-bar): update slide atom param from \"fromY\" to \"outY\"",
+  "packageName": "@fluentui/react-message-bar",
+  "email": "robertpenner@microsoft.com",
+  "dependentChangeType": "patch"
+}

From 85aa23b3f2d10dfe99304c5a590f1e9aa9ac37e8 Mon Sep 17 00:00:00 2001
From: Robert Penner <robertpenner@microsoft.com>
Date: Fri, 19 Dec 2025 01:38:47 +0000
Subject: [PATCH 17/23] chore: Prettier

---
 .../stories/src/Drawer/DrawerMultipleLevels.stories.tsx      | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/react-components/react-drawer/stories/src/Drawer/DrawerMultipleLevels.stories.tsx b/packages/react-components/react-drawer/stories/src/Drawer/DrawerMultipleLevels.stories.tsx
index 39289b8f9194b..d81eeb42acc2d 100644
--- a/packages/react-components/react-drawer/stories/src/Drawer/DrawerMultipleLevels.stories.tsx
+++ b/packages/react-components/react-drawer/stories/src/Drawer/DrawerMultipleLevels.stories.tsx
@@ -64,10 +64,7 @@ const BodyPresenceMotion = createPresenceComponent<{ level: 1 | 2 }>(({ level })
       fadeAtom({ direction: 'enter', duration, easing }),
       slideAtom({ direction: 'enter', duration, easing, outX }),
     ],
-    exit: [
-      fadeAtom({ direction: 'exit', duration, easing }),
-      slideAtom({ direction: 'exit', duration, easing, outX }),
-    ],
+    exit: [fadeAtom({ direction: 'exit', duration, easing }), slideAtom({ direction: 'exit', duration, easing, outX })],
   };
 });
 

From 40ced6fe9769cd23e1389d3d64b6c77b952a4643 Mon Sep 17 00:00:00 2001
From: Robert Penner <robertpenner@microsoft.com>
Date: Fri, 19 Dec 2025 01:47:22 +0000
Subject: [PATCH 18/23] refactor(motion): rename prop "fromScale" to "outScale"
 for consistency

---
 .../stories/src/Scale/ScaleCustomization.stories.md           | 2 +-
 .../src/choreography/Stagger/StaggerDelayMode.stories.tsx     | 2 +-
 .../src/choreography/Stagger/StaggerHideMode.stories.tsx      | 2 +-
 .../stories/src/choreography/Stagger/StaggerText.stories.tsx  | 4 ++--
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleCustomization.stories.md b/packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleCustomization.stories.md
index 8b583a366abb3..35bd6f285500a 100644
--- a/packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleCustomization.stories.md
+++ b/packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleCustomization.stories.md
@@ -15,6 +15,6 @@ const CustomScaleVariant = createPresenceComponentVariant(Scale, {
   exitDuration: motionTokens.durationSlow,
   easing: curveOvershootFirmOut,
   exitEasing: curveOvershootFirmInOut,
-  fromScale: 0.5, // increase the range of the scale transition
+  outScale: 0.5, // increase the range of the scale transition
 });
 ```
diff --git a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerDelayMode.stories.tsx b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerDelayMode.stories.tsx
index de9da8cf70845..4df4e6fec6f1b 100644
--- a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerDelayMode.stories.tsx
+++ b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerDelayMode.stories.tsx
@@ -19,7 +19,7 @@ const curveOvershootFirmOut =
 const renderAvatarsWithTransition = () => {
   return avatarData.map(avatar => (
     <Scale
-      fromScale={0}
+      outScale={0}
       duration={600}
       exitDuration={300}
       easing={curveOvershootFirmOut}
diff --git a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerHideMode.stories.tsx b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerHideMode.stories.tsx
index 744d6334fb8f7..e1b0f51517d90 100644
--- a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerHideMode.stories.tsx
+++ b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerHideMode.stories.tsx
@@ -15,7 +15,7 @@ const avatarData = [
 const renderAvatarsWithTransition = () => {
   return avatarData.map(avatar => (
     <Scale
-      fromScale={0}
+      outScale={0}
       duration={600}
       exitDuration={300}
       easing={curveOvershootFirmOut}
diff --git a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerText.stories.tsx b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerText.stories.tsx
index 56d749b6860fa..dcfc3522a1de3 100644
--- a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerText.stories.tsx
+++ b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerText.stories.tsx
@@ -51,7 +51,7 @@ const useClasses = makeStyles({
 export const Text = (): JSXElement => {
   const classes = useClasses();
   const [visible, setVisible] = React.useState<boolean>(true);
-  const fromScale = visible ? 3 : 0;
+  const outScale = visible ? 3 : 0;
 
   return (
     <div className={classes.container}>
@@ -68,7 +68,7 @@ export const Text = (): JSXElement => {
           {/* Create a list of items, each wrapped with a presence transition */}
           {Array.from({ length: 4 }, (_, i) => (
             <Scale
-              fromScale={fromScale}
+              outScale={outScale}
               duration={1200}
               exitDuration={1200}
               easing={motionTokens.curveDecelerateMax}

From 31323c5d08780405e6ef7611c482273d4ffd8957 Mon Sep 17 00:00:00 2001
From: Robert Penner <robertpenner@microsoft.com>
Date: Fri, 19 Dec 2025 01:48:33 +0000
Subject: [PATCH 19/23] fix(react-dialog): update Scale param from "fromScale"
 to "outScale"

---
 .../react-dialog/library/src/components/DialogSurfaceMotion.ts  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-components/react-dialog/library/src/components/DialogSurfaceMotion.ts b/packages/react-components/react-dialog/library/src/components/DialogSurfaceMotion.ts
index 9cc4393e7f00c..7a3f0898a4066 100644
--- a/packages/react-components/react-dialog/library/src/components/DialogSurfaceMotion.ts
+++ b/packages/react-components/react-dialog/library/src/components/DialogSurfaceMotion.ts
@@ -2,7 +2,7 @@ import { createPresenceComponentVariant, motionTokens } from '@fluentui/react-mo
 import { Scale } from '@fluentui/react-motion-components-preview';
 
 export const DialogSurfaceMotion = createPresenceComponentVariant(Scale, {
-  fromScale: 0.85,
+  outScale: 0.85,
   easing: motionTokens.curveDecelerateMid,
   duration: motionTokens.durationGentle,
   exitEasing: motionTokens.curveAccelerateMin,

From 3440ec827907fafc1acf35abff05b29956eb1ea1 Mon Sep 17 00:00:00 2001
From: Robert Penner <robertpenner@microsoft.com>
Date: Fri, 19 Dec 2025 01:49:28 +0000
Subject: [PATCH 20/23] chore: yarn change

---
 ...-react-dialog-a965c839-0644-452c-be1b-5509243d009d.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-react-dialog-a965c839-0644-452c-be1b-5509243d009d.json

diff --git a/change/@fluentui-react-dialog-a965c839-0644-452c-be1b-5509243d009d.json b/change/@fluentui-react-dialog-a965c839-0644-452c-be1b-5509243d009d.json
new file mode 100644
index 0000000000000..08d3b595db1db
--- /dev/null
+++ b/change/@fluentui-react-dialog-a965c839-0644-452c-be1b-5509243d009d.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix(react-dialog): update Scale param from \"fromScale\" to \"outScale\"",
+  "packageName": "@fluentui/react-dialog",
+  "email": "robertpenner@microsoft.com",
+  "dependentChangeType": "patch"
+}

From de1012210e099dc43cb989cae19ce6abb3142c72 Mon Sep 17 00:00:00 2001
From: Robert Penner <robertpenner@microsoft.com>
Date: Fri, 19 Dec 2025 01:57:40 +0000
Subject: [PATCH 21/23] fix(react-nav): update Rotate param from "fromAngle" to
 "outAngle"

---
 ...tui-react-nav-7553c6b9-2d24-42ae-b50d-5b585d39321d.json | 7 +++++++
 .../src/components/NavCategoryItem/useNavCategoryItem.tsx  | 4 ++--
 2 files changed, 9 insertions(+), 2 deletions(-)
 create mode 100644 change/@fluentui-react-nav-7553c6b9-2d24-42ae-b50d-5b585d39321d.json

diff --git a/change/@fluentui-react-nav-7553c6b9-2d24-42ae-b50d-5b585d39321d.json b/change/@fluentui-react-nav-7553c6b9-2d24-42ae-b50d-5b585d39321d.json
new file mode 100644
index 0000000000000..b8cbe06b8c26d
--- /dev/null
+++ b/change/@fluentui-react-nav-7553c6b9-2d24-42ae-b50d-5b585d39321d.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix(react-nav): update Rotate param from \"fromAngle\" to \"outAngle\"",
+  "packageName": "@fluentui/react-nav",
+  "email": "robertpenner@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-nav/library/src/components/NavCategoryItem/useNavCategoryItem.tsx b/packages/react-components/react-nav/library/src/components/NavCategoryItem/useNavCategoryItem.tsx
index d21923dfb84ac..e832959efef4f 100644
--- a/packages/react-components/react-nav/library/src/components/NavCategoryItem/useNavCategoryItem.tsx
+++ b/packages/react-components/react-nav/library/src/components/NavCategoryItem/useNavCategoryItem.tsx
@@ -14,8 +14,8 @@ const ExpandIconMotion = createPresenceComponentVariant(Rotate, {
   duration: motionTokens.durationFast,
   easing: motionTokens.curveEasyEase,
   animateOpacity: false, // Don't fade out the icon
-  fromAngle: 0,
-  toAngle: 180,
+  outAngle: 0,
+  inAngle: 180,
 });
 
 /**

From 7d741a1a9359f4c68b9f2b5f9e38e090f6db043c Mon Sep 17 00:00:00 2001
From: Robert Penner <robertpenner@microsoft.com>
Date: Fri, 19 Dec 2025 02:04:32 +0000
Subject: [PATCH 22/23] refactor(motion): rename prop "fromSize" to "outSize"
 for consistency

---
 .../choreography/Stagger/StaggerExpandableContainer.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerExpandableContainer.stories.tsx b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerExpandableContainer.stories.tsx
index b6e94979f1218..eb7bd8ea42b1b 100644
--- a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerExpandableContainer.stories.tsx
+++ b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerExpandableContainer.stories.tsx
@@ -181,7 +181,7 @@ export const ExpandableContainer = (): JSXElement => {
         visible={expanded}
         duration={COLLAPSE_DURATION}
         easing={motionTokens.curveEasyEase}
-        fromSize={COLLAPSED_HEIGHT}
+        outSize={COLLAPSED_HEIGHT}
         animateOpacity={false}
         exitDelay={STAGGER_EXIT_DELAY}
       >

From 25fd8485c8ed349b75c6dbfafcd3147030c4b701 Mon Sep 17 00:00:00 2001
From: Robert Penner <robertpenner@microsoft.com>
Date: Fri, 19 Dec 2025 02:07:09 +0000
Subject: [PATCH 23/23] refactor(blur): rename prop "fromRadius" to "outRadius"
 for consistency

---
 .../stories/src/Blur/BlurRadius.stories.md                      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-components/react-motion-components-preview/stories/src/Blur/BlurRadius.stories.md b/packages/react-components/react-motion-components-preview/stories/src/Blur/BlurRadius.stories.md
index 6a1c416af9fa6..62fed5e6c6408 100644
--- a/packages/react-components/react-motion-components-preview/stories/src/Blur/BlurRadius.stories.md
+++ b/packages/react-components/react-motion-components-preview/stories/src/Blur/BlurRadius.stories.md
@@ -1 +1 @@
-Compare different `fromRadius` values to control the spread of the blur effect.
+Compare different `outRadius` values to control the spread of the blur effect.