motiondivision · mattgperry · Jun 30, 2026 · Jun 30, 2026 · Jun 30, 2026 · Jun 30, 2026
diff --git a/dev/html/public/examples/avatar-profile.html b/dev/html/public/examples/avatar-profile.html
@@ -199,7 +199,9 @@ <h3 class="profile-name">Maya Powell</h3>
                 animateView(() => {
                     buildProfile()
                     avatar.style.visibility = "hidden"
-                }, opts).add(avatar, ".profile")
+                }, opts)
+                    .add(avatar, ".profile")
+                    .crop(true)
             }
 
             const close = () => {
@@ -210,7 +212,9 @@ <h3 class="profile-name">Maya Powell</h3>
                     document.querySelector(".profile")?.remove()
                     document.querySelector(".profile-backdrop")?.remove()
                     avatar.style.visibility = "visible"
-                }, opts).add(".profile", avatar)
+                }, opts)
+                    .add(".profile", avatar)
+                    .crop(true)
             }
 
             avatar.addEventListener("click", openProfile)

diff --git a/dev/html/public/playwright/view/view-crop-timing.html b/dev/html/public/playwright/view/view-crop-timing.html
@@ -0,0 +1,87 @@
+<!doctype html>
+<html>
+    <head>
+        <style>
+            body {
+                margin: 0;
+            }
+            .box {
+                width: 100px;
+                height: 100px;
+                background: red;
+                margin: 40px;
+                border-radius: 8px;
+                view-transition-name: box;
+            }
+            /* Different aspect ratio AND border-radius -> auto-cropped. */
+            .box.big {
+                width: 320px;
+                height: 120px;
+                border-radius: 28px;
+                background: blue;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="box" id="box"></div>
+
+        <script type="module" src="/src/imports/view.js"></script>
+        <script type="module">
+            const { animateView } = window.MotionDOM
+
+            window.__view = {
+                ready: false,
+                supported: !!document.startViewTransition,
+                error: null,
+                radiusIterations: null,
+                groupIterations: null,
+            }
+
+            const box = document.getElementById("box")
+
+            const groupKeyframeMatch = (kind) => (a) => {
+                const eff = a.effect
+                return (
+                    eff &&
+                    eff.pseudoElement === "::view-transition-group(box)" &&
+                    eff
+                        .getKeyframes()
+                        .some((k) =>
+                            Object.keys(k).some((p) => kind.test(p))
+                        )
+                )
+            }
+
+            // `repeat` (and a string `type`) must NOT leak into the radius
+            // animation: the group geometry's updateTiming ignores repeat, so a
+            // leaking radius would run twice and desync the clip from the box.
+            animateView(() => box.classList.add("big"), {
+                type: "spring",
+                duration: 1,
+                ease: "linear",
+                repeat: 1,
+            })
+                .add("#box")
+                .then(
+                    () => {
+                        const anims = document.getAnimations()
+                        const radius = anims.find(groupKeyframeMatch(/Radius$/))
+                        const group = anims.find(
+                            groupKeyframeMatch(/transform|width|height/i)
+                        )
+                        window.__view.radiusIterations = radius
+                            ? radius.effect.getComputedTiming().iterations
+                            : null
+                        window.__view.groupIterations = group
+                            ? group.effect.getComputedTiming().iterations
+                            : null
+                        window.__view.ready = true
+                    },
+                    (e) => {
+                        window.__view.error = String(e)
+                        window.__view.ready = true
+                    }
+                )
+        </script>
+    </body>
+</html>
diff --git a/packages/motion-dom/src/animation/waapi/utils/px-values.ts b/packages/motion-dom/src/animation/waapi/utils/px-values.ts
@@ -1,3 +1,5 @@
+import { cornerRadiusProps } from "../../../utils/border-radius"
+
 export const pxValues = new Set([
     // Border props
     "borderWidth",
@@ -6,10 +8,7 @@ export const pxValues = new Set([
     "borderBottomWidth",
     "borderLeftWidth",
     "borderRadius",
-    "borderTopLeftRadius",
-    "borderTopRightRadius",
-    "borderBottomRightRadius",
-    "borderBottomLeftRadius",
+    ...cornerRadiusProps,
     // Positioning props
     "width",
     "maxWidth",

diff --git a/packages/motion-dom/src/projection/animation/mix-values.ts b/packages/motion-dom/src/projection/animation/mix-values.ts
@@ -8,14 +8,9 @@ import {
     noop,
 } from "motion-utils"
 import type { ResolvedValues } from "../../node/types"
+import { cornerRadiusProps } from "../../utils/border-radius"
 
-const borderLabels = [
-    "borderTopLeftRadius",
-    "borderTopRightRadius",
-    "borderBottomLeftRadius",
-    "borderBottomRightRadius",
-]
-const numBorders = borderLabels.length
+const numBorders = cornerRadiusProps.length
 
 const asNumber = (value: AnyResolvedKeyframe) =>
     typeof value === "string" ? parseFloat(value) : value
@@ -54,7 +49,7 @@ export function mixValues(
      * Mix border radius
      */
     for (let i = 0; i < numBorders; i++) {
-        const borderLabel = borderLabels[i]
+        const borderLabel = cornerRadiusProps[i]
         let followRadius = getRadius(follow, borderLabel)
         let leadRadius = getRadius(lead, borderLabel)
 

diff --git a/packages/motion-dom/src/projection/styles/scale-correction.ts b/packages/motion-dom/src/projection/styles/scale-correction.ts
@@ -1,17 +1,13 @@
 import { isCSSVariableName } from "../../animation/utils/is-css-variable"
+import { cornerRadiusProps } from "../../utils/border-radius"
 import { correctBorderRadius } from "./scale-border-radius"
 import { correctBoxShadow } from "./scale-box-shadow"
 import type { ScaleCorrectorMap } from "./types"
 
 export const scaleCorrectors: ScaleCorrectorMap = {
     borderRadius: {
         ...correctBorderRadius,
-        applyTo: [
-            "borderTopLeftRadius",
-            "borderTopRightRadius",
-            "borderBottomLeftRadius",
-            "borderBottomRightRadius",
-        ],
+        applyTo: [...cornerRadiusProps],
     },
     borderTopLeftRadius: correctBorderRadius,
     borderTopRightRadius: correctBorderRadius,

diff --git a/packages/motion-dom/src/utils/border-radius.ts b/packages/motion-dom/src/utils/border-radius.ts
@@ -0,0 +1,12 @@
+/**
+ * The four corner-radius longhands. Shared so the projection mixer, scale
+ * corrector, WAAPI px-value set and view-transition crop pass don't each carry
+ * their own copy. Order is irrelevant - every consumer mixes/corrects/animates
+ * each corner independently.
+ */
+export const cornerRadiusProps = [
+    "borderTopLeftRadius",
+    "borderTopRightRadius",
+    "borderBottomRightRadius",
+    "borderBottomLeftRadius",
+] as const