@astryxdesign/core 0.7.6 → 0.7.7-canary.36f8ea1

package/src/gestures/GestureRecognizer.ts

@@ -36,6 +36,7 @@ import type {
   GestureTouch,
   Point,
   PointerKind,
+  ScrollType,
 } from './types';
 import {DEFAULT_ENVIRONMENT} from './types';
 
@@ -81,6 +82,16 @@ export interface GestureRecognizerOptions<R = GestureRecognizer> {
   delaysTouchesEnded?: boolean;
   /** Pointer kinds this recognizer listens to (UIKit's `allowedTouchTypes`). @default all */
   allowedPointerTypes?: ReadonlyArray<PointerKind>;
+  /**
+   * Scroll input this recognizer takes, as UIKit's `allowedScrollTypesMask`.
+   * A pan follows a trackpad's two-finger scroll (`continuous`), never a
+   * mouse wheel's notches. It moves as a contact with the content, along its
+   * own axis, after the scrollers under the pointer. A pinch takes a
+   * ctrl-wheel of either, as a trackpad pinches.
+   * @default none; a pinch takes both, the screen-edge pan none whatever a
+   *   caller passes
+   */
+  allowedScrollTypes?: ReadonlyArray<ScrollType>;
   /** Ignore a touch of a different kind than the ones already tracked. @default true */
   requiresExclusiveTouchType?: boolean;
   /**
@@ -202,6 +213,8 @@ export abstract class GestureRecognizer {
   delaysTouchesBegan: boolean;
   delaysTouchesEnded: boolean;
   allowedPointerTypes: ReadonlySet<PointerKind> | null;
+  /** See GestureRecognizerOptions.allowedScrollTypes. */
+  readonly allowedScrollTypes: ReadonlySet<ScrollType>;
   requiresExclusiveTouchType: boolean;
   /**
    * The element (or any object) the recognizer is attached to. The DOM host
@@ -247,6 +260,9 @@ export abstract class GestureRecognizer {
       options.allowedPointerTypes == null
         ? null
         : new Set(options.allowedPointerTypes);
+    this.allowedScrollTypes = new Set(
+      options.allowedScrollTypes ?? this.defaultScrollTypes,
+    );
     this.requiresExclusiveTouchType =
       options.requiresExclusiveTouchType ?? true;
   }
@@ -479,6 +495,11 @@ export abstract class GestureRecognizer {
   /** Clear per-gesture state before the next attempt. */
   protected reset(): void {}
 
+  /** The scroll types taken when the options name none (UIKit's: none). */
+  protected get defaultScrollTypes(): ReadonlyArray<ScrollType> {
+    return [];
+  }
+
   /**
    * Whether a touch may join. The base checks enabled, pointer kind and
    * exclusivity of kind; subclasses narrow it (a one-finger pan ignores a
@@ -488,6 +509,13 @@ export abstract class GestureRecognizer {
     if (!this.isEnabled) {
       return false;
     }
+    if (touch.scrollType != null) {
+      // Scroll input is no pointer: only the scroll types allowed count.
+      return (
+        this.allowedScrollTypes.has(touch.scrollType) &&
+        (this.options.shouldReceiveTouch?.(this, touch) ?? true)
+      );
+    }
     if (
       this.allowedPointerTypes != null &&
       !this.allowedPointerTypes.has(touch.pointerType)

package/src/gestures/PanGestureRecognizer.ts

@@ -73,6 +73,14 @@ export interface PanGestureRecognizerOptions extends GestureRecognizerOptions<Pa
    * at the start only (UIScrollView's directional lock).
    */
   lockAxis?: boolean;
+  /**
+   * A trackpad's two-finger scroll (`continuous`) drives the pan where its
+   * owner allows it. It moves as a contact with the content, along its own
+   * axis, after the scrollers under the pointer. A mouse wheel's notches
+   * never drive a pan; they scroll what is under the pointer.
+   * @default [] (none)
+   */
+  allowedScrollTypes?: ReadonlyArray<'continuous'>;
   /** Begin only when the native scrollers under the touch are at the edge. */
   scrollEdge?: boolean;
 }

package/src/gestures/PinchGestureRecognizer.ts

@@ -27,7 +27,12 @@ import {
   type GestureRecognizerOptions,
   type NativeTouchBehavior,
 } from './GestureRecognizer';
-import type {GestureEventContext, GestureTouch, Point} from './types';
+import type {
+  GestureEventContext,
+  GestureTouch,
+  Point,
+  ScrollType,
+} from './types';
 import {VelocityTracker} from './VelocityTracker';
 
 export interface PinchGestureRecognizerOptions extends GestureRecognizerOptions<PinchGestureRecognizer> {
@@ -51,6 +56,16 @@ export class PinchGestureRecognizer extends GestureRecognizer {
     this.hysteresis = options.hysteresis ?? UIKIT_PINCH.hysteresis.value;
   }
 
+  /** @internal The host's brand: a ctrl-wheel drives a pinch (recognizerInternals). */
+  protected get family(): 'pinch' {
+    return 'pinch';
+  }
+
+  /** A ctrl-wheel drives a pinch, from a trackpad or a mouse. */
+  protected override get defaultScrollTypes(): ReadonlyArray<ScrollType> {
+    return ['continuous', 'discrete'];
+  }
+
   /** Current span over the span the fingers started at. */
   get scale(): number {
     return this.scaleValue;

package/src/gestures/README.md

@@ -452,6 +452,69 @@ anywhere (often on a plain row no recognizer is on) fails a pan limited to
 one finger, so the two fingers zoom the page (WCAG 1.4.4) instead of the pan
 claiming them midway.
 
+## Wheel and trackpad
+
+A recognizer takes scroll input only where it allows that scroll type
+(`allowedScrollTypes`, UIKit's `allowedScrollTypesMask`): `continuous`
+for a trackpad's two-finger scroll or pinch, `discrete` for a mouse wheel's
+notches. A pan follows a trackpad, never a mouse wheel (`spec:AST-094` FR43,
+DEC-24): it allows only `continuous`, and none by default, so it takes a
+trackpad's scroll only where its owner allows it, its element then getting
+the one wheel listener, and a mouse wheel's notches always scroll what is
+under the pointer. A pinch allows both, for a ctrl-wheel from a trackpad or
+a mouse. The screen-edge pan takes none, as it takes no mouse, trackpad or
+pen (FR43). A control's thumb, a slider's or a switch's, tracks as a control,
+not a pan, and takes no wheel, so a page scroll over it never changes its
+value (DEC-23). The web reports no wheel phases or device, so the deltas
+tell, and what they cannot tell apart reads as a mouse wheel: a line- or
+page-mode delta; a scroll with Shift held (Shift+wheel); a pixel delta a hair
+off a whole pixel (a mouse wheel on Windows); a scroll with no legacy `wheelDelta` (an engine that
+sends none); a delta that is not a third of its legacy `wheelDelta`; or a 120
+tick over a 40 px delta. A trackpad's precise deltas, a third of their legacy
+`wheelDelta` (Chromium and WebKit), read as a trackpad.
+
+A wheel gesture drives a pan as a contact moving with the content, along the
+pan's own axis, and only once every scroller between the pointer and the
+pan's element is at its edge that way, decided at the gesture's first wheel:
+a wheel the pan does not take is never prevented. A watcher
+(`claimsTouches: false`) never takes one, and a gesture whose first wheel
+another handler already prevented, or that cannot be cancelled, stays the
+page's. A scroll-edge pan (a pull to
+refresh) takes one only if no scroller under the pointer could scroll for it,
+its own scroll owner and the page included, as its finger's rule reads them
+(`spec:AST-094` FR19); `touch-action` narrows only a finger's pan, so a wheel
+reads every scroller past it. A ctrl-wheel (a trackpad
+pinch, or Control and a mouse wheel) drives a pinch, whose scale follows
+`exp(-deltaY / 100)`; a pinch takes it by default and ends 100 ms after its
+last wheel. While the fingers move, a trackpad scroll ends 180 ms after its
+last wheel vertically and 220 ms horizontally, whoever keeps it (a pan, a
+scroller under the pointer, or the page), as a slow drag pauses between
+wheels (DEC-24). A gesture's release is never stamped
+later than an input that ends it sooner (FR16).
+
+The web reports no trackpad contact or phase either, so one splitter reads
+every trackpad stream (`wheelSegmenter.ts`, DEC-24): at the fourth or later
+delta of a shrinking run, once the run has lost a fifth of its size, the
+fingers lifted and momentum began. Until it decides,
+the shrinking deltas wait, and a pan it follows moves on at the fingers' last
+speed, never past what that speed projects. At the lift the pan keeps that
+travel and lets go there, still moving at that speed, and the momentum after
+it never moves it; when the fingers carry on instead, their moves absorb
+what the pan showed past their travel, or short of it, so it never steps
+back and ends on their travel. Fingers that stop release still, once the end
+time passes. In momentum, a reversal, a delta that grows
+against the decay, or a 50 ms pause starts a new gesture. A finger, mouse or
+pen that comes down ends it, and a wheel claim keeps the page's text
+selection. A gesture a
+recognizer took is latched to it, as a browser latches a scroller: while it
+lasts, the host hears every step first, through the shared input stream's
+window-capture listener, wherever it lands, so a pan whose element moves from
+under a still pointer keeps the gesture. A page that loses focus or hides
+cancels a trackpad pan a recognizer still drives, as it cancels every touch;
+the rest of that stream is the page's. A ctrl-wheel pinch keeps its stream,
+so the page never zooms for it, and a pan its lift released keeps its
+momentum latched until the stream ends.
+
 ## Time
 
 Every input carries its own timestamp (`event.timeStamp`), and timers are

package/src/gestures/ScreenEdgePanGestureRecognizer.ts

@@ -71,12 +71,12 @@ interface EdgeLayout {
 }
 
 /**
- * A screen-edge pan is a finger's: it takes no `allowedPointerTypes`
- * (`spec:AST-094` FR43).
+ * A screen-edge pan is a finger's: it takes no `allowedPointerTypes` and no
+ * `allowedScrollTypes`, so neither a mouse, a trackpad nor a pen drives it.
  */
 export interface ScreenEdgePanGestureRecognizerOptions extends Omit<
   PanGestureRecognizerOptions,
-  'direction' | 'allowedPointerTypes'
+  'direction' | 'allowedPointerTypes' | 'allowedScrollTypes'
 > {
   /** The edges a touch may start from. @default ['leading'] */
   edges?: ReadonlyArray<ScreenEdge>;
@@ -109,9 +109,11 @@ export class ScreenEdgePanGestureRecognizer extends PanGestureRecognizer {
       maximumNumberOfTouches: 1,
       hysteresis: UIKIT_SCREEN_EDGE_PAN.hysteresis.value,
       ...options,
-      // A finger's only: under a mouse, a trackpad or a pen the screen-edge
-      // pan stays off (`spec:AST-094` FR43), whatever a caller passes.
+      // A finger's only (`spec:AST-094` FR43). Under a mouse, a trackpad or
+      // a pen, the screen-edge pan stays off, whatever a caller passes. It
+      // takes no wheel or trackpad scrolling.
       allowedPointerTypes: ['touch'],
+      allowedScrollTypes: [],
     });
     this.edges = options.edges ?? ['leading'];
     this.edgeRegion =

package/src/gestures/nativeScroll.ts

@@ -4,7 +4,8 @@
  * @file nativeScroll.ts
  * @input An element a touch landed on
  * @output Exports createNativeScrollProbe (the NativeScrollProbe a host gives
- *   each touch) and parseTouchAction
+ *   each touch, and each wheel gesture without the touch-action narrowing)
+ *   and parseTouchAction
  * @position DOM half of the scroll coordination in packages/core/src/gestures
  *
  * Answers one question for a recognizer without letting it touch the DOM:
@@ -82,7 +83,7 @@ interface Chain {
   readonly allowsPan: boolean;
 }
 
-function buildChain(target: Element): Chain {
+function buildChain(target: Element, readsTouchAction: boolean): Chain {
   const doc = target.ownerDocument;
   const view = doc.defaultView;
   if (view == null) {
@@ -103,9 +104,11 @@ function buildChain(target: Element): Chain {
       continue;
     }
     const style = view.getComputedStyle(node);
-    const pans = parseTouchAction(style.touchAction || 'auto');
-    allowX &&= pans.x;
-    allowY &&= pans.y;
+    if (readsTouchAction) {
+      const pans = parseTouchAction(style.touchAction || 'auto');
+      allowX &&= pans.x;
+      allowY &&= pans.y;
+    }
     const isRoot = node === root || node === doc.documentElement;
     if (isRoot) {
       reachedRoot = true;
@@ -196,7 +199,10 @@ function canMoveY(element: Element, dy: number): boolean {
         element.scrollHeight - element.clientHeight - EDGE_TOLERANCE + 0.5;
 }
 
-function canMoveX(entry: ChainEntry, dx: number): boolean {
+function canMoveX(
+  entry: Pick<ChainEntry, 'element' | 'isRtl'>,
+  dx: number,
+): boolean {
   const {element} = entry;
   const overflow = element.scrollWidth - element.clientWidth;
   if (overflow <= EDGE_TOLERANCE) {
@@ -210,13 +216,47 @@ function canMoveX(entry: ChainEntry, dx: number): boolean {
     : element.scrollLeft < max - EDGE_TOLERANCE + 0.5;
 }
 
-/** A probe of the native scrollers under `target`. */
-export function createNativeScrollProbe(target: unknown): NativeScrollProbe {
+/**
+ * Whether `element` itself scrolls natively now for a finger moving by
+ * (dx, dy). It uses the probe's own test of each scroller: overflow that
+ * scrolls on that axis, and room past the edge tolerance. The position must
+ * also be short of the end it moves toward, a right-to-left range included.
+ * A wheel moves the content the other way, so pass its deltas negated.
+ */
+export function canElementScroll(
+  element: Element,
+  dx: number,
+  dy: number,
+): boolean {
+  const view = element.ownerDocument.defaultView;
+  if (view == null) {
+    return false;
+  }
+  const style = view.getComputedStyle(element);
+  if (dy !== 0 && SCROLLABLE.has(style.overflowY) && canMoveY(element, dy)) {
+    return true;
+  }
+  return (
+    dx !== 0 &&
+    SCROLLABLE.has(style.overflowX) &&
+    canMoveX({element, isRtl: isRtlElement(element as HTMLElement)}, dx)
+  );
+}
+
+/**
+ * A probe of the native scrollers under `target`. A wheel scrolls whatever
+ * `touch-action` says, which narrows only a finger's pan: a wheel's probe
+ * passes `readsTouchAction: false`.
+ */
+export function createNativeScrollProbe(
+  target: unknown,
+  {readsTouchAction = true}: {readsTouchAction?: boolean} = {},
+): NativeScrollProbe {
   let chain: Chain | null = null;
   const getChain = (): ChainEntry[] => {
     chain ??=
       target instanceof Element
-        ? buildChain(target)
+        ? buildChain(target, readsTouchAction)
         : {entries: [], allowsPan: false};
     return chain.entries;
   };

package/src/gestures/recognizerInternals.ts

@@ -20,7 +20,12 @@
 
 import type {GestureArena} from './GestureArena';
 import type {GestureRecognizer} from './GestureRecognizer';
-import type {GestureEventContext, GestureState, GestureTouch} from './types';
+import type {
+  GestureEventContext,
+  GestureState,
+  GestureTouch,
+  Point,
+} from './types';
 
 /**
  * The kinds of recognizer the host and touch-action treat specially. Each of
@@ -28,12 +33,14 @@ import type {GestureEventContext, GestureState, GestureTouch} from './types';
  * never imports a recognizer class: a page ships only the recognizers it
  * constructs.
  */
-export type RecognizerFamily = 'tap' | 'longPress' | 'pan';
+export type RecognizerFamily = 'tap' | 'longPress' | 'pan' | 'pinch';
 
 /** The members of a recognizer only the gesture system calls. */
 export interface RecognizerInternals {
   /** The recognizer's family, when the host treats it specially. */
   readonly family?: RecognizerFamily;
+  /** A pan's direction rule for a translation, `axisRatio` included. */
+  classify?(translation: Point): 'begin' | 'fail' | 'wait';
   arena: GestureArena | null;
   pending: 'began' | 'ended' | null;
   readonly seenTouchIds: Set<number>;

package/src/gestures/types.ts

@@ -21,6 +21,14 @@ export type GestureState =
 /** What made the contact. A pen on an iPad is `pen`, not `touch`. */
 export type PointerKind = 'touch' | 'mouse' | 'pen';
 
+/**
+ * Scroll input a recognizer can take, as UIKit's `UIScrollTypeMask`: a
+ * trackpad's two-finger scroll or pinch (`continuous`), or a mouse wheel's
+ * notches (`discrete`). A pan takes only a trackpad's; a pinch takes a
+ * ctrl-wheel of either.
+ */
+export type ScrollType = 'continuous' | 'discrete';
+
 export interface Point {
   readonly x: number;
   readonly y: number;
@@ -85,6 +93,8 @@ export interface GestureTouch {
   readonly target: unknown;
   /** The native scrollers under the contact, when the host knows them. */
   readonly scroll: NativeScrollProbe | null;
+  /** Set for a wheel's or a trackpad's scroll input, which is no contact. */
+  readonly scrollType?: ScrollType;
   /** The browser took this contact for its own pan or zoom. */
   takenByBrowser: boolean;
 }
@@ -104,6 +114,8 @@ export interface TouchBeganInput extends TouchInput {
   readonly pointerType: PointerKind;
   readonly target: unknown;
   readonly scroll?: NativeScrollProbe | null;
+  /** Set for a wheel's or a trackpad's scroll input. */
+  readonly scrollType?: ScrollType;
 }
 
 /** What a recognizer is told alongside the touches that changed. */

package/src/gestures/wheelSegmenter.ts

@@ -0,0 +1,114 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file wheelSegmenter.ts
+ * @input A wheel stream's deltas along one axis, with their event times
+ * @output Exports WheelSegmenter: splits the stream into gestures and reads
+ *   a trackpad's lift (the onset of momentum)
+ * @position Read by GestureHost.ts's wheel input: the web reports no
+ *   trackpad contact or phase, so both are inferred.
+ */
+
+export type WheelBoundary = 'first' | 'idle' | 'reversal' | 'jump' | 'gap';
+export type WheelPhase = 'finger' | 'momentum';
+
+export interface WheelSegment {
+  /** Why this event starts a new gesture, or null when it continues one. */
+  readonly boundary: WheelBoundary | null;
+  readonly phase: WheelPhase;
+  /** The gesture's number, counting from 1. */
+  readonly gesture: number;
+  /** This event is where the fingers lifted (momentum begins with it). */
+  readonly liftNow: boolean;
+  /** This event shrank, so it may be momentum: hold it until known. */
+  readonly decaying: boolean;
+}
+
+/** Momentum arrives at frame rate: a pause this long ends it. */
+const MOMENTUM_GAP_MS = 50;
+/** Shrinking deltas in a row before the lift is read. */
+const LIFT_RUN = 4;
+/** And how much of its size the run has lost by then. */
+const LIFT_DECAY = 0.8;
+
+/**
+ * A trackpad gesture has a finger phase and, after a fling, a momentum phase.
+ * In the finger phase, deltas come while the fingers move, with pauses when
+ * they move slowly. In the momentum phase, deltas come at frame rate and
+ * shrink smoothly. The lift is the start of a run of shrinking deltas that
+ * has lost a fifth of its size. In the finger phase, a pause of `idleMs`
+ * ends the gesture. In the momentum phase, a reversal, a jump up against the
+ * decay, or a pause of 50 ms starts a new gesture. Momentum never pauses,
+ * reverses or grows.
+ */
+export class WheelSegmenter {
+  gesture = 0;
+  phase: WheelPhase = 'finger';
+  private last = -Infinity;
+  private previous = 0;
+  private sign = 0;
+  private count = 0;
+  private run = 0;
+  private runStart = 0;
+
+  push(time: number, delta: number, idleMs: number): WheelSegment {
+    const size = Math.abs(delta);
+    const sign = Math.sign(delta);
+    const gap = time - this.last;
+    let boundary: WheelBoundary | null = null;
+    if (this.count === 0) {
+      boundary = this.gesture === 0 ? 'first' : 'idle';
+    } else if (this.phase === 'finger' && gap >= idleMs) {
+      boundary = 'idle';
+    } else if (this.phase === 'momentum') {
+      if (sign !== 0 && this.sign !== 0 && sign !== this.sign) {
+        boundary = 'reversal';
+      } else if (gap >= MOMENTUM_GAP_MS) {
+        boundary = 'gap';
+      } else if (size >= 2 && size > this.previous * 1.3 + 0.5) {
+        boundary = 'jump';
+      }
+    }
+    if (boundary != null) {
+      this.gesture += 1;
+      this.phase = 'finger';
+      this.count = 0;
+      this.run = 0;
+    }
+    let liftNow = false;
+    let decaying = false;
+    if (this.phase === 'finger' && this.count >= 3 && size > 0) {
+      decaying = size <= this.previous * 0.995 && size >= this.previous * 0.5;
+      if (decaying) {
+        if (this.run === 0) {
+          this.runStart = this.previous;
+        }
+        this.run += 1;
+      } else {
+        this.run = 0;
+      }
+      if (this.run >= LIFT_RUN && size <= this.runStart * LIFT_DECAY) {
+        this.phase = 'momentum';
+        liftNow = true;
+      }
+    }
+    this.count += 1;
+    this.previous = size;
+    if (sign !== 0) {
+      this.sign = sign;
+    }
+    this.last = time;
+    return {
+      boundary,
+      phase: this.phase,
+      gesture: this.gesture,
+      liftNow,
+      decaying: decaying && !liftNow,
+    };
+  }
+
+  /** The gesture ended on its own (its timer): the next event starts one. */
+  end(): void {
+    this.count = 0;
+  }
+}

package/src/motion/animator.ts

@@ -517,6 +517,14 @@ interface StartGroup {
   madeInFrame?: boolean;
   /** The task it was made in, with every call made in that task. */
   task?: TaskMark;
+  /**
+   * Per channel, when its animation's first frame ran without a known start.
+   * That frame came too late to stand for the start, and the browser had not
+   * told it yet. The compositor starts the animation within about a frame of
+   * this time. Until the browser tells its start, a read of the channel takes
+   * the curve from here.
+   */
+  latest?: Map<Channel, number>;
   /** A later call in the same task that took over its curves. */
   adoptedBy?: StartGroup;
   readonly resolve: (start: number) => void;
@@ -1070,16 +1078,42 @@ export function createAnimator(
   };
 
   /**
-   * The value on screen at `time`. A curve the browser has not started is at
-   * its start up to now; a later time reads the curve from its provisional
-   * start, the model's best guess until the browser's start moves it (a
-   * companion that samples a curve ahead follows its shape).
+   * A held curve's start once a frame dated its call, as the browser's start
+   * moves it: by that frame's lead over the call's own time.
+   */
+  const datedFromLatest = (
+    segment: Segment,
+    latest: number | undefined,
+  ): {latest: number; start: number} | null =>
+    latest == null || segment.group == null
+      ? null
+      : {latest, start: segment.start + latest - segment.group.provisional};
+
+  /**
+   * The value on screen at `time`. Until the browser reports its start, a
+   * held curve shows its first value. A frame that ran without that start
+   * dates the curve. Without that frame, a later time reads from the
+   * provisional start, so a companion that samples ahead follows the curve's
+   * shape.
    */
   const valueAt = (property: MotionProperty, time: number): number => {
     const segment = segments.get(property);
-    if (segment != null && isHeld(segment) && time <= now()) {
+    if (segment != null && isHeld(segment)) {
+      // The compositor starts the call near its first frame. The curve is
+      // dated as the browser's start would date it. A curve that joined by an
+      // older clock keeps its lead over the call's own time.
+      const latest = segment.group?.latest?.get(CHANNEL_OF[property]);
+      const dated = datedFromLatest(segment, latest);
+      if (dated != null) {
+        const elapsed = Math.max(time, dated.latest) - dated.start;
+        return elapsed >= segment.duration
+          ? segment.target
+          : segment.at(elapsed);
+      }
       // Nothing has moved on screen until the browser starts the call.
-      return segment.at(0);
+      if (time <= now()) {
+        return segment.at(0);
+      }
     }
     return curveAt(property, time);
   };
@@ -1087,10 +1121,22 @@ export function createAnimator(
   const velocityAt = (property: MotionProperty, time: number): number => {
     const held = segments.get(property);
     if (held != null && isHeld(held)) {
-      // Still at its start on screen, but moving in the model: a retarget
-      // carries the velocity the curve has reached by now, so a flick whose
-      // moves all land before the browser starts any keeps its speed.
-      return held.speed(Math.max(0, time - held.start));
+      // Still at its start on screen, but moving in the model. A retarget
+      // carries the velocity the curve has reached by now. So a flick whose
+      // moves all land before the browser starts any keeps its speed. Past
+      // its first frame, it reads from that frame, as its value does.
+      const dated = datedFromLatest(
+        held,
+        held.group?.latest?.get(CHANNEL_OF[property]),
+      );
+      return held.speed(
+        Math.max(
+          0,
+          dated != null && time > dated.latest
+            ? time - dated.start
+            : time - held.start,
+        ),
+      );
     }
     const segment = segmentAt(property, time);
     if (segment == null || time < segment.start) {
@@ -1276,6 +1322,35 @@ export function createAnimator(
       }
     }
     const moving = properties.filter(p => segments.has(p));
+    // An explicit call can rebuild a channel while one of its curves still
+    // waits for the browser's start. The animation then joins the current
+    // call, or else that waiting call, with no start of its own.
+    const waiting =
+      callGroup ??
+      moving
+        .map(p => (segments.get(p) as Segment).group)
+        .find(group => group != null && !group.resolved) ??
+      null;
+    const rebuiltAfterFirstFrame = waiting?.framed === true;
+    // The new animation starts at the frame that commits it, from its first
+    // keyframe. That holds for a waiting call it joins after that call's
+    // first frame, and for every waiting call it takes a curve from. So this
+    // channel's reads below, and until that frame, take that first value.
+    const restarted = new Set<StartGroup>();
+    if (rebuiltAfterFirstFrame) {
+      restarted.add(waiting);
+    }
+    if (callGroup != null) {
+      for (const property of moving) {
+        const group = (segments.get(property) as Segment).group;
+        if (group != null && group !== callGroup && !group.resolved) {
+          restarted.add(group);
+        }
+      }
+    }
+    for (const group of restarted) {
+      group.latest?.delete(channel);
+    }
     if (channel === 'translate') {
       // The animation built below starts from the value at `time` (its first
       // keyframe); a rebase or a retarget builds a new one, so a new start.
@@ -1308,15 +1383,6 @@ export function createAnimator(
       previous?.cancel();
       return;
     }
-    // A channel rebuilt by an explicit call (set, rebase, a retarget of
-    // another axis) while one of its curves still waits for the browser's
-    // start keeps that start: no explicit start for this animation.
-    const waiting =
-      callGroup ??
-      moving
-        .map(p => (segments.get(p) as Segment).group)
-        .find(group => group != null && !group.resolved) ??
-      null;
     // The keyframes start where the animation will: at the waiting call's
     // own time, which its start moves to the browser's (resolveGroup), so a
     // write later in the task keeps the screen on the model's clock.
@@ -1431,6 +1497,20 @@ export function createAnimator(
       waiting.channels.add(channel);
       // A cancel before the first frame rejects its ready promise.
       (animation as Partial<Animation>).ready?.catch(() => {});
+      if (rebuiltAfterFirstFrame) {
+        // The frame that commits it dates this channel's start again. The
+        // call's other channels keep their own.
+        requestFrame?.(() => {
+          if (
+            !waiting.resolved &&
+            running.get(channel) === animation &&
+            animation.startTime == null &&
+            animation.playState === 'running'
+          ) {
+            (waiting.latest ??= new Map()).set(channel, now());
+          }
+        });
+      }
     } else {
       // One clock: the keyframes were sampled from `time`.
       animation.startTime = time;
@@ -2135,6 +2215,22 @@ export function createAnimator(
       ) {
         resolveGroup(group, now());
       }
+      // The browser's start is still unread. The compositor starts the call
+      // near this frame, so each moving channel's reads take the curve from
+      // now until the browser tells its start.
+      if (!group.resolved) {
+        for (const channel of group.channels) {
+          const animation = running.get(channel);
+          if (
+            animation != null &&
+            group.animations.includes(animation) &&
+            animation.startTime == null &&
+            animation.playState === 'running'
+          ) {
+            (group.latest ??= new Map()).set(channel, now());
+          }
+        }
+      }
     });
     ready.then(
       () => syncGroup(group),