@astryxdesign/core 0.7.5 → 0.7.6-canary.00146a7

package/src/motion/animator.ts

@@ -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,41 @@
  * 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';
 import {solveSpring, toSpring, type SpringDescription} from './spring';
-import {reducedMotionCrossFade} from './uikit/timing';
+import {resolveMotion} from './resolveMotion';
+import {
+  reducedMotionCrossFade,
+  registerReducedMotionCrossFade,
+} from './uikit/timing';
 import {planReducedMotion, type ReducedMotionView} from './reducedMotionPlan';
 
 /**
@@ -192,6 +241,36 @@ export interface AnimateOptions {
    * changes nothing.
    */
   crossfadeAs?: 'entrance' | 'exit';
+  /**
+   * When the call's animations start. By default a call from rest starts
+   * when the browser commits it, and a call that continues motion on screen
+   * (a retarget) starts now, from the value on screen. Ignored with `at`.
+   * - `'commit'`: a call that continues motion also starts when the browser
+   *   commits it, dated by the browser rather than by the main thread, as a
+   *   call from rest is.
+   * - `'presented'`: a call from rest leaves its element at rest and creates
+   *   its animations two frames later, once the frame that carries the
+   *   element at rest has been presented; they then start at their commit. A
+   *   busy UI process delays the motion instead of skipping into it, for two
+   *   frames more before an idle start. Any other change to the animator
+   *   before then creates the animations first, in call order. A call that
+   *   continues motion on screen (a retarget) starts now, as by default.
+   */
+  start?: 'commit' | 'presented';
+  /**
+   * A call that retargets a curve on screen adds to it instead of replacing
+   * it, as UIKit's animations do: the old curve keeps going (past its end, at
+   * its target) and a spring of the difference between the two targets runs
+   * from 0 on top, in the same animation. Its value and velocity at the call
+   * are the old curve's, so whichever frame first shows it (WebKit can apply
+   * a new curve tens of ms late), nothing steps back. Ignored for a property
+   * at rest or still waiting for the browser's start, for a property given a
+   * velocity, and under Reduced Motion. Use it for a played curve that starts
+   * at rest (an eased reversal) while the property moves; a spring retarget
+   * on the same spring moves the same either way, and a curve that already
+   * continues the velocity on screen must not add to it.
+   */
+  additive?: boolean;
 }
 
 /**
@@ -219,7 +298,28 @@ export interface MotionCurve {
 /**
  * Options of `createAnimator`.
  */
+/** How `set` puts values in place. */
+export interface SetOptions {
+  /**
+   * Whether the write promotes its channels to a compositing layer, as a
+   * drag's per-frame writes need so each is a composite only (default
+   * true). `false` writes the values and nothing else: a one-off switch that
+   * must not give its element a layer, such as a veil under a sticky header
+   * switched during a programmatic scroll (on iOS 26.2, a layer there blanks
+   * the header's painted items for about two frames). A channel another
+   * motion keeps promoted stays promoted, and a channel with other motion
+   * still running gets its animation's layer as usual.
+   */
+  promote?: boolean;
+}
+
 export interface AnimatorOptions {
+  /**
+   * Animates a pseudo-element of the element instead (`'::backdrop'` of a
+   * native dialog). A pseudo-element has no inline style, so a static filling
+   * animation holds its value after a curve ends and after `set`.
+   */
+  pseudoElement?: string;
   /** Starting values; identity by default. Never read from the DOM. */
   initial?: MotionValues;
   /** Clock in ms on the document timeline's time base. */
@@ -252,6 +352,14 @@ export interface MotionHandle {
   value(property: MotionProperty, time?: number): number;
   /** Presentation velocity of a property at `time`, units/s. */
   velocity(property: MotionProperty, time?: number): number;
+  /**
+   * The curve this call started on `property` (`scale` reads `scaleX`),
+   * in seconds from the call's start: what the keyframes play. Null for a
+   * property the call does not move, or moves without travel (Reduced
+   * Motion). Map it onto a companion property with `mapProgress`, and play
+   * that on the same clock.
+   */
+  curve(property: MotionProperty | 'scale'): MotionCurve | null;
   /** New targets for this call's properties, keeping their velocity. */
   retarget(
     to: MotionValues,
@@ -292,7 +400,7 @@ export interface Animator {
    * of a drag (one style write per channel, no animation when nothing else
    * on the channel is moving).
    */
-  set(values: MotionValues): void;
+  set(values: MotionValues, options?: SetOptions): void;
   /** Springs to `to` from the presentation values. */
   animate(
     to: MotionValues,
@@ -386,10 +494,28 @@ interface Segment {
  */
 interface StartGroup {
   readonly provisional: number;
+  /**
+   * Its animations were created in the running task: the browser cannot have
+   * started them yet, so nothing reads their start time until it ends.
+   */
+  fresh: boolean;
   readonly segments: Segment[];
   readonly animations: Animation[];
   readonly channels: Set<Channel>;
   resolved: boolean;
+  /**
+   * The first frame after the call has run: a start read later is the
+   * browser's, whatever it says (startAfterBlock).
+   */
+  framed?: boolean;
+  /**
+   * Made in an animation-frame callback of an animator's own (a presented
+   * call's second frame): the browser commits its animations in that frame,
+   * so the frame after it is not the one that starts them.
+   */
+  madeInFrame?: boolean;
+  /** The task it was made in, with every call made in that task. */
+  task?: TaskMark;
   /** A later call in the same task that took over its curves. */
   adoptedBy?: StartGroup;
   readonly resolve: (start: number) => void;
@@ -414,7 +540,12 @@ interface HandleState {
  * dip, the fade back in.
  */
 interface Landing {
-  readonly owner: HandleState;
+  /**
+   * The call that settles when the landing (and its fade back in) ends; a
+   * call that joins the dip takes it over, and the call it replaces is
+   * carried.
+   */
+  owner: HandleState;
   /** ms after the call's start. */
   readonly at: number;
   readonly values: Map<MotionProperty, number>;
@@ -454,6 +585,8 @@ interface ReducedPlan {
   > | null;
   /** The stylesheet opacity a dip borrowed (no call owns opacity). */
   readonly borrowed?: number | null;
+  /** The call joins the waiting dip (see the planner's `joins`). */
+  readonly joins?: boolean;
 }
 
 const PROPERTIES: ReadonlyArray<MotionProperty> = [
@@ -491,32 +624,109 @@ export const SETTLE_THRESHOLD: Record<MotionProperty, number> = {
   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: Record<MotionProperty, number> = {
-  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).
+ */
+interface TaskMark {
+  /**
+   * When its first call from rest created animations: the call itself, or a
+   * presented call's second frame.
+   */
+  readonly first: number;
+  /** When the task ended, at its first microtask. */
+  ended?: number;
+  /** The start every call of a blocked task moves to, set by its first read. */
+  at?: number;
+}
+
+/** The task the current calls from rest are made in, until it ends. */
+let openTask: TaskMark | null = 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: number, clock: () => number): TaskMark {
+  if (openTask == null) {
+    const task: TaskMark = {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;
 
@@ -558,10 +768,10 @@ function format(
   }
 }
 
-const shared = new WeakMap<HTMLElement, Animator>();
+const shared = new WeakMap<HTMLElement, Map<string, Animator>>();
 
 /**
- * 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
@@ -573,10 +783,16 @@ export function animatorFor(
   element: HTMLElement,
   options: AnimatorOptions = {},
 ): Animator {
-  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;
 }
@@ -693,8 +909,9 @@ const REDUCED_TRANSITION: SpringTransition = {
  * @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']);
@@ -705,13 +922,29 @@ export function createAnimator(
   options: AnimatorOptions = {},
 ): Animator {
   const now = options.now ?? defaultNow;
-  const requestFrame =
+  const frameSource =
     options.requestFrame ??
     (typeof requestAnimationFrame === 'function'
       ? (callback: () => void) => {
           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: () => void) => {
+          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;
@@ -761,7 +994,21 @@ export function createAnimator(
   let ownWillChange: string | null = 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: ReturnType<typeof setTimeout> | null = null;
   let demoteTimer: ReturnType<typeof setTimeout> | null = 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<Channel>();
 
@@ -842,18 +1089,22 @@ export function createAnimator(
   const writeInline = (
     channel: Channel,
     value: (property: MotionProperty) => number,
+    release = true,
   ) => {
-    if (target == null) {
+    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);
     }
   };
 
@@ -881,9 +1132,9 @@ export function createAnimator(
     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: number, t1: number, depth: number) => {
         const v0 = value(t0);
         const v1 =
@@ -908,14 +1159,33 @@ export function createAnimator(
     return times;
   };
 
+  /** A pseudo-element's resting value, held by a static filling animation. */
+  const hold = (channel: Channel, time: number) => {
+    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: Channel, time: number) => {
     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) {
@@ -925,13 +1195,27 @@ export function createAnimator(
         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
@@ -958,6 +1242,10 @@ export function createAnimator(
       ),
     );
     if (end <= from) {
+      if (pseudoElement != null) {
+        hold(channel, time);
+      }
+      previous?.cancel();
       return;
     }
     if (callGroup != null) {
@@ -980,15 +1268,17 @@ export function createAnimator(
         }
       }
     }
+    // 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: number) => {
       const times = new Set<number>([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);
         }
       }
@@ -1037,10 +1327,11 @@ export function createAnimator(
       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',
+      ...(pseudoElement != null ? {pseudoElement} : {}),
     });
     if (waiting != null) {
       // From rest: no start time, so the browser starts the animation when
@@ -1061,7 +1352,16 @@ export function createAnimator(
 
   /**
    * 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: Channel,
@@ -1082,13 +1382,43 @@ export function createAnimator(
           channel,
           setTimeout(
             retire,
-            animation.playState === 'paused' ? RETIRE_RECHECK_MS : remaining,
+            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();
     };
@@ -1102,22 +1432,36 @@ export function createAnimator(
       target == null
         ? NaN
         : Number.parseFloat(
-            view?.getComputedStyle(target).getPropertyValue('opacity') ?? '',
+            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 = (): boolean =>
-    (target?.style.getPropertyValue('opacity') ?? '') !== '';
+    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();
   };
 
   /**
@@ -1202,6 +1546,9 @@ export function createAnimator(
       releaseOwnOpacity();
       return;
     }
+    if (pseudoElement != null) {
+      return;
+    }
     if (target.style.getPropertyValue(channel) !== IDENTITY_TEXT[channel]) {
       return;
     }
@@ -1265,9 +1612,17 @@ export function createAnimator(
 
   // -- promotion -------------------------------------------------------------
 
-  /** Writes the promoted channels as will-change. */
+  /** Writes the promoted channels as will-change (or the pseudo's property). */
   const writePromotion = (element: HTMLElement) => {
     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;
@@ -1276,13 +1631,12 @@ export function createAnimator(
     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;
@@ -1293,8 +1647,50 @@ export function createAnimator(
     element.style.willChange = [...reasons, ...promoted].join(', ');
   };
 
+  /** Reads the element's own will-change while no promotion of ours is written. */
+  const readSheetWillChange = (element: HTMLElement) => {
+    sheetWillChange =
+      element.ownerDocument.defaultView
+        ?.getComputedStyle(element)
+        .getPropertyValue('will-change') ?? '';
+    sheetWillChangeRead = true;
+  };
+
+  /**
+   * 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 a compositing layer for
+   * 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.
@@ -1347,6 +1743,8 @@ export function createAnimator(
     promoted.clear();
     if (target != null) {
       writePromotion(target);
+      // Its stylesheet may have changed its will-change since.
+      readSheetWillChangeLater();
     }
   };
 
@@ -1362,6 +1760,7 @@ export function createAnimator(
     time: number,
     properties: Iterable<MotionProperty>,
     at: number | undefined,
+    start?: AnimateOptions['start'],
   ): StartGroup | null => {
     if (target == null || typeof target.animate !== 'function') {
       return null;
@@ -1389,7 +1788,11 @@ export function createAnimator(
       }
       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 (
@@ -1407,6 +1810,7 @@ export function createAnimator(
     });
     return {
       provisional: time,
+      fresh: false,
       segments: [],
       animations: [],
       channels: new Set(),
@@ -1422,6 +1826,7 @@ export function createAnimator(
     owner: HandleState,
     changed: MotionProperty[],
     time: number,
+    presented = false,
   ) => {
     if (group != null) {
       for (const property of changed) {
@@ -1432,6 +1837,99 @@ export function createAnimator(
         }
       }
     }
+    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: {group: StartGroup; changed: MotionProperty[]}[] = [];
+
+  /** Creates the animations of the given waiting calls, in call order. */
+  const startDeferred = (
+    calls: {group: StartGroup; changed: MotionProperty[]}[],
+  ) => {
+    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: MotionProperty[] = [];
+      let handedTo: StartGroup | null = 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: {
+    group: StartGroup;
+    changed: MotionProperty[];
+  }) => {
+    const index = deferredCalls.indexOf(call);
+    if (index >= 0) {
+      startDeferred(deferredCalls.splice(0, index + 1));
+    }
+  };
+
+  const startCall = (
+    group: StartGroup | null,
+    changed: MotionProperty[],
+    time: number,
+  ) => {
     callGroup = group;
     try {
       commit(changed, time);
@@ -1446,6 +1944,15 @@ export function createAnimator(
       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 as Partial<Animation>).ready?.catch(() => {});
@@ -1459,7 +1966,34 @@ export function createAnimator(
     // 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),
@@ -1516,7 +2050,10 @@ export function createAnimator(
     }
     for (const animation of group.animations) {
       if (animation.startTime != null) {
-        resolveGroup(group, Number(animation.startTime));
+        resolveGroup(
+          group,
+          startAfterBlock(group, Number(animation.startTime)),
+        );
         return;
       }
     }
@@ -1549,10 +2086,16 @@ export function createAnimator(
     }
   };
 
-  /** 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();
   };
@@ -1580,6 +2123,55 @@ export function createAnimator(
     }
   };
 
+  /**
+   * 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: StartGroup, start: number): number => {
+    const timeline =
+      typeof document === 'undefined'
+        ? null
+        : (document.timeline?.currentTime as number | null | undefined);
+    // 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: StartGroup, start: number) => {
     if (group.resolved) {
@@ -1621,10 +2213,7 @@ export function createAnimator(
           .filter(segment => segment.owner === owner)
           .map(segment => segment.start + segment.duration);
         owner.timer = setTimeout(
-          () => {
-            owner.timer = null;
-            settle(owner, true);
-          },
+          () => settleAtEnd(owner),
           Math.max(0, Math.max(start, ...ends) - now()),
         );
       }
@@ -1662,12 +2251,48 @@ export function createAnimator(
     owner.resolve(finished);
   };
 
+  /**
+   * 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: HandleState) => {
+    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: HandleState,
     properties: MotionProperty[],
     finished: Promise<boolean>,
     time: number,
     group: StartGroup | null = null,
+    settlesWithLanding = false,
   ): MotionHandle => {
     const ends = properties.map(p => {
       const segment = segments.get(p);
@@ -1676,23 +2301,45 @@ export function createAnimator(
         : 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);
-        },
+        () => settleAtEnd(owner),
         Math.max(0, end - now()),
       );
     }
+    // The call's own curves, as it started them.
+    const curves = new Map<MotionProperty, Segment>();
+    for (const property of properties) {
+      const segment = segments.get(property);
+      if (segment != null && segment.owner === owner) {
+        curves.set(property, segment);
+      }
+    }
     const handle: MotionHandle = {
       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);
@@ -1751,7 +2398,9 @@ export function createAnimator(
     if (from === to && velocity === 0) {
       return null;
     }
-    const curve = solveSpring(toSpring(spring), {from, to, velocity});
+    // The motion role it plays: its table value (DEC-15).
+    const resolved = resolveMotion(target, spring);
+    const curve = solveSpring(toSpring(resolved), {from, to, velocity});
     const duration = Math.min(
       MAX_DURATION_MS,
       curve.settleTime(SETTLE_THRESHOLD[property]) * 1000,
@@ -1764,7 +2413,81 @@ export function createAnimator(
       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: HandleState,
+    property: MotionProperty,
+    start: number,
+    to: number,
+    spring: SpringDescription,
+    old: Segment,
+  ): Segment => {
+    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: number) =>
+      t >= deltaMs ? to - old.target : delta.value(t / 1000);
+    const oldAt = (time: number) =>
+      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: HandleState,
+    start: number,
+    curve: MotionCurve,
+    old: Segment,
+  ): Segment => {
+    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: number) =>
+      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,
     };
   };
 
@@ -1774,7 +2497,10 @@ export function createAnimator(
     stops: ReadonlyArray<{at: number; value: number}>,
     jumps: ReadonlyArray<number> = [],
   ): Segment => {
-    const ease = cubicBezier(reducedMotionCrossFade.curve);
+    registerReducedMotionCrossFade();
+    const ease = cubicBezier(
+      resolveMotion(target, reducedMotionCrossFade.curve),
+    );
     const duration = stops[stops.length - 1].at;
     const at = (t: number) => {
       for (let i = 0; i + 1 < stops.length; i++) {
@@ -1897,6 +2623,27 @@ export function createAnimator(
     return {carried, owners};
   };
 
+  /**
+   * 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: HandleState) => {
+    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 = (): number => {
     let to = finalValue('opacity');
@@ -1959,8 +2706,9 @@ export function createAnimator(
    * 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: Landing) => {
     landings.delete(landing);
@@ -1973,13 +2721,16 @@ export function createAnimator(
       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, [
@@ -1989,6 +2740,13 @@ export function createAnimator(
       );
       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 =
@@ -1996,11 +2754,13 @@ export function createAnimator(
       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;
@@ -2020,10 +2780,7 @@ export function createAnimator(
       settle(owner, true);
     } else {
       owner.timer = setTimeout(
-        () => {
-          owner.timer = null;
-          settle(owner, true);
-        },
+        () => settleAtEnd(owner),
         Math.max(0, end - now()),
       );
     }
@@ -2113,6 +2870,9 @@ export function createAnimator(
     get hasPendingLanding() {
       return landings.size > 0;
     },
+    get hasWaitingDip() {
+      return [...landings].some(landing => landing.fadeIn != null);
+    },
   };
 
   /**
@@ -2152,6 +2912,7 @@ export function createAnimator(
       holds: plan.holds,
       landing: plan.landing,
       borrowed: plan.borrowed,
+      joins: plan.joins,
     };
   };
 
@@ -2173,6 +2934,7 @@ export function createAnimator(
       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
@@ -2208,6 +2970,9 @@ export function createAnimator(
               }
               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();
@@ -2226,9 +2991,25 @@ export function createAnimator(
       }
       // 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) as Channel[]).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();
       }
@@ -2248,16 +3029,21 @@ export function createAnimator(
       // differs, kept through a detach for the node that comes next.
       if (target != null) {
         const outgoing = target;
-        heldIdentity = new Set(
-          (Object.keys(CHANNELS) as Channel[]).filter(
-            channel =>
-              outgoing.style.getPropertyValue(channel) ===
-              IDENTITY_TEXT[channel],
-          ),
-        );
+        heldIdentity =
+          pseudoHeld ??
+          new Set(
+            (Object.keys(CHANNELS) as Channel[]).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;
       }
@@ -2284,11 +3070,17 @@ export function createAnimator(
         } 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()) {
@@ -2301,8 +3093,9 @@ export function createAnimator(
       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) as [
@@ -2314,14 +3107,19 @@ export function createAnimator(
         resting[property] = value;
       }
       // Direct manipulation: the layer makes each write a composite only.
-      for (const property of Object.keys(next) as MotionProperty[]) {
-        promote(CHANNEL_OF[property]);
+      if (setOptions.promote !== false) {
+        for (const property of Object.keys(next) as MotionProperty[]) {
+          promote(CHANNEL_OF[property]);
+        }
       }
       commit(Object.keys(next) as MotionProperty[], 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 ?? {});
@@ -2343,6 +3141,21 @@ export function createAnimator(
         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] as number,
+              transition.spring,
+              running,
+            );
+            continue;
+          }
           const velocity = velocities[property] ?? velocityAt(property, time);
           next[property] = springSegment(
             owner,
@@ -2359,6 +3172,7 @@ export function createAnimator(
         time,
         Object.keys(next) as MotionProperty[],
         animateOptions.at,
+        animateOptions.start,
       );
       const adopted =
         plan?.landing != null
@@ -2383,12 +3197,24 @@ export function createAnimator(
           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);
       }
@@ -2397,6 +3223,9 @@ export function createAnimator(
 
     play(curves, playOptions = {}) {
       syncPending();
+      if (playOptions.start !== 'presented') {
+        flushDeferred();
+      }
       const time = playOptions.at ?? now();
       const {owner, finished} = newOwner();
       const byProperty: Partial<Record<MotionProperty, MotionCurve>> = {};
@@ -2444,6 +3273,17 @@ export function createAnimator(
           continue;
         }
         const curve = byProperty[property] as MotionCurve;
+        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
@@ -2461,6 +3301,7 @@ export function createAnimator(
         time,
         Object.keys(next) as MotionProperty[],
         playOptions.at,
+        playOptions.start,
       );
       const adopted =
         plan?.landing != null
@@ -2485,12 +3326,24 @@ export function createAnimator(
           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);
       }
@@ -2499,6 +3352,7 @@ export function createAnimator(
 
     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.
@@ -2580,6 +3434,7 @@ export function createAnimator(
 
     stop(properties) {
       syncPending();
+      flushDeferred();
       const time = now();
       const list = properties == null ? PROPERTIES : expandList(properties);
       const changed: MotionProperty[] = [];
@@ -2615,6 +3470,7 @@ export function createAnimator(
 
     rebase(deltas, rebaseOptions = {}) {
       syncPending();
+      flushDeferred();
       const time = rebaseOptions.at ?? now();
       const changed: MotionProperty[] = [];
       const owners = new Set<HandleState>();
@@ -2694,10 +3550,7 @@ export function createAnimator(
           }
         }
         owner.timer = setTimeout(
-          () => {
-            owner.timer = null;
-            settle(owner, true);
-          },
+          () => settleAtEnd(owner),
           Math.max(0, end - now()),
         );
       }
@@ -2742,6 +3595,7 @@ export function createAnimator(
     },
 
     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
@@ -2770,6 +3624,7 @@ export function createAnimator(
       retireTimers.clear();
       handBackBorrow();
       demote();
+      cancelSheetWillChangeRead();
       target = null;
     },
   };