@astryxdesign/core 0.7.5 → 0.7.6-canary.0135af4

package/dist/motion/animator.js

@@ -42,14 +42,16 @@
  * current value with the current velocity (`spec:AST-094` FR6). A gesture's release velocity
  * can be handed in explicitly instead.
  *
- * End state without a flicker frame: the element's inline style always holds
- * the values the animations END on, and the keyframes hold that end state for
- * a while after the curve ends (END_HOLD_MS). The main thread drops a finished
- * animation as soon as it runs after the curve's end; the inline style already
- * shows the same values, so nothing moves. The hold matters when the curve
- * ends during a main-thread block: WebKit's compositor ends an animation by
- * falling back to the value its main thread last committed, which is
- * mid-flight.
+ * No frame shows a value the element is not at. While a curve runs, the
+ * element's inline style holds the value the curve starts from (the value on
+ * screen when it was built), so a frame painted before the compositor has the
+ * curve (WebKit can receive a new curve a few updates late) shows the element
+ * where it is, never where it is going. The keyframes hold the end state for a
+ * while after the curve ends (END_HOLD_MS); the main thread retires a finished
+ * animation as soon as it runs after the curve's end, writing the end values
+ * inline in the same task that cancels it, so nothing moves. The hold matters
+ * when the curve ends during a main-thread block: WebKit's compositor ends an
+ * animation by falling back to the value its main thread last committed.
  *
  * Start time: a call that starts from rest (nothing on its channels moving,
  * no `options.at`) gets no start time, so the browser starts it when it
@@ -57,25 +59,49 @@
  * commit: a main-thread block before that frame delays the motion instead of
  * skipping into it. Everything the call starts, and every
  * call from rest in the same task, starts at that one time, which
- * `handle.started` reports. A call that continues motion on
+ * `handle.started` reports. Where the compositor starts it and the page
+ * learns that start only a frame or more later (Chromium), the call starts
+ * at the frame that commits it, the start the compositor takes, so a
+ * retarget or a rebase before then continues from the frame on screen. A
+ * call that continues motion on
  * screen (a retarget, a catch) keeps an explicit start at the call time, or
  * `options.at` to line several animators up, so the new curve continues
  * from the frame on screen. Keyframes are sampled from the call's start, so
  * a value that keeps moving through a rebuild stays on its curve to the
- * frame.
+ * frame. `options.start` changes that per call: `'commit'` dates a retarget
+ * by the browser's commit as well, and `'presented'` creates the animations
+ * of a call from rest two frames later, once its element at rest has been
+ * presented (a UI process that applies commits late); a retarget still starts
+ * now, from the value and velocity on screen.
+ * `handle.curve(property)` hands out the curve a call plays, so a
+ * companion can follow it on the same clock.
+ * `options.additive` retargets as UIKit does: the old curve keeps going and a
+ * curve of the change between the targets is added on top, baked into one
+ * animation (two animations on one property leave the compositor in both
+ * engines), so the retarget keeps the velocity on screen.
  *
- * WebKit starts an animation created just before a block at its last frame
- * time before the block, so there the motion still skips into its curve;
- * Chromium starts it after the block.
+ * WebKit dates an animation created just before a block at its last frame
+ * time before the block, where the first frame after it would show the
+ * motion skipped into its curve; when the call's own task ran on more than
+ * two frames, the call's first read of that start moves it to that read, so
+ * WebKit delays the motion as Chromium's commit does (startAfterBlock). Every
+ * call of that task moves together, and a shorter task or a read that other
+ * tasks delay keeps the browser's start, so a sequence chained on a call's
+ * end (a Reduce Motion cross-fade's second half) keeps its clock.
  *
  * Promotion: Mobile Safari runs an animation whose start time is set from
- * script on its compositor at its first commit only if the element already
- * has a compositing layer; without one, a block right after that commit
- * freezes it (iOS 26.2 simulator: 2 of 7 runs kept moving). Every animation
- * the animator creates, and every `set`, therefore promotes its channels in
- * the same task: inline `will-change` on the element, merged with the
- * element's own. That is enough (5 of 5, and 4 of 4 through the animator);
- * promotion ends PROMOTION_LINGER_MS after the last motion.
+ * script on its compositor at its first commit only if the element (or the
+ * pseudo-element) already has a compositing layer; without one, a block
+ * right after that commit freezes it (iOS 26.2 simulator: 2 of 7 runs kept
+ * moving, 0 of 5 on a ::before). Every animation the animator creates, and
+ * every `set` (unless it passes `{promote: false}`), therefore promotes its
+ * channels in the same task: inline
+ * `will-change` on the element, merged with the element's own, or the custom
+ * property `--astryx-motion-will-change-<pseudo>` on the host for a
+ * pseudo-element, whose style opts in with
+ * `will-change: var(--astryx-motion-will-change-before, auto)`. That is
+ * enough (5 of 5, and 4 of 4 through the animator); promotion ends
+ * PROMOTION_LINGER_MS after the last motion.
  *
  * Known limits, iOS Safari (measured on the iOS 26.2 simulator):
  * - a block in the task that starts a motion delays it: it starts when the
@@ -112,8 +138,8 @@
  *   call that lands too carries a landing still waiting (two calls in one
  *   frame land together), and a later opacity change lands it at once;
  * - on any other primary pointer (DR3) it completes at once.
- * No call option and no theme value lengthens the fade or keeps travel (DR4):
- * the fade's length is not a theme role.
+ * No call option and no role value lengthens the fade or keeps travel (DR4):
+ * the fade's length is not a role.
  *
  * Momentum under Reduce Motion (`design:reduced-motion` DR2, DEC-2): a
  * decay's momentum continues the velocity a finger handed it on release
@@ -125,18 +151,38 @@
  * Motion policy above, a cross-fade on a coarse pointer or after a touch
  * release (`touchRelease`) and at once elsewhere (DR2, DR3).
  *
+ * Roles: every spring and curve the animator plays passes through
+ * resolveMotion.ts, which names the motion role it plays (`springs.settle`
+ * once `registerSpringsTable()` has run, the Reduce Motion fade's curve,
+ * which the animator registers alone). The per-role tables stay internal
+ * (`spec:AST-094` DEC-15), so a role plays its table value: nothing reads a
+ * CSS variable or the element's style for it. A spring written inline at the call
+ * site, and a table never registered, play as given; the fade's length is not
+ * a role.
+ *
+ * A pseudo-element (`options.pseudoElement`, a dialog's `::backdrop`) has no
+ * inline style: its end value is held by a static filling animation (after a
+ * curve ends, and after `set`) until the next animation replaces it, and for
+ * as long as the pseudo-element exists. The browser makes a `::backdrop`
+ * again each time its dialog opens, without the hold, so a presentation
+ * calls `set` with its starting value right after `showModal()`, in the same
+ * task: a `set` before it lands on the backdrop the open replaces.
+ *
  * SSR-safe: nothing touches `window` or `document` at module scope, and an
  * animator created without an element only keeps state until one is attached.
  *
  * SYNC: When modified, update:
  * - /packages/core/src/motion/animator.test.ts
  * - /packages/core/src/motion/reducedMotionPlan.ts (the Reduce Motion plan)
+ * - /packages/core/src/motion/__tests__/animator.interaction.browser.spec.ts
+ * - /packages/core/src/motion/resolveMotion.ts (the roles it resolves)
  * - /packages/core/src/motion/README.md
  */
 
 import { cubicBezier } from "./bezier.js";
 import { solveSpring, toSpring } from "./spring.js";
-import { reducedMotionCrossFade } from "./uikit/timing.js";
+import { resolveMotion } from "./resolveMotion.js";
+import { reducedMotionCrossFade, registerReducedMotionCrossFade } from "./uikit/timing.js";
 import { planReducedMotion } from "./reducedMotionPlan.js";
 
 /**
@@ -167,6 +213,7 @@ import { planReducedMotion } from "./reducedMotionPlan.js";
 /**
  * Options of `createAnimator`.
  */
+/** How `set` puts values in place. */
 
 /**
  * One `animate` / `decay` call's animations.
@@ -225,32 +272,100 @@ export const SETTLE_THRESHOLD = {
   opacity: 0.001
 };
 
-/** Keyframes are added until linear interpolation is within this. */
+/**
+ * Keyframes are added until linear interpolation is within this: a quarter of
+ * a device pixel (this quarter of a CSS pixel, divided by the device pixel
+ * ratio where it is above 1), a twentieth of a degree, a 2000th of the size,
+ * about one step of an 8-bit alpha. Every one is below what a moving element
+ * can show.
+ */
 const SAMPLE_TOLERANCE = {
-  x: 0.05,
-  y: 0.05,
-  rotate: 0.02,
-  scaleX: 0.0002,
-  scaleY: 0.0002,
-  opacity: 0.002
+  x: 0.25,
+  y: 0.25,
+  rotate: 0.05,
+  scaleX: 0.0005,
+  scaleY: 0.0005,
+  opacity: 0.004
 };
 
+/** Keyframes start on this grid (ms) and are split where the curve needs it. */
+const SAMPLE_GRID_MS = 1000 / 30;
+
 /** A curve that has not settled by then (an undamped spring) snaps. */
 const MAX_DURATION_MS = 30_000;
+
+/**
+ * How long a task must run on past its first call from rest before that
+ * counts as a block (WebKit; startAfterBlock): two frames at 60 Hz.
+ */
+// Browser start times are frame times and a task's end a live clock, so only a block longer than a frame plus the task's own length can be told apart from that quantization.
+const LATE_START_MS = 34;
+
+/**
+ * The task calls from rest are made in, shared by every call made in it
+ * (every animator's), so one motion's parts that are separate calls start
+ * together (startAfterBlock).
+ */
+
+/** The task the current calls from rest are made in, until it ends. */
+let openTask = null;
+
+/** How many of the animators' animation-frame callbacks are running now. */
+let frameDepth = 0;
+
+/** The mark of the running task, opened by its first call from rest. */
+function markTask(time, clock) {
+  if (openTask == null) {
+    const task = {
+      first: time
+    };
+    openTask = task;
+    queueMicrotask(() => {
+      task.ended = clock();
+      openTask = null;
+    });
+  }
+  return openTask;
+}
+
 /** Above this many keyframes the tolerance is relaxed. */
 const MAX_KEYFRAMES = 1200;
 /**
  * The keyframes hold the end state this long after a curve ends. An engine
  * whose compositor ends an animation while the main thread is blocked falls
- * back to the value its main thread last committed, mid-flight (WebKit); the
- * hold keeps the end state on screen through such a block. The main thread
- * drops the animation as soon as it runs after the curve's end.
+ * back to the value its main thread last committed, the curve's start
+ * (WebKit on Linux); the hold keeps the end state on screen through any such
+ * block. It only stretches the last keyframe. The main thread retires the
+ * animation as soon as it runs after the curve's end.
+ *
+ * Why a tail inside the curve's own animation, with a bound (measured Oct 24
+ * 2026; do not replace it without these proofs):
+ * - WebKit on Linux (WebKitGTK and WPE) ignores `fill` on its compositor:
+ *   a 400 ms move that ends during a 1 s main-thread block snaps back to the
+ *   block-start position 13 ms after its end, with `fill: forwards` or with
+ *   no fill, and holds with this tail. iOS 26.2 Mobile Safari holds the end
+ *   in all three forms, so there the tail is unneeded but harmless (measured
+ *   Oct 25 2026). The browser proof "a spring that ends inside the block
+ *   keeps showing its end state" catches it.
+ * - A separate static animation of the end state under the curve would hold
+ *   it without a bound, but two animations on one property push Chromium to
+ *   run the curve on the main thread: the 1 s block proof moved in 0 of 57
+ *   frames, the start-before-a-block proof failed, and seeking the curve
+ *   broke.
  */
-export const END_HOLD_MS = 5000;
+export const END_HOLD_MS = 60_000;
 
 /** How often a paused animation is looked at again for retiring, ms. */
 const RETIRE_RECHECK_MS = 100;
 
+/**
+ * The soonest a running animation's end is looked for again, ms: a frame at
+ * 60 Hz. WebKit moves an animation's currentTime once per frame, so a look
+ * within a frame reads the frame's time, a fraction of a ms short of the end,
+ * and a timer for that fraction would fire again before anything moved.
+ */
+const END_RECHECK_MS = 1000 / 60;
+
 /** How long an element stays promoted after its last motion, ms. */
 export const PROMOTION_LINGER_MS = 500;
 const CHANNELS = {
@@ -285,7 +400,7 @@ function format(channel, value) {
 const shared = new WeakMap();
 
 /**
- * The one animator for `element`, created on
+ * The one animator for `element` (and `options.pseudoElement`), created on
  * first use. Code that animates one element from several places (a swipe on
  * x, a removal on y) shares it, so their curves compose in one `translate`
  * track and retargeting one axis leaves the other on its curve; two
@@ -294,10 +409,16 @@ const shared = new WeakMap();
  * elsewhere or `dispose` it: it lives as long as the element.
  */
 export function animatorFor(element, options = {}) {
-  let animator = shared.get(element);
+  let byPseudo = shared.get(element);
+  if (byPseudo == null) {
+    byPseudo = new Map();
+    shared.set(element, byPseudo);
+  }
+  const key = options.pseudoElement ?? '';
+  let animator = byPseudo.get(key);
   if (animator == null) {
     animator = createAnimator(element, options);
-    shared.set(element, animator);
+    byPseudo.set(key, animator);
   }
   return animator;
 }
@@ -401,8 +522,9 @@ const REDUCED_TRANSITION = {
  * @example
  * ```
  * const animator = createAnimator(sheet);
- * // finger lifts at 1200 px/s heading for the detent at 0:
- * animator.animate({y: 0}, {spring: springs.sheetDetent, velocity: {y: 1200}});
+ * // finger lifts at 1200 px/s heading for the detent at 0 (a component
+ * // passes the spring of its motion role):
+ * animator.animate({y: 0}, {spring: {response: 0.45, dampingRatio: 0.9}, velocity: {y: 1200}});
  * // the finger lands again: where is it right now?
  * const y = animator.get('y', event.timeStamp);
  * animator.stop(['y']);
@@ -410,9 +532,22 @@ const REDUCED_TRANSITION = {
  */
 export function createAnimator(element, options = {}) {
   const now = options.now ?? defaultNow;
-  const requestFrame = options.requestFrame ?? (typeof requestAnimationFrame === 'function' ? callback => {
+  const frameSource = options.requestFrame ?? (typeof requestAnimationFrame === 'function' ? callback => {
     requestAnimationFrame(() => callback());
   } : null);
+  // Every frame callback of an animator's counts itself, so a call made in
+  // one knows its animations commit in that frame.
+  const requestFrame = frameSource == null ? null : callback => {
+    frameSource(() => {
+      frameDepth += 1;
+      try {
+        callback();
+      } finally {
+        frameDepth -= 1;
+      }
+    });
+  };
+  const pseudoElement = options.pseudoElement;
   // Reduced Motion reads the person's settings and nothing else: no option
   // overrides them (design:reduced-motion DR4).
   const prefersReducedMotion = defaultPrefersReducedMotion;
@@ -462,7 +597,18 @@ export function createAnimator(element, options = {}) {
   let ownWillChange = null;
   /** The stylesheet's will-change when there is no inline value. */
   let sheetWillChange = '';
+  /**
+   * Whether sheetWillChange holds a read of the element's current style: it
+   * is read in the task after the element is attached, and again after each
+   * demotion, so a promotion (a drag's first move) reads no style in its
+   * own task.
+   */
+  let sheetWillChangeRead = false;
+  /** The pending read of sheetWillChange, cancelled with its element. */
+  let sheetReadTimer = null;
   let demoteTimer = null;
+  /** A pseudo-element is promoted through a custom property on its host. */
+  const promotionProperty = pseudoElement == null ? null : `--astryx-motion-will-change-${pseudoElement.replace(/^:+/, '')}`;
   /** Channels whose identity the last node held inline (see `attach`). */
   let heldIdentity = new Set();
 
@@ -532,18 +678,21 @@ export function createAnimator(element, options = {}) {
   // -- writing --------------------------------------------------------------
 
   const finalValue = property => segments.get(property)?.target ?? resting[property];
-  const writeInline = (channel, value) => {
-    if (target == null) {
+  const writeInline = (channel, value, release = true) => {
+    if (target == null || pseudoElement != null) {
       return;
     }
     touched.add(channel);
     const text = inlineText(channel, value);
-    if (text === IDENTITY_TEXT[channel]) {
-      // Identity leaves the element when nothing else would move it.
+    // An unchanged value is not written: a style write invalidates the
+    // element, and WebKit can repaint sticky content stale when that lands in
+    // the frame a scroll commits.
+    if (target.style.getPropertyValue(channel) !== text) {
       target.style.setProperty(channel, text);
+    }
+    if (release && text === IDENTITY_TEXT[channel]) {
+      // Identity leaves the element when nothing else would move it.
       releaseIdentity(channel);
-    } else {
-      target.style.setProperty(channel, text);
     }
   };
   const sampleTimes = (property, from, to, tolerance) => {
@@ -563,9 +712,9 @@ export function createAnimator(element, options = {}) {
     for (let e = 0; e + 1 < edges.length; e++) {
       const a = edges[e];
       const b = edges[e + 1];
-      // A 120 Hz grid, each interval split until the chord is within the
+      // A 30 Hz grid, each interval split until the chord is within the
       // tolerance at its quarter points.
-      const steps = Math.max(1, Math.ceil((b - a) / (1000 / 120)));
+      const steps = Math.max(1, Math.ceil((b - a) / SAMPLE_GRID_MS));
       const split = (t0, t1, depth) => {
         const v0 = value(t0);
         const v1 = t1 === b && breaks.includes(b) ? valueBefore(property, b) : value(t1);
@@ -588,14 +737,37 @@ export function createAnimator(element, options = {}) {
     }
     return times;
   };
+
+  /** A pseudo-element's resting value, held by a static filling animation. */
+  const hold = (channel, time) => {
+    if (target == null) {
+      return;
+    }
+    const value = format(channel, finalValue);
+    const animation = target.animate([{
+      [channel]: value
+    }, {
+      [channel]: value
+    }], {
+      duration: 1,
+      fill: 'both',
+      pseudoElement
+    });
+    animation.startTime = time;
+    running.set(channel, animation);
+  };
   const rebuild = (channel, time) => {
     const previous = running.get(channel);
     running.delete(channel);
     clearTimeout(retireTimers.get(channel));
     retireTimers.delete(channel);
-    // The element's inline style holds the end state, so its old animation
-    // can go first.
-    previous?.cancel();
+    // An element's inline style takes the value on screen below, so its old
+    // animation can go first. A pseudo-element has none: its old animation
+    // keeps holding the value until the new one exists (same task, no frame in
+    // between).
+    if (pseudoElement == null) {
+      previous?.cancel();
+    }
     const properties = CHANNELS[channel];
     // Settled curves become resting values.
     for (const property of properties) {
@@ -605,13 +777,23 @@ export function createAnimator(element, options = {}) {
         segments.delete(property);
       }
     }
-    writeInline(channel, finalValue);
     const moving = properties.filter(p => segments.has(p));
+    if (moving.length === 0 || target == null || typeof target.animate !== 'function') {
+      writeInline(channel, finalValue);
+    } else {
+      // The value on screen as the curve starts: what a frame painted before
+      // the compositor has the curve shows. The end is written at retire.
+      writeInline(channel, p => valueAt(p, time));
+    }
     if (target == null || typeof target.animate !== 'function') {
       previous?.cancel();
       return;
     }
     if (moving.length === 0) {
+      if (pseudoElement != null) {
+        hold(channel, time);
+      }
+      previous?.cancel();
       return;
     }
     // A channel rebuilt by an explicit call (set, rebase, a retarget of
@@ -624,6 +806,10 @@ export function createAnimator(element, options = {}) {
     const from = waiting?.provisional ?? time;
     const end = Math.min(from + MAX_DURATION_MS, Math.max(...moving.map(p => segments.get(p).start + segments.get(p).duration)));
     if (end <= from) {
+      if (pseudoElement != null) {
+        hold(channel, time);
+      }
+      previous?.cancel();
       return;
     }
     if (callGroup != null) {
@@ -646,10 +832,14 @@ export function createAnimator(element, options = {}) {
         }
       }
     }
+    // Read where the keyframes are baked: a page moved to another screen
+    // bakes its next motion for that screen.
+    const devicePixel = 1 / Math.max(1, globalThis.devicePixelRatio || 1);
     const collect = scale => {
       const times = new Set([from, end]);
       for (const property of moving) {
-        for (const t of sampleTimes(property, from, end, SAMPLE_TOLERANCE[property] * scale)) {
+        const tolerance = SAMPLE_TOLERANCE[property] * scale * (property === 'x' || property === 'y' ? devicePixel : 1);
+        for (const t of sampleTimes(property, from, end, tolerance)) {
           times.add(t);
         }
       }
@@ -699,10 +889,13 @@ export function createAnimator(element, options = {}) {
       duration: span,
       // The last keyframes hold the end state (END_HOLD_MS); filling both
       // ways also keeps it where an engine honors the fill on its compositor.
-      // The main thread drops the animation once it runs after the end; the
-      // inline style already holds the same values, so that changes no pixel.
+      // The main thread retires the animation once it runs after the end,
+      // writing the end inline in that task, so that changes no pixel.
       fill: 'both',
-      easing: 'linear'
+      easing: 'linear',
+      ...(pseudoElement != null ? {
+        pseudoElement
+      } : {})
     });
     if (waiting != null) {
       // From rest: no start time, so the browser starts the animation when
@@ -723,7 +916,16 @@ export function createAnimator(element, options = {}) {
 
   /**
    * Once the main thread runs after the curve's end, the animation leaves the
-   * running state: the element's inline style already shows the end values.
+   * running state: an element's end values are written inline in the task
+   * that cancels it; a pseudo-element's end value moves to a static holding
+   * animation, created before the long one goes.
+   *
+   * Why a timer at the curve's end: no browser event reports that an
+   * animation's time has reached a point inside its effect, and its
+   * `finished` comes only after the END_HOLD_MS tail, which would keep the
+   * element promoted and the animation alive for a minute. The timer is set
+   * on the curve's own clock and re-armed while a sampler pauses or seeks the
+   * animation, so it never retires a held one.
    */
   const scheduleRetire = (channel, animation, end) => {
     clearTimeout(retireTimers.get(channel));
@@ -736,11 +938,34 @@ export function createAnimator(element, options = {}) {
       // reaches the curve's end, never from the wall clock.
       const remaining = remainingCurve(animation);
       if (remaining != null && remaining > 0) {
-        retireTimers.set(channel, setTimeout(retire, animation.playState === 'paused' ? RETIRE_RECHECK_MS : remaining));
+        retireTimers.set(channel, setTimeout(retire, animation.playState === 'paused' ? RETIRE_RECHECK_MS : Math.max(remaining, END_RECHECK_MS)));
         return;
       }
       running.delete(channel);
+      // A pseudo-element holds its resting value, unless the stylesheet
+      // takes it back now (a borrowed dip that has ended).
+      const handsBack = channel === 'opacity' && borrowedOpacity != null && ![...landings].some(landing => landing.fadeIn?.isBorrowed === true);
+      if (pseudoElement != null && !handsBack) {
+        hold(channel, now());
+      } else {
+        // The end goes inline in the task that cancels the animation. Whether
+        // an identity end may leave the element is judged after the cancel:
+        // until then the end-state tail still holds the end, so the computed
+        // style would hide a stylesheet value (an opacity 0) under it.
+        writeInline(channel, finalValue, false);
+      }
+      // A call from rest the browser never started (finished from outside
+      // before its first frame, a sampler's finish()): read its start from the
+      // animation before the cancel takes it, and with nothing left to wait
+      // on the call keeps its own clock, so its landing is still armed.
+      const waiting = [...pendingGroups].filter(group => group.animations.includes(animation));
+      for (const group of waiting) {
+        syncGroup(group);
+      }
       animation.cancel();
+      for (const group of waiting) {
+        resolveGroup(group, group.provisional);
+      }
       releaseIdentity(channel);
       flushReleases();
     };
@@ -750,20 +975,30 @@ export function createAnimator(element, options = {}) {
   /** The element's own (stylesheet) opacity, read once when a dip starts. */
   const ownOpacity = () => {
     const view = target?.ownerDocument.defaultView;
-    const value = target == null ? NaN : Number.parseFloat(view?.getComputedStyle(target).getPropertyValue('opacity') ?? '');
+    const value = target == null ? NaN : Number.parseFloat(view?.getComputedStyle(target, pseudoElement ?? null).getPropertyValue('opacity') ?? '');
     return Number.isFinite(value) ? Math.min(1, Math.max(0, value)) : 1;
   };
 
   /**
    * Whether the animator holds an opacity of its own on the element: an inline
-   * value it wrote (a `set` over a stylesheet that hides or dims it). A dip
-   * returns to that value.
+   * value it wrote, or a pseudo-element's holding animation (a `set` over a
+   * stylesheet that hides or dims it). A dip returns to that value.
    */
-  const writesOwnOpacity = () => (target?.style.getPropertyValue('opacity') ?? '') !== '';
+  const writesOwnOpacity = () => pseudoElement == null ? (target?.style.getPropertyValue('opacity') ?? '') !== '' : running.has('opacity');
 
-  /** Gives the element's opacity back to its stylesheet: its inline value goes. */
+  /**
+   * Gives the element's opacity back to its stylesheet: an element's inline
+   * value goes; a pseudo-element, which has no inline style, loses the
+   * animation holding its value.
+   */
   const releaseOwnOpacity = () => {
-    target?.style.removeProperty('opacity');
+    if (pseudoElement == null) {
+      target?.style.removeProperty('opacity');
+      return;
+    }
+    const held = running.get('opacity');
+    running.delete('opacity');
+    held?.cancel();
   };
 
   /**
@@ -844,6 +1079,9 @@ export function createAnimator(element, options = {}) {
       releaseOwnOpacity();
       return;
     }
+    if (pseudoElement != null) {
+      return;
+    }
     if (target.style.getPropertyValue(channel) !== IDENTITY_TEXT[channel]) {
       return;
     }
@@ -903,9 +1141,17 @@ export function createAnimator(element, options = {}) {
 
   // -- promotion -------------------------------------------------------------
 
-  /** Writes the promoted channels as will-change. */
+  /** Writes the promoted channels as will-change (or the pseudo's property). */
   const writePromotion = element => {
     const list = [...promoted].join(', ');
+    if (promotionProperty != null) {
+      if (list === '') {
+        element.style.removeProperty(promotionProperty);
+      } else {
+        element.style.setProperty(promotionProperty, list);
+      }
+      return;
+    }
     if (list === '') {
       element.style.willChange = ownWillChange ?? '';
       ownWillChange = null;
@@ -914,8 +1160,12 @@ export function createAnimator(element, options = {}) {
     if (ownWillChange == null) {
       ownWillChange = element.style.willChange;
       // Without an inline value, the stylesheet's reasons stay alongside the
-      // promotion's (read once, as the promotion starts).
-      sheetWillChange = ownWillChange === '' ? element.ownerDocument.defaultView?.getComputedStyle(element).getPropertyValue('will-change') ?? '' : '';
+      // promotion's. They were read in the task after the element was
+      // attached; a promotion that comes first (an element attached in this
+      // task that moves at once) reads them now.
+      if (ownWillChange === '' && !sheetWillChangeRead) {
+        readSheetWillChange(element);
+      }
     }
     const base = ownWillChange !== '' ? ownWillChange : sheetWillChange;
     const own = base === 'auto' ? '' : base;
@@ -923,8 +1173,46 @@ export function createAnimator(element, options = {}) {
     element.style.willChange = [...reasons, ...promoted].join(', ');
   };
 
+  /** Reads the element's own will-change while no promotion of ours is written. */
+  const readSheetWillChange = element => {
+    sheetWillChange = element.ownerDocument.defaultView?.getComputedStyle(element).getPropertyValue('will-change') ?? '';
+    sheetWillChangeRead = true;
+  };
+
   /**
-   * Gives the element a compositing layer for
+   * Reads sheetWillChange in a task of its own, so a later promotion reads no
+   * style in its own task. Skipped while a promotion of ours is written,
+   * which the read would see (demote asks again), and for a node out of the
+   * document. A pseudo-element's promotion is its own property, with
+   * nothing to read.
+   */
+  const readSheetWillChangeLater = () => {
+    cancelSheetWillChangeRead();
+    sheetWillChangeRead = false;
+    if (target == null || promotionProperty != null) {
+      return;
+    }
+    const element = target;
+    sheetReadTimer = setTimeout(() => {
+      sheetReadTimer = null;
+      // A node out of the document has no style to read, and reading one
+      // still costs a style pass: a shared animator (animatorFor) is never
+      // detached, so its node can leave with this read waiting. Skipped, the
+      // read waits for a promotion that needs it.
+      if (target === element && promoted.size === 0 && element.isConnected) {
+        readSheetWillChange(element);
+      }
+    }, 0);
+  };
+  const cancelSheetWillChangeRead = () => {
+    if (sheetReadTimer != null) {
+      clearTimeout(sheetReadTimer);
+      sheetReadTimer = null;
+    }
+  };
+
+  /**
+   * Gives the element (or its pseudo-element) a compositing layer for
    * `channel` from the task that starts the motion: Mobile Safari runs an
    * animation whose start time is set from script on its compositor at its
    * first commit only if the element already has a layer.
@@ -971,6 +1259,8 @@ export function createAnimator(element, options = {}) {
     promoted.clear();
     if (target != null) {
       writePromotion(target);
+      // Its stylesheet may have changed its will-change since.
+      readSheetWillChangeLater();
     }
   };
 
@@ -982,7 +1272,7 @@ export function createAnimator(element, options = {}) {
    * pins its clock (`at`). Returns its start group, or null for an explicit
    * start.
    */
-  const beginGroup = (time, properties, at) => {
+  const beginGroup = (time, properties, at, start) => {
     if (target == null || typeof target.animate !== 'function') {
       return null;
     }
@@ -1009,7 +1299,11 @@ export function createAnimator(element, options = {}) {
       }
       return null;
     }
-    for (const channel of channels) {
+    // A call that continues motion starts now unless it asks for the
+    // browser's start (`commit`). `presented` asks only for a call from rest:
+    // an element still moving is not at rest, so a retarget starts now, from
+    // the value and velocity on screen (spec:AST-094 FR6).
+    for (const channel of start === 'commit' ? [] : channels) {
       for (const property of CHANNELS[channel]) {
         const segment = segments.get(property);
         if (segment != null && time < segment.start + segment.duration && (segment.group == null || segment.group.resolved)) {
@@ -1023,6 +1317,7 @@ export function createAnimator(element, options = {}) {
     });
     return {
       provisional: time,
+      fresh: false,
       segments: [],
       animations: [],
       channels: new Set(),
@@ -1033,7 +1328,7 @@ export function createAnimator(element, options = {}) {
   };
 
   /** Commits a call's changes, from rest when it has a start group. */
-  const commitCall = (group, owner, changed, time) => {
+  const commitCall = (group, owner, changed, time, presented = false) => {
     if (group != null) {
       for (const property of changed) {
         const segment = segments.get(property);
@@ -1043,6 +1338,88 @@ export function createAnimator(element, options = {}) {
         }
       }
     }
+    if (presented && group != null && requestFrame != null) {
+      // At rest until then: the animations, and the layer they promote, come
+      // two frames later. Promoting now, a layer at rest for two frames, left
+      // a stale paint of the element's rest in WebKit on iOS 26.2 (a title in
+      // a scroller inside a clipped card) after the motion ended.
+      // Each call waits its own two frames: one queued after another change
+      // flushed the queue, or after an earlier call's first frame, still
+      // waits its two.
+      const call = {
+        group,
+        changed
+      };
+      deferredCalls.push(call);
+      requestFrame(() => requestFrame(() => flushDeferredThrough(call)));
+      return;
+    }
+    startCall(group, changed, time);
+  };
+
+  /** Calls with `start: 'presented'` waiting for their second frame. */
+  const deferredCalls = [];
+
+  /** Creates the animations of the given waiting calls, in call order. */
+  const startDeferred = calls => {
+    for (const {
+      group,
+      changed
+    } of calls) {
+      // Not a channel that holds the curve of a later call still waiting: a
+      // later presented call that took a property over starts that channel
+      // with its own two frames. Every other property starts here, whatever
+      // its segment's group: a value Reduce Motion writes at once, or lands
+      // under a dip, has no curve of this call's.
+      const own = [];
+      let handedTo = null;
+      for (const property of changed) {
+        const holder = CHANNELS[CHANNEL_OF[property]].map(other => segments.get(other)?.group).find(waiting => waiting != null && waiting !== group && deferredCalls.some(call => call.group === waiting));
+        if (holder == null) {
+          own.push(property);
+          continue;
+        }
+        // A curve of this call's in that channel never ran: the element held
+        // it at its start. It starts with the later call, which creates the
+        // channel, dated from that call's start, so the model reads what the
+        // screen shows.
+        const segment = segments.get(property);
+        if (segment != null && segment.group === group) {
+          segment.start += holder.provisional - group.provisional;
+          segment.group = holder;
+          holder.segments.push(segment);
+          group.segments.splice(group.segments.indexOf(segment), 1);
+          handedTo = holder;
+        }
+      }
+      if (own.length === 0 && handedTo != null) {
+        // Everything this call still plays starts with the later call.
+        const adopter = handedTo;
+        group.adoptedBy = adopter;
+        void adopter.started.then(start => resolveGroup(group, start));
+        continue;
+      }
+      // From the call's own time: the curve starts at the browser's commit.
+      startCall(group, own, group.provisional);
+    }
+  };
+
+  /** Creates the animations of every waiting call, in call order. */
+  const flushDeferred = () => {
+    startDeferred(deferredCalls.splice(0));
+  };
+
+  /**
+   * A call's second frame: it starts, with every call queued before it (in
+   * call order), unless another change created it already.
+   */
+  const flushDeferredThrough = call => {
+    const index = deferredCalls.indexOf(call);
+    if (index >= 0) {
+      startDeferred(deferredCalls.splice(0, index + 1));
+    }
+  };
+  const startCall = (group, changed, time) => {
     callGroup = group;
     try {
       commit(changed, time);
@@ -1057,6 +1434,15 @@ export function createAnimator(element, options = {}) {
       return;
     }
     pendingGroups.add(group);
+    group.fresh = true;
+    // The task that creates the animations, not the call's: a presented
+    // call's is its second frame's callback, wherever in its frame the call
+    // was made.
+    group.task = markTask(now(), now);
+    group.madeInFrame = frameDepth > 0;
+    queueMicrotask(() => {
+      group.fresh = false;
+    });
     for (const animation of group.animations) {
       // A cancel before the first frame rejects each one's ready promise.
       animation.ready?.catch(() => {});
@@ -1070,7 +1456,26 @@ export function createAnimator(element, options = {}) {
     // or when its compositor starts them (Chromium). Read it in that first
     // frame, ahead of anything that might pause or seek the animations, and
     // when `ready` settles.
-    requestFrame?.(() => syncGroup(group));
+    requestFrame?.(() => {
+      syncGroup(group);
+      group.framed = true;
+      // Chromium's compositor starts a composited animation when the frame
+      // that commits it reaches it, and tells the page that start a frame or
+      // more later (longer under load). Until then the call would read as
+      // not started while the screen moves it, and a retarget or a rebase
+      // would replay its curve from the start. A call made in a task, still
+      // waiting in the first frame after it, starts now, which the compositor
+      // then takes as its start: the time this frame runs, not its timestamp,
+      // which after a block is the frame time from before the block. Only
+      // when this frame is the one that commits it: not for a call made in a
+      // frame callback, whose frame committed it already, nor when a block
+      // ran between the call and this frame (more than LATE_START_MS), after
+      // which this frame cannot tell a call made in a task from one a page's
+      // own frame callback made; those keep the browser's start.
+      if (!group.resolved && group.madeInFrame !== true && now() - (group.task?.first ?? group.provisional) <= LATE_START_MS && group.animations.some(animation => animation.startTime == null && animation.playState === 'running')) {
+        resolveGroup(group, now());
+      }
+    });
     ready.then(() => syncGroup(group), () => settleCancelled(group));
   };
 
@@ -1118,7 +1523,7 @@ export function createAnimator(element, options = {}) {
     }
     for (const animation of group.animations) {
       if (animation.startTime != null) {
-        resolveGroup(group, Number(animation.startTime));
+        resolveGroup(group, startAfterBlock(group, Number(animation.startTime)));
         return;
       }
     }
@@ -1139,10 +1544,16 @@ export function createAnimator(element, options = {}) {
     }
   };
 
-  /** Reads the start of every call whose first frame has been committed. */
+  /**
+   * Reads the start of every call whose first frame may have been committed:
+   * not those created in the running task, whose start the browser cannot
+   * have set (reading it there can cost a style update per call).
+   */
   const syncPending = () => {
     for (const group of pendingGroups) {
-      syncGroup(group);
+      if (!group.fresh) {
+        syncGroup(group);
+      }
     }
     syncFinished();
   };
@@ -1170,6 +1581,50 @@ export function createAnimator(element, options = {}) {
     }
   };
 
+  /**
+   * The start of a call from rest, on the frame that commits it. Chromium,
+   * like Core Animation, starts a pending animation when it commits it, so a
+   * main-thread block later in the call's task delays the motion; WebKit
+   * dates it at its last frame time before that task, so the first frame
+   * after the block would show it skipped into its curve. When the task ran
+   * on more than LATE_START_MS past its first call, a start the browser put
+   * by the task's first animations (a presented call's second frame, not the
+   * call) and more than LATE_START_MS before the call's first read (its
+   * `ready`, once the task has ended, or the first frame after it) moves to
+   * that read, with every animation of the call, and every call of the task
+   * moves to the same read. A shorter task, or a read other tasks delay,
+   * keeps the browser's start.
+   */
+  const startAfterBlock = (group, start) => {
+    const timeline = typeof document === 'undefined' ? null : document.timeline?.currentTime;
+    // A start well after the animations were created is the browser's
+    // commit of them.
+    if (timeline == null || group.framed === true || start > (group.task?.first ?? group.provisional) + LATE_START_MS) {
+      return start;
+    }
+    const {
+      task
+    } = group;
+    // A read in the task's first microtasks comes after its end too.
+    const ended = task?.ended ?? now();
+    if (task == null || ended - task.first <= LATE_START_MS) {
+      return start;
+    }
+    // Read once the task has ended (its `ready`) or in the first frame after
+    // it, both after the block; the task's other calls take the same read.
+    const at = task.at ?? Math.max(now(), timeline);
+    if (at - start <= LATE_START_MS) {
+      return start;
+    }
+    task.at = at;
+    for (const animation of group.animations) {
+      if (animation.playState !== 'idle') {
+        animation.startTime = at;
+      }
+    }
+    return at;
+  };
+
   /** Moves a call from rest onto the time the browser started it. */
   const resolveGroup = (group, start) => {
     if (group.resolved) {
@@ -1208,10 +1663,7 @@ export function createAnimator(element, options = {}) {
         }
         clearTimeout(owner.timer);
         const ends = group.segments.filter(segment => segment.owner === owner).map(segment => segment.start + segment.duration);
-        owner.timer = setTimeout(() => {
-          owner.timer = null;
-          settle(owner, true);
-        }, Math.max(0, Math.max(start, ...ends) - now()));
+        owner.timer = setTimeout(() => settleAtEnd(owner), Math.max(0, Math.max(start, ...ends) - now()));
       }
     }
     group.resolve(start);
@@ -1241,26 +1693,70 @@ export function createAnimator(element, options = {}) {
     }
     owner.resolve(finished);
   };
-  const makeHandle = (owner, properties, finished, time, group = null) => {
+
+  /**
+   * A handle whose curves have reached their end on the wall clock finishes,
+   * unless a sampler holds one of its animations (paused, or sought back):
+   * then it waits on that animation's own time, as retiring does
+   * (scheduleRetire), so `finished` never resolves under motion still on
+   * screen.
+   */
+  const settleAtEnd = owner => {
+    owner.timer = null;
+    let wait = 0;
+    for (const [channel, animation] of running) {
+      if (!CHANNELS[channel].some(property => segments.get(property)?.owner === owner)) {
+        continue;
+      }
+      const remaining = remainingCurve(animation);
+      if (remaining != null && remaining > 0) {
+        wait = Math.max(wait, animation.playState === 'paused' ? RETIRE_RECHECK_MS : Math.max(remaining, END_RECHECK_MS));
+      }
+    }
+    if (wait > 0) {
+      owner.timer = setTimeout(() => settleAtEnd(owner), wait);
+      return;
+    }
+    settle(owner, true);
+  };
+  const makeHandle = (owner, properties, finished, time, group = null, settlesWithLanding = false) => {
     const ends = properties.map(p => {
       const segment = segments.get(p);
       return segment != null && segment.owner === owner ? segment.start + segment.duration : time;
     });
     const end = Math.max(time, ...ends);
-    if (properties.length === 0 || end <= time) {
+    if (settlesWithLanding) {
+      // The landing it joined settles it.
+    } else if (properties.length === 0 || end <= time) {
       settle(owner, true);
     } else {
       // Interruptions settle false as they happen (interrupt); reaching the
       // end untouched is completion.
-      owner.timer = setTimeout(() => {
-        owner.timer = null;
-        settle(owner, true);
-      }, Math.max(0, end - now()));
+      owner.timer = setTimeout(() => settleAtEnd(owner), Math.max(0, end - now()));
+    }
+    // The call's own curves, as it started them.
+    const curves = new Map();
+    for (const property of properties) {
+      const segment = segments.get(property);
+      if (segment != null && segment.owner === owner) {
+        curves.set(property, segment);
+      }
     }
     const handle = {
       properties,
       finished,
       started: group?.started ?? Promise.resolve(time),
+      curve: property => {
+        const segment = curves.get(property === 'scale' ? 'scaleX' : property);
+        if (segment == null) {
+          return null;
+        }
+        return {
+          duration: segment.duration / 1000,
+          at: t => t * 1000 >= segment.duration ? segment.target : segment.at(Math.max(0, t * 1000)),
+          velocity: t => t * 1000 >= segment.duration ? 0 : segment.speed(t * 1000)
+        };
+      },
       value: (property, at = now()) => {
         syncPending();
         return valueAt(property, at);
@@ -1309,7 +1805,9 @@ export function createAnimator(element, options = {}) {
     if (from === to && velocity === 0) {
       return null;
     }
-    const curve = solveSpring(toSpring(spring), {
+    // The motion role it plays: its table value (DEC-15).
+    const resolved = resolveMotion(target, spring);
+    const curve = solveSpring(toSpring(resolved), {
       from,
       to,
       velocity
@@ -1323,11 +1821,58 @@ export function createAnimator(element, options = {}) {
       speed: t => curve.velocity(t / 1000),
       jumps: [],
       owner,
-      spring
+      spring: resolved
+    };
+  };
+
+  /** The retarget of `additive`: the old curve plus a spring of the difference. */
+  const additiveSegment = (owner, property, start, to, spring, old) => {
+    const oldEnd = old.start + old.duration;
+    const resolved = resolveMotion(target, spring);
+    const delta = solveSpring(toSpring(resolved), {
+      from: 0,
+      to: to - old.target,
+      velocity: 0
+    });
+    const deltaMs = Math.min(MAX_DURATION_MS, delta.settleTime(SETTLE_THRESHOLD[property]) * 1000);
+    const ownAt = t => t >= deltaMs ? to - old.target : delta.value(t / 1000);
+    const oldAt = time => time >= oldEnd ? old.target : old.at(Math.max(0, time - old.start));
+    return {
+      start,
+      duration: Math.min(MAX_DURATION_MS, Math.max(oldEnd - start, deltaMs)),
+      target: to,
+      at: t => oldAt(start + t) + ownAt(t),
+      speed: t => (start + t >= oldEnd ? 0 : old.speed(start + t - old.start)) + (t >= deltaMs ? 0 : delta.velocity(t / 1000)),
+      jumps: old.jumps.map(jump => old.start + jump - start).filter(jump => jump > 0),
+      owner,
+      spring: resolved
+    };
+  };
+
+  /**
+   * `additive` for a played curve: the old curve plus the new curve's shape,
+   * scaled to the difference between the two targets.
+   */
+  const additiveCurveSegment = (owner, start, curve, old) => {
+    const from = curve.at(0);
+    const to = curve.at(curve.duration);
+    const scale = (to - old.target) / (to - from);
+    const ms = Math.min(MAX_DURATION_MS, curve.duration * 1000);
+    const oldEnd = old.start + old.duration;
+    const oldAt = time => time >= oldEnd ? old.target : old.at(Math.max(0, time - old.start));
+    return {
+      start,
+      duration: Math.min(MAX_DURATION_MS, Math.max(oldEnd - start, ms)),
+      target: to,
+      at: t => oldAt(start + t) + (t >= ms ? to - old.target : (curve.at(t / 1000) - from) * scale),
+      speed: t => (start + t >= oldEnd ? 0 : old.speed(start + t - old.start)) + (t >= ms ? 0 : curve.velocity(t / 1000) * scale),
+      jumps: old.jumps.map(jump => old.start + jump - start).filter(jump => jump > 0),
+      owner
     };
   };
   const fadeSegment = (owner, start, stops, jumps = []) => {
-    const ease = cubicBezier(reducedMotionCrossFade.curve);
+    registerReducedMotionCrossFade();
+    const ease = cubicBezier(resolveMotion(target, reducedMotionCrossFade.curve));
     const duration = stops[stops.length - 1].at;
     const at = t => {
       for (let i = 0; i + 1 < stops.length; i++) {
@@ -1447,6 +1992,27 @@ export function createAnimator(element, options = {}) {
     };
   };
 
+  /**
+   * A call joins the newest waiting dip: it takes the landing over and
+   * settles when the dip ends, and the call it replaces lands with it. Each
+   * value keeps the call whose move it is.
+   */
+  const joinWaitingDip = owner => {
+    const dip = [...landings].reverse().find(landing => landing.fadeIn != null);
+    if (dip == null) {
+      settle(owner, true);
+      return;
+    }
+    for (const property of dip.values.keys()) {
+      if (!dip.owners.has(property)) {
+        dip.owners.set(property, dip.owner);
+      }
+    }
+    dip.carried.push(dip.owner);
+    carriedOwners.add(dip.owner);
+    dip.owner = owner;
+  };
+
   /** Where opacity is heading: past a waiting landing's fade back in. */
   const opacityHeading = () => {
     let to = finalValue('opacity');
@@ -1500,8 +2066,9 @@ export function createAnimator(element, options = {}) {
    * never an animation (DR2: opacity only), so it is never shown in the wrong
    * place. In a dip the fade back in starts from here and takes what is left
    * of the cross-fade, so the dip ends when it was due even when a busy main
-   * thread runs this timer late; past the whole fade back in (over 100 ms
-   * late) the element appears at once where it landed.
+   * thread runs this timer late; past the whole fade back in (100 ms late or
+   * more) the element appears at once where it landed, with no animation,
+   * and the call settles then.
    */
   const land = landing => {
     landings.delete(landing);
@@ -1514,13 +2081,16 @@ export function createAnimator(element, options = {}) {
       changed.push(property);
     }
     let end = time;
-    if (landing.fadeIn != null) {
-      // The fade back in takes what is left of the cross-fade: a timer that
-      // a busy main thread runs late shortens it, so the dip still ends
-      // when it was due (design:reduced-motion DR2, 200 ms or less), and the
-      // element is never shown before it lands.
-      const late = landing.due == null ? 0 : Math.max(0, time - landing.due);
-      const ms = Math.max(1, landing.fadeIn.ms - late);
+    // The fade back in takes what is left of the cross-fade: a timer that a
+    // busy main thread runs late shortens it, so the dip still ends when it
+    // was due (design:reduced-motion DR2, 200 ms or less), and the element is
+    // never shown before it lands. Past the whole fade back in nothing is
+    // left: the element appears at once, a plain write with no fade for the
+    // browser to start a frame later, so the call settles showing it.
+    const late = landing.due == null ? 0 : Math.max(0, time - landing.due);
+    const appears = landing.fadeIn != null && late >= landing.fadeIn.ms;
+    if (landing.fadeIn != null && !appears) {
+      const ms = landing.fadeIn.ms - late;
       segments.set('opacity', fadeSegment(landing.owner, time, [{
         at: 0,
         value: valueAt('opacity', time)
@@ -1530,17 +2100,20 @@ export function createAnimator(element, options = {}) {
       }]));
       changed.push('opacity');
       end = time + ms;
+    } else if (landing.fadeIn != null) {
+      segments.delete('opacity');
+      resting.opacity = landing.fadeIn.isBorrowed === true ? IDENTITY.opacity : landing.fadeIn.to;
+      changed.push('opacity');
     } else if (landing.restore != null) {
       segments.delete('opacity');
       resting.opacity = landing.restoreIsBorrowed === true ? IDENTITY.opacity : landing.restore;
       changed.push('opacity');
     }
     commit(changed, time);
-    if (landing.restoreIsBorrowed === true) {
+    if (landing.restoreIsBorrowed === true || appears && landing.fadeIn?.isBorrowed === true) {
       // The stylesheet owns its opacity again.
       releaseOwnOpacity();
-    }
-    if (landing.fadeIn?.isBorrowed === true) {
+    } else if (landing.fadeIn?.isBorrowed === true) {
       // The fade back in returns to the stylesheet's opacity: it owns it
       // again once the fade ends (releaseIdentity).
       borrowedOpacity = landing.fadeIn.to;
@@ -1561,10 +2134,7 @@ export function createAnimator(element, options = {}) {
     if (end <= time) {
       settle(owner, true);
     } else {
-      owner.timer = setTimeout(() => {
-        owner.timer = null;
-        settle(owner, true);
-      }, Math.max(0, end - now()));
+      owner.timer = setTimeout(() => settleAtEnd(owner), Math.max(0, end - now()));
     }
   };
 
@@ -1645,6 +2215,9 @@ export function createAnimator(element, options = {}) {
     },
     get hasPendingLanding() {
       return landings.size > 0;
+    },
+    get hasWaitingDip() {
+      return [...landings].some(landing => landing.fadeIn != null);
     }
   };
 
@@ -1677,7 +2250,8 @@ export function createAnimator(element, options = {}) {
       next,
       holds: plan.holds,
       landing: plan.landing,
-      borrowed: plan.borrowed
+      borrowed: plan.borrowed,
+      joins: plan.joins
     };
   };
   const animator = {
@@ -1694,6 +2268,7 @@ export function createAnimator(element, options = {}) {
       if (next === target) {
         return;
       }
+      flushDeferred();
       if (next == null) {
         // Unmount, unless a node replaces this one in the same task (React's
         // replacement order: attach(null), then the new node): nothing is
@@ -1729,6 +2304,9 @@ export function createAnimator(element, options = {}) {
               }
               retireTimers.clear();
               demote();
+              // demote() asks for a fresh will-change read of the node it
+              // demotes; a detached node gets none.
+              cancelSheetWillChangeRead();
             });
             lastDetached = null;
             const time = now();
@@ -1747,7 +2325,11 @@ export function createAnimator(element, options = {}) {
       }
       // After the landing's commit, which can promote the element again.
       demote();
+      // A pseudo-element holds an identity with a static animation, which the
+      // cancel below drops: note the channels to hold again on the next node
+      // (never a borrowed opacity, which is the stylesheet's).
       const isOpacityBorrowed = borrowedOpacity != null || [...landings].some(landing => landing.restoreIsBorrowed === true);
+      const pseudoHeld = pseudoElement == null || target == null ? null : new Set(Object.keys(CHANNELS).filter(channel => running.has(channel) && !(channel === 'opacity' && isOpacityBorrowed) && CHANNELS[channel].every(p => !segments.has(p) && resting[p] === IDENTITY[p])));
       for (const animation of running.values()) {
         animation.cancel();
       }
@@ -1767,10 +2349,13 @@ export function createAnimator(element, options = {}) {
       // differs, kept through a detach for the node that comes next.
       if (target != null) {
         const outgoing = target;
-        heldIdentity = new Set(Object.keys(CHANNELS).filter(channel => outgoing.style.getPropertyValue(channel) === IDENTITY_TEXT[channel]));
+        heldIdentity = pseudoHeld ?? new Set(Object.keys(CHANNELS).filter(channel => outgoing.style.getPropertyValue(channel) === IDENTITY_TEXT[channel]));
       }
       const held = heldIdentity;
       target = next;
+      // A new node: its own will-change is read again.
+      cancelSheetWillChangeRead();
+      sheetWillChangeRead = false;
       if (target == null) {
         return;
       }
@@ -1792,11 +2377,17 @@ export function createAnimator(element, options = {}) {
         } else if (held.has(channel)) {
           // An identity the animator held inline over a stylesheet that
           // differs goes onto the new node too (writeInline keeps it only
-          // where the new node's stylesheet still differs).
-          writeInline(channel, property => resting[property]);
+          // where the new node's stylesheet still differs); a pseudo-element's
+          // is held again.
+          if (pseudoElement != null) {
+            hold(channel, time);
+          } else {
+            writeInline(channel, property => resting[property]);
+          }
         }
       }
       flushReleases();
+      readSheetWillChangeLater();
     },
     get(property, time = now()) {
       syncPending();
@@ -1806,8 +2397,9 @@ export function createAnimator(element, options = {}) {
       syncPending();
       return velocityAt(property === 'scale' ? 'scaleX' : property, time);
     },
-    set(values) {
+    set(values, setOptions = {}) {
       syncPending();
+      flushDeferred();
       const time = now();
       const next = expand(values);
       for (const [property, value] of Object.entries(next)) {
@@ -1816,13 +2408,18 @@ export function createAnimator(element, options = {}) {
         resting[property] = value;
       }
       // Direct manipulation: the layer makes each write a composite only.
-      for (const property of Object.keys(next)) {
-        promote(CHANNEL_OF[property]);
+      if (setOptions.promote !== false) {
+        for (const property of Object.keys(next)) {
+          promote(CHANNEL_OF[property]);
+        }
       }
       commit(Object.keys(next), time);
     },
     animate(to, transition, animateOptions = {}) {
       syncPending();
+      if (animateOptions.start !== 'presented') {
+        flushDeferred();
+      }
       const time = animateOptions.at ?? now();
       const targets = expand(to);
       const velocities = expand(transition.velocity ?? {});
@@ -1839,11 +2436,16 @@ export function createAnimator(element, options = {}) {
         Object.assign(next, plan.next);
       } else {
         for (const property of properties) {
+          const running = animateOptions.additive === true && velocities[property] == null ? segmentAt(property, time) : null;
+          if (running != null && !isHeld(running)) {
+            next[property] = additiveSegment(owner, property, time, targets[property], transition.spring, running);
+            continue;
+          }
           const velocity = velocities[property] ?? velocityAt(property, time);
           next[property] = springSegment(owner, property, time, targets[property], transition.spring, velocity);
         }
       }
-      const group = beginGroup(time, Object.keys(next), animateOptions.at);
+      const group = beginGroup(time, Object.keys(next), animateOptions.at, animateOptions.start);
       const adopted = plan?.landing != null ? adoptLandings(plan.landing, Object.keys(next)) : null;
       const changed = [];
       for (const [property, segment] of Object.entries(next)) {
@@ -1858,12 +2460,15 @@ export function createAnimator(element, options = {}) {
           segments.set(property, segment);
         }
       }
-      commitCall(group, owner, changed, time);
+      commitCall(group, owner, changed, time, animateOptions.start === 'presented' && animateOptions.at == null);
       if (plan?.borrowed != null) {
         // The dip's own commit cleared it; the borrow lasts the dip.
         borrowedOpacity = plan.borrowed;
       }
-      const handle = makeHandle(owner, changed, finished, time, group);
+      if (plan?.joins === true) {
+        joinWaitingDip(owner);
+      }
+      const handle = plan?.joins === true ? makeHandle(owner, ['opacity'], finished, time, group, true) : makeHandle(owner, changed, finished, time, group);
       if (plan?.landing != null) {
         scheduleLanding(owner, handle.started, plan.landing, adopted);
       }
@@ -1871,6 +2476,9 @@ export function createAnimator(element, options = {}) {
     },
     play(curves, playOptions = {}) {
       syncPending();
+      if (playOptions.start !== 'presented') {
+        flushDeferred();
+      }
       const time = playOptions.at ?? now();
       const {
         owner,
@@ -1905,6 +2513,11 @@ export function createAnimator(element, options = {}) {
           continue;
         }
         const curve = byProperty[property];
+        const running = playOptions.additive === true ? segmentAt(property, time) : null;
+        if (running != null && !isHeld(running) && curve.duration > 0 && Math.abs(curve.at(curve.duration) - curve.at(0)) > 1e-9) {
+          next[property] = additiveCurveSegment(owner, time, curve, running);
+          continue;
+        }
         next[property] = curve.duration === 0 ? null : {
           start: time,
           duration: Math.min(MAX_DURATION_MS, curve.duration * 1000),
@@ -1915,7 +2528,7 @@ export function createAnimator(element, options = {}) {
           owner
         };
       }
-      const group = beginGroup(time, Object.keys(next), playOptions.at);
+      const group = beginGroup(time, Object.keys(next), playOptions.at, playOptions.start);
       const adopted = plan?.landing != null ? adoptLandings(plan.landing, Object.keys(next)) : null;
       const changed = [];
       for (const [property, segment] of Object.entries(next)) {
@@ -1930,12 +2543,15 @@ export function createAnimator(element, options = {}) {
           segments.set(property, segment);
         }
       }
-      commitCall(group, owner, changed, time);
+      commitCall(group, owner, changed, time, playOptions.start === 'presented' && playOptions.at == null);
       if (plan?.borrowed != null) {
         // The dip's own commit cleared it; the borrow lasts the dip.
         borrowedOpacity = plan.borrowed;
       }
-      const handle = makeHandle(owner, changed, finished, time, group);
+      if (plan?.joins === true) {
+        joinWaitingDip(owner);
+      }
+      const handle = plan?.joins === true ? makeHandle(owner, ['opacity'], finished, time, group, true) : makeHandle(owner, changed, finished, time, group);
       if (plan?.landing != null) {
         scheduleLanding(owner, handle.started, plan.landing, adopted);
       }
@@ -1943,6 +2559,7 @@ export function createAnimator(element, options = {}) {
     },
     decay(curves, decayOptions = {}) {
       syncPending();
+      flushDeferred();
       const time = decayOptions.at ?? now();
       // Under Reduce Motion only momentum keeps moving (DR2, DEC-2): a curve
       // that is a transition plays as `animate` does, a cross-fade or at once.
@@ -2009,6 +2626,7 @@ export function createAnimator(element, options = {}) {
     },
     stop(properties) {
       syncPending();
+      flushDeferred();
       const time = now();
       const list = properties == null ? PROPERTIES : expandList(properties);
       const changed = [];
@@ -2037,6 +2655,7 @@ export function createAnimator(element, options = {}) {
     },
     rebase(deltas, rebaseOptions = {}) {
       syncPending();
+      flushDeferred();
       const time = rebaseOptions.at ?? now();
       const changed = [];
       const owners = new Set();
@@ -2108,10 +2727,7 @@ export function createAnimator(element, options = {}) {
             end = Math.max(end, segment.start + segment.duration);
           }
         }
-        owner.timer = setTimeout(() => {
-          owner.timer = null;
-          settle(owner, true);
-        }, Math.max(0, end - now()));
+        owner.timer = setTimeout(() => settleAtEnd(owner), Math.max(0, end - now()));
       }
     },
     async atRest(properties) {
@@ -2155,6 +2771,7 @@ export function createAnimator(element, options = {}) {
       });
     },
     dispose() {
+      flushDeferred();
       // A Reduce Motion move still waiting to land is written at its end
       // state, so the element is left visible where it was going (the node
       // just detached, when an unmount is pending); its call and the calls
@@ -2183,6 +2800,7 @@ export function createAnimator(element, options = {}) {
       retireTimers.clear();
       handBackBorrow();
       demote();
+      cancelSheetWillChangeRead();
       target = null;
     }
   };