@voila.dev/motion 6.0.121 → 6.0.123

package/dist/interpolate/mix.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mix.d.ts","sourceRoot":"","sources":["../../src/interpolate/mix.ts"],"names":[],"mappings":"AAOA,MAAM,MAAM,KAAK,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,MAAM,KAAK,CAAC,CAAC;AAqD/C;;;;GAIG;AACH,wBAAgB,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAQ/C"}
+{"version":3,"file":"mix.d.ts","sourceRoot":"","sources":["../../src/interpolate/mix.ts"],"names":[],"mappings":"AAOA,MAAM,MAAM,KAAK,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,MAAM,KAAK,CAAC,CAAC;AAsD/C;;;;GAIG;AACH,wBAAgB,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAQ/C"}

package/dist/interpolate/mix.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/interpolate/mix.ts"],
-  "sourcesContent": ["import { mixArray } from \"#/interpolate/array.ts\";\nimport { isColorLike, mixColor, parseColor } from \"#/interpolate/color.ts\";\nimport { mixComplex } from \"#/interpolate/complex.ts\";\nimport { mixNumber } from \"#/interpolate/number.ts\";\nimport { mixObject } from \"#/interpolate/object.ts\";\nimport { mixPath } from \"#/interpolate/path/morph.ts\";\n\nexport type Mixer<T> = (progress: number) => T;\n\ntype Strategy = (from: unknown, to: unknown) => Mixer<unknown> | undefined;\n\nconst PATH = /^\\s*[Mm]/;\n\nfunction bothStrings(from: unknown, to: unknown): [string, string] | undefined {\n\treturn typeof from === \"string\" && typeof to === \"string\"\n\t\t? [from, to]\n\t\t: undefined;\n}\n\n/**\n * A colour pair needs one side written out, or both to be variables: two bare\n * words are as likely `auto` and `none` as `red` and `blue`.\n */\nfunction colors(from: string, to: string): boolean {\n\tconst resolved =\n\t\tparseColor(from) !== undefined || parseColor(to) !== undefined;\n\tconst variables = /^\\s*var\\(/i.test(from) && /^\\s*var\\(/i.test(to);\n\treturn isColorLike(from) && isColorLike(to) && (resolved || variables);\n}\n\nfunction isRecord(value: unknown): value is Record<string, unknown> {\n\treturn typeof value === \"object\" && value !== null && !Array.isArray(value);\n}\n\n/** Tried in order; the first that knows the pair mixes it. */\nconst STRATEGIES: readonly Strategy[] = [\n\t(from, to) =>\n\t\ttypeof from === \"number\" && typeof to === \"number\"\n\t\t\t? (progress) => mixNumber(from, to, progress)\n\t\t\t: undefined,\n\t(from, to) => {\n\t\tconst pair = bothStrings(from, to);\n\t\treturn pair && PATH.test(pair[0]) && PATH.test(pair[1])\n\t\t\t? mixPath(...pair)\n\t\t\t: undefined;\n\t},\n\t(from, to) => {\n\t\tconst pair = bothStrings(from, to);\n\t\treturn pair && colors(...pair) ? mixColor(...pair) : undefined;\n\t},\n\t(from, to) => {\n\t\tconst pair = bothStrings(from, to);\n\t\treturn pair && mixComplex(...pair);\n\t},\n\t(from, to) =>\n\t\tArray.isArray(from) && Array.isArray(to) ? mixArray(from, to) : undefined,\n\t(from, to) =>\n\t\tisRecord(from) && isRecord(to) ? mixObject(from, to) : undefined,\n];\n\n/**\n * The value `progress` of the way from `from` to `to`, whatever they are:\n * numbers, colours (in oklab), paths (morphed), strings of numbers, arrays,\n * objects. What has no midpoint switches halfway.\n */\nexport function mix<T>(from: T, to: T): Mixer<T> {\n\tfor (const strategy of STRATEGIES) {\n\t\tconst mixer = strategy(from, to);\n\t\tif (mixer !== undefined) {\n\t\t\treturn mixer as Mixer<T>;\n\t\t}\n\t}\n\treturn (progress) => (progress < 0.5 ? from : to);\n}\n"],
-  "mappings": "AAAA,SAAS,gBAAgB;AACzB,SAAS,aAAa,UAAU,kBAAkB;AAClD,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AAMxB,MAAM,OAAO;AAEb,SAAS,YAAY,MAAe,IAA2C;AAC9E,SAAO,OAAO,SAAS,YAAY,OAAO,OAAO,WAC9C,CAAC,MAAM,EAAE,IACT;AACJ;AAMA,SAAS,OAAO,MAAc,IAAqB;AAClD,QAAM,WACL,WAAW,IAAI,MAAM,UAAa,WAAW,EAAE,MAAM;AACtD,QAAM,YAAY,aAAa,KAAK,IAAI,KAAK,aAAa,KAAK,EAAE;AACjE,SAAO,YAAY,IAAI,KAAK,YAAY,EAAE,MAAM,YAAY;AAC7D;AAEA,SAAS,SAAS,OAAkD;AACnE,SAAO,OAAO,UAAU,YAAY,UAAU,QAAQ,CAAC,MAAM,QAAQ,KAAK;AAC3E;AAGA,MAAM,aAAkC;AAAA,EACvC,CAAC,MAAM,OACN,OAAO,SAAS,YAAY,OAAO,OAAO,WACvC,CAAC,aAAa,UAAU,MAAM,IAAI,QAAQ,IAC1C;AAAA,EACJ,CAAC,MAAM,OAAO;AACb,UAAM,OAAO,YAAY,MAAM,EAAE;AACjC,WAAO,QAAQ,KAAK,KAAK,KAAK,CAAC,CAAC,KAAK,KAAK,KAAK,KAAK,CAAC,CAAC,IACnD,QAAQ,GAAG,IAAI,IACf;AAAA,EACJ;AAAA,EACA,CAAC,MAAM,OAAO;AACb,UAAM,OAAO,YAAY,MAAM,EAAE;AACjC,WAAO,QAAQ,OAAO,GAAG,IAAI,IAAI,SAAS,GAAG,IAAI,IAAI;AAAA,EACtD;AAAA,EACA,CAAC,MAAM,OAAO;AACb,UAAM,OAAO,YAAY,MAAM,EAAE;AACjC,WAAO,QAAQ,WAAW,GAAG,IAAI;AAAA,EAClC;AAAA,EACA,CAAC,MAAM,OACN,MAAM,QAAQ,IAAI,KAAK,MAAM,QAAQ,EAAE,IAAI,SAAS,MAAM,EAAE,IAAI;AAAA,EACjE,CAAC,MAAM,OACN,SAAS,IAAI,KAAK,SAAS,EAAE,IAAI,UAAU,MAAM,EAAE,IAAI;AACzD;AAOO,SAAS,IAAO,MAAS,IAAiB;AAChD,aAAW,YAAY,YAAY;AAClC,UAAM,QAAQ,SAAS,MAAM,EAAE;AAC/B,QAAI,UAAU,QAAW;AACxB,aAAO;AAAA,IACR;AAAA,EACD;AACA,SAAO,CAAC,aAAc,WAAW,MAAM,OAAO;AAC/C;",
+  "sourcesContent": ["import { mixArray } from \"#/interpolate/array.ts\";\nimport { isColorLike, mixColor, parseColor } from \"#/interpolate/color.ts\";\nimport { mixComplex } from \"#/interpolate/complex.ts\";\nimport { mixNumber } from \"#/interpolate/number.ts\";\nimport { mixObject } from \"#/interpolate/object.ts\";\nimport { mixPath } from \"#/interpolate/path/morph.ts\";\n\nexport type Mixer<T> = (progress: number) => T;\n\ntype Strategy = (from: unknown, to: unknown) => Mixer<unknown> | undefined;\n\nconst PATH = /^\\s*[Mm]/;\n\nfunction bothStrings(from: unknown, to: unknown): [string, string] | undefined {\n\treturn typeof from === \"string\" && typeof to === \"string\"\n\t\t? [from, to]\n\t\t: undefined;\n}\n\n/**\n * A colour pair needs one side spelled out (a name counts where a browser can\n * spell it), or both to be variables: two other bare words are as likely\n * `auto` and `none` as colours.\n */\nfunction colors(from: string, to: string): boolean {\n\tconst resolved =\n\t\tparseColor(from) !== undefined || parseColor(to) !== undefined;\n\tconst variables = /^\\s*var\\(/i.test(from) && /^\\s*var\\(/i.test(to);\n\treturn isColorLike(from) && isColorLike(to) && (resolved || variables);\n}\n\nfunction isRecord(value: unknown): value is Record<string, unknown> {\n\treturn typeof value === \"object\" && value !== null && !Array.isArray(value);\n}\n\n/** Tried in order; the first that knows the pair mixes it. */\nconst STRATEGIES: readonly Strategy[] = [\n\t(from, to) =>\n\t\ttypeof from === \"number\" && typeof to === \"number\"\n\t\t\t? (progress) => mixNumber(from, to, progress)\n\t\t\t: undefined,\n\t(from, to) => {\n\t\tconst pair = bothStrings(from, to);\n\t\treturn pair && PATH.test(pair[0]) && PATH.test(pair[1])\n\t\t\t? mixPath(...pair)\n\t\t\t: undefined;\n\t},\n\t(from, to) => {\n\t\tconst pair = bothStrings(from, to);\n\t\treturn pair && colors(...pair) ? mixColor(...pair) : undefined;\n\t},\n\t(from, to) => {\n\t\tconst pair = bothStrings(from, to);\n\t\treturn pair && mixComplex(...pair);\n\t},\n\t(from, to) =>\n\t\tArray.isArray(from) && Array.isArray(to) ? mixArray(from, to) : undefined,\n\t(from, to) =>\n\t\tisRecord(from) && isRecord(to) ? mixObject(from, to) : undefined,\n];\n\n/**\n * The value `progress` of the way from `from` to `to`, whatever they are:\n * numbers, colours (in oklab), paths (morphed), strings of numbers, arrays,\n * objects. What has no midpoint switches halfway.\n */\nexport function mix<T>(from: T, to: T): Mixer<T> {\n\tfor (const strategy of STRATEGIES) {\n\t\tconst mixer = strategy(from, to);\n\t\tif (mixer !== undefined) {\n\t\t\treturn mixer as Mixer<T>;\n\t\t}\n\t}\n\treturn (progress) => (progress < 0.5 ? from : to);\n}\n"],
+  "mappings": "AAAA,SAAS,gBAAgB;AACzB,SAAS,aAAa,UAAU,kBAAkB;AAClD,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AAMxB,MAAM,OAAO;AAEb,SAAS,YAAY,MAAe,IAA2C;AAC9E,SAAO,OAAO,SAAS,YAAY,OAAO,OAAO,WAC9C,CAAC,MAAM,EAAE,IACT;AACJ;AAOA,SAAS,OAAO,MAAc,IAAqB;AAClD,QAAM,WACL,WAAW,IAAI,MAAM,UAAa,WAAW,EAAE,MAAM;AACtD,QAAM,YAAY,aAAa,KAAK,IAAI,KAAK,aAAa,KAAK,EAAE;AACjE,SAAO,YAAY,IAAI,KAAK,YAAY,EAAE,MAAM,YAAY;AAC7D;AAEA,SAAS,SAAS,OAAkD;AACnE,SAAO,OAAO,UAAU,YAAY,UAAU,QAAQ,CAAC,MAAM,QAAQ,KAAK;AAC3E;AAGA,MAAM,aAAkC;AAAA,EACvC,CAAC,MAAM,OACN,OAAO,SAAS,YAAY,OAAO,OAAO,WACvC,CAAC,aAAa,UAAU,MAAM,IAAI,QAAQ,IAC1C;AAAA,EACJ,CAAC,MAAM,OAAO;AACb,UAAM,OAAO,YAAY,MAAM,EAAE;AACjC,WAAO,QAAQ,KAAK,KAAK,KAAK,CAAC,CAAC,KAAK,KAAK,KAAK,KAAK,CAAC,CAAC,IACnD,QAAQ,GAAG,IAAI,IACf;AAAA,EACJ;AAAA,EACA,CAAC,MAAM,OAAO;AACb,UAAM,OAAO,YAAY,MAAM,EAAE;AACjC,WAAO,QAAQ,OAAO,GAAG,IAAI,IAAI,SAAS,GAAG,IAAI,IAAI;AAAA,EACtD;AAAA,EACA,CAAC,MAAM,OAAO;AACb,UAAM,OAAO,YAAY,MAAM,EAAE;AACjC,WAAO,QAAQ,WAAW,GAAG,IAAI;AAAA,EAClC;AAAA,EACA,CAAC,MAAM,OACN,MAAM,QAAQ,IAAI,KAAK,MAAM,QAAQ,EAAE,IAAI,SAAS,MAAM,EAAE,IAAI;AAAA,EACjE,CAAC,MAAM,OACN,SAAS,IAAI,KAAK,SAAS,EAAE,IAAI,UAAU,MAAM,EAAE,IAAI;AACzD;AAOO,SAAS,IAAO,MAAS,IAAiB;AAChD,aAAW,YAAY,YAAY;AAClC,UAAM,QAAQ,SAAS,MAAM,EAAE;AAC/B,QAAI,UAAU,QAAW;AACxB,aAAO;AAAA,IACR;AAAA,EACD;AACA,SAAO,CAAC,aAAc,WAAW,MAAM,OAAO;AAC/C;",
   "names": []
 }

package/dist/sequence/sequence.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sequence.d.ts","sourceRoot":"","sources":["../../src/sequence/sequence.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACX,iBAAiB,EACjB,gBAAgB,EAChB,YAAY,EACZ,aAAa,EACb,SAAS,EACT,MAAM,oBAAoB,CAAC;AAE5B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE3D;;;;GAIG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,IAAI,MAAM,EAAE,GAAG,IAAI,MAAM,EAAE,GAAG,GAAG,GAAG,MAAM,CAAC;AAE7E,MAAM,WAAW,cAAe,SAAQ,gBAAgB;IACvD,QAAQ,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC;CACzB;AAED,MAAM,MAAM,OAAO,GAChB,SAAS,CAAC,aAAa,EAAE,YAAY,EAAE,cAAc,CAAC,CAAC,GAEvD,SAAS,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,cAAc,CAAC,CAAC,GAC5D,MAAM,GACN;IAAE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,UAAU,CAAA;CAAE,CAAC;AAEvD,MAAM,MAAM,UAAU,GAAG,CACxB,MAAM,EAAE,OAAO,EACf,SAAS,EAAE,OAAO,EAClB,OAAO,EAAE,gBAAgB,KACrB,iBAAiB,CAAC;AAEvB,MAAM,MAAM,cAAc,GAAG,CAAC,MAAM,EAAE,OAAO,KAAK,SAAS,MAAM,EAAE,CAAC;AAepE;;;;;GAKG;AACH,wBAAgB,eAAe,CAC9B,QAAQ,EAAE,SAAS,OAAO,EAAE,EAC5B,OAAO,EAAE,gBAAgB,EACzB,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,cAAc,GAC5B,iBAAiB,CAmEnB"}
+{"version":3,"file":"sequence.d.ts","sourceRoot":"","sources":["../../src/sequence/sequence.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACX,iBAAiB,EACjB,gBAAgB,EAChB,YAAY,EACZ,aAAa,EACb,SAAS,EACT,MAAM,oBAAoB,CAAC;AAE5B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE3D;;;;GAIG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,IAAI,MAAM,EAAE,GAAG,IAAI,MAAM,EAAE,GAAG,GAAG,GAAG,MAAM,CAAC;AAE7E,MAAM,WAAW,cAAe,SAAQ,gBAAgB;IACvD,QAAQ,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC;CACzB;AAED,MAAM,MAAM,OAAO,GAChB,SAAS,CAAC,aAAa,EAAE,YAAY,EAAE,cAAc,CAAC,CAAC,GAEvD,SAAS,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,cAAc,CAAC,CAAC,GAC5D,MAAM,GACN;IAAE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,UAAU,CAAA;CAAE,CAAC;AAEvD,MAAM,MAAM,UAAU,GAAG,CACxB,MAAM,EAAE,OAAO,EACf,SAAS,EAAE,OAAO,EAClB,OAAO,EAAE,gBAAgB,KACrB,iBAAiB,CAAC;AAEvB,MAAM,MAAM,cAAc,GAAG,CAAC,MAAM,EAAE,OAAO,KAAK,SAAS,MAAM,EAAE,CAAC;AA6CpE;;;;;GAKG;AACH,wBAAgB,eAAe,CAC9B,QAAQ,EAAE,SAAS,OAAO,EAAE,EAC5B,OAAO,EAAE,gBAAgB,EACzB,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,cAAc,GAC5B,iBAAiB,CAkFnB"}

package/dist/sequence/sequence.js

@@ -1,4 +1,5 @@
 import { groupControls, thenable } from "../animate/controls.js";
+import { planGenerator, totalDuration } from "../animate/plan.js";
 import { now } from "../frame/frame.js";
 function startOf(at, cursor, previousStart, labels) {
   if (at === void 0) return cursor;
@@ -7,12 +8,28 @@ function startOf(at, cursor, previousStart, labels) {
   if (/^[+-]/.test(at)) return Math.max(0, cursor + Number(at));
   return labels.get(at) ?? cursor;
 }
+function plannedDuration(keyframes, options) {
+  const channels = typeof keyframes === "object" && keyframes !== null && !Array.isArray(keyframes) ? Object.values(keyframes) : [keyframes];
+  const { delay } = options;
+  return (typeof delay === "number" ? delay : 0) + Math.max(
+    0,
+    ...channels.map((channel) => {
+      const frames = Array.isArray(channel) ? channel : [0, channel];
+      const { generator } = planGenerator(
+        frames.map((_frame, index) => index),
+        options
+      );
+      return totalDuration(generator.duration, options);
+    })
+  );
+}
 function animateSequence(segments, options, animateOne, resolveTargets) {
   const begun = now();
   const labels = /* @__PURE__ */ new Map();
   const busy = /* @__PURE__ */ new Map();
   const children = [];
   const waits = [];
+  let end = 0;
   let cursor = 0;
   let previousStart = 0;
   for (const segment of segments) {
@@ -31,28 +48,35 @@ function animateSequence(segments, options, animateOne, resolveTargets) {
       continue;
     }
     const [target, keyframes, own = {}] = segment;
-    const start = startOf(own.at, cursor, previousStart, labels);
-    const { delay } = own;
+    const placed = startOf(own.at, cursor, previousStart, labels);
     const keys = typeof keyframes === "object" && keyframes !== null && !Array.isArray(keyframes) ? Object.keys(keyframes) : ["value"];
     const targets = resolveTargets(target);
     const before = targets.flatMap(
       (one) => keys.flatMap((key) => busy.get(one)?.get(key) ?? [])
     );
+    const start = Math.max(placed, ...before.map((earlier) => earlier.end));
+    const { delay } = own;
     const launch = () => animateOne(target, keyframes, optionsAt2((now() - begun) / 1e3));
     let finished2;
+    let ends;
     if (before.length === 0) {
       const controls = launch();
       children.push(controls);
       finished2 = controls.finished;
-      cursor = Math.max(start, controls.duration);
+      ends = Math.max(start, controls.duration);
     } else {
-      finished2 = Promise.all(before).then(() => launch().finished);
+      finished2 = Promise.all(before.map((earlier) => earlier.finished)).then(
+        () => launch().finished
+      );
       waits.push(finished2);
+      ends = start + plannedDuration(keyframes, { ...options, ...own });
     }
+    cursor = ends;
+    end = Math.max(end, ends);
     for (const one of targets) {
       const byKey = busy.get(one) ?? /* @__PURE__ */ new Map();
       busy.set(one, byKey);
-      for (const key of keys) byKey.set(key, finished2);
+      for (const key of keys) byKey.set(key, { finished: finished2, end: ends });
     }
     previousStart = start;
   }
@@ -60,6 +84,9 @@ function animateSequence(segments, options, animateOne, resolveTargets) {
   const finished = Promise.all([group.finished, ...waits]).then(
     () => void 0
   );
+  Object.defineProperty(group, "duration", {
+    value: Math.max(end, group.duration)
+  });
   return Object.assign(group, thenable(finished));
 }
 export {

package/dist/sequence/sequence.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/sequence/sequence.ts"],
-  "sourcesContent": ["import { groupControls, thenable } from \"#/animate/controls.ts\";\nimport type {\n\tAnimationControls,\n\tAnimationOptions,\n\tDOMKeyframes,\n\tElementTarget,\n\tKeyframes,\n} from \"#/animate/types.ts\";\nimport { now } from \"#/frame/frame.ts\";\nimport type { MotionValue } from \"#/value/motion-value.ts\";\n\n/**\n * When a segment starts: seconds from the start of the sequence, `\"+0.1\"` or\n * `\"-0.2\"` from the end of the segment before, `\"<\"` with the segment before,\n * or the name of a label.\n */\nexport type SequenceAt = number | `+${number}` | `-${number}` | \"<\" | string;\n\nexport interface SegmentOptions extends AnimationOptions {\n\treadonly at?: SequenceAt;\n}\n\nexport type Segment =\n\t| readonly [ElementTarget, DOMKeyframes, SegmentOptions?]\n\t// biome-ignore lint/suspicious/noExplicitAny: a sequence mixes values of any type.\n\t| readonly [MotionValue<any>, Keyframes<any>, SegmentOptions?]\n\t| string\n\t| { readonly name: string; readonly at?: SequenceAt };\n\nexport type AnimateOne = (\n\ttarget: unknown,\n\tkeyframes: unknown,\n\toptions: AnimationOptions,\n) => AnimationControls;\n\nexport type ResolveTargets = (target: unknown) => readonly object[];\n\nfunction startOf(\n\tat: SequenceAt | undefined,\n\tcursor: number,\n\tpreviousStart: number,\n\tlabels: ReadonlyMap<string, number>,\n): number {\n\tif (at === undefined) return cursor;\n\tif (typeof at === \"number\") return at;\n\tif (at === \"<\") return previousStart;\n\tif (/^[+-]/.test(at)) return Math.max(0, cursor + Number(at));\n\treturn labels.get(at) ?? cursor;\n}\n\n/**\n * Launches every segment at once, each delayed to its place on the\n * timeline, so the whole sequence shares one clock and can be scrubbed. A\n * segment that animates a property an earlier segment already animates\n * waits for that one to finish, then starts from where it left off.\n */\nexport function animateSequence(\n\tsegments: readonly Segment[],\n\toptions: AnimationOptions,\n\tanimateOne: AnimateOne,\n\tresolveTargets: ResolveTargets,\n): AnimationControls {\n\tconst begun = now();\n\tconst labels = new Map<string, number>();\n\tconst busy = new Map<object, Map<string, Promise<void>>>();\n\tconst children: AnimationControls[] = [];\n\tconst waits: Promise<void>[] = [];\n\tlet cursor = 0;\n\tlet previousStart = 0;\n\tfor (const segment of segments) {\n\t\tif (typeof segment === \"string\" || \"name\" in segment) {\n\t\t\tconst label = typeof segment === \"string\" ? { name: segment } : segment;\n\t\t\tlabels.set(label.name, startOf(label.at, cursor, previousStart, labels));\n\t\t\tcontinue;\n\t\t}\n\t\tconst [target, keyframes, own = {}] = segment as readonly [\n\t\t\tunknown,\n\t\t\tunknown,\n\t\t\tSegmentOptions?,\n\t\t];\n\t\tconst start = startOf(own.at, cursor, previousStart, labels);\n\t\tconst { delay } = own;\n\t\t/** Launched late, a segment only waits for what is left of its delay. */\n\t\tfunction optionsAt(elapsed: number): AnimationOptions {\n\t\t\tconst offset = start - elapsed;\n\t\t\treturn {\n\t\t\t\t...options,\n\t\t\t\t...own,\n\t\t\t\tdelay:\n\t\t\t\t\ttypeof delay === \"function\"\n\t\t\t\t\t\t? (index, total) => Math.max(0, offset + delay(index, total))\n\t\t\t\t\t\t: Math.max(0, offset + (delay ?? 0)),\n\t\t\t};\n\t\t}\n\t\tconst keys =\n\t\t\ttypeof keyframes === \"object\" &&\n\t\t\tkeyframes !== null &&\n\t\t\t!Array.isArray(keyframes)\n\t\t\t\t? Object.keys(keyframes)\n\t\t\t\t: [\"value\"];\n\t\tconst targets = resolveTargets(target);\n\t\tconst before = targets.flatMap((one) =>\n\t\t\tkeys.flatMap((key) => busy.get(one)?.get(key) ?? []),\n\t\t);\n\t\tconst launch = () =>\n\t\t\tanimateOne(target, keyframes, optionsAt((now() - begun) / 1000));\n\t\tlet finished: Promise<void>;\n\t\tif (before.length === 0) {\n\t\t\tconst controls = launch();\n\t\t\tchildren.push(controls);\n\t\t\tfinished = controls.finished;\n\t\t\tcursor = Math.max(start, controls.duration);\n\t\t} else {\n\t\t\tfinished = Promise.all(before).then(() => launch().finished);\n\t\t\twaits.push(finished);\n\t\t}\n\t\tfor (const one of targets) {\n\t\t\tconst byKey = busy.get(one) ?? new Map();\n\t\t\tbusy.set(one, byKey);\n\t\t\tfor (const key of keys) byKey.set(key, finished);\n\t\t}\n\t\tpreviousStart = start;\n\t}\n\tconst group = groupControls(children);\n\tconst finished = Promise.all([group.finished, ...waits]).then(\n\t\t() => undefined,\n\t);\n\treturn Object.assign(group, thenable(finished));\n}\n"],
-  "mappings": "AAAA,SAAS,eAAe,gBAAgB;AAQxC,SAAS,WAAW;AA6BpB,SAAS,QACR,IACA,QACA,eACA,QACS;AACT,MAAI,OAAO,OAAW,QAAO;AAC7B,MAAI,OAAO,OAAO,SAAU,QAAO;AACnC,MAAI,OAAO,IAAK,QAAO;AACvB,MAAI,QAAQ,KAAK,EAAE,EAAG,QAAO,KAAK,IAAI,GAAG,SAAS,OAAO,EAAE,CAAC;AAC5D,SAAO,OAAO,IAAI,EAAE,KAAK;AAC1B;AAQO,SAAS,gBACf,UACA,SACA,YACA,gBACoB;AACpB,QAAM,QAAQ,IAAI;AAClB,QAAM,SAAS,oBAAI,IAAoB;AACvC,QAAM,OAAO,oBAAI,IAAwC;AACzD,QAAM,WAAgC,CAAC;AACvC,QAAM,QAAyB,CAAC;AAChC,MAAI,SAAS;AACb,MAAI,gBAAgB;AACpB,aAAW,WAAW,UAAU;AAc/B,QAASA,aAAT,SAAmB,SAAmC;AACrD,YAAM,SAAS,QAAQ;AACvB,aAAO;AAAA,QACN,GAAG;AAAA,QACH,GAAG;AAAA,QACH,OACC,OAAO,UAAU,aACd,CAAC,OAAO,UAAU,KAAK,IAAI,GAAG,SAAS,MAAM,OAAO,KAAK,CAAC,IAC1D,KAAK,IAAI,GAAG,UAAU,SAAS,EAAE;AAAA,MACtC;AAAA,IACD;AAVS,oBAAAA;AAbT,QAAI,OAAO,YAAY,YAAY,UAAU,SAAS;AACrD,YAAM,QAAQ,OAAO,YAAY,WAAW,EAAE,MAAM,QAAQ,IAAI;AAChE,aAAO,IAAI,MAAM,MAAM,QAAQ,MAAM,IAAI,QAAQ,eAAe,MAAM,CAAC;AACvE;AAAA,IACD;AACA,UAAM,CAAC,QAAQ,WAAW,MAAM,CAAC,CAAC,IAAI;AAKtC,UAAM,QAAQ,QAAQ,IAAI,IAAI,QAAQ,eAAe,MAAM;AAC3D,UAAM,EAAE,MAAM,IAAI;AAalB,UAAM,OACL,OAAO,cAAc,YACrB,cAAc,QACd,CAAC,MAAM,QAAQ,SAAS,IACrB,OAAO,KAAK,SAAS,IACrB,CAAC,OAAO;AACZ,UAAM,UAAU,eAAe,MAAM;AACrC,UAAM,SAAS,QAAQ;AAAA,MAAQ,CAAC,QAC/B,KAAK,QAAQ,CAAC,QAAQ,KAAK,IAAI,GAAG,GAAG,IAAI,GAAG,KAAK,CAAC,CAAC;AAAA,IACpD;AACA,UAAM,SAAS,MACd,WAAW,QAAQ,WAAWA,YAAW,IAAI,IAAI,SAAS,GAAI,CAAC;AAChE,QAAIC;AACJ,QAAI,OAAO,WAAW,GAAG;AACxB,YAAM,WAAW,OAAO;AACxB,eAAS,KAAK,QAAQ;AACtB,MAAAA,YAAW,SAAS;AACpB,eAAS,KAAK,IAAI,OAAO,SAAS,QAAQ;AAAA,IAC3C,OAAO;AACN,MAAAA,YAAW,QAAQ,IAAI,MAAM,EAAE,KAAK,MAAM,OAAO,EAAE,QAAQ;AAC3D,YAAM,KAAKA,SAAQ;AAAA,IACpB;AACA,eAAW,OAAO,SAAS;AAC1B,YAAM,QAAQ,KAAK,IAAI,GAAG,KAAK,oBAAI,IAAI;AACvC,WAAK,IAAI,KAAK,KAAK;AACnB,iBAAW,OAAO,KAAM,OAAM,IAAI,KAAKA,SAAQ;AAAA,IAChD;AACA,oBAAgB;AAAA,EACjB;AACA,QAAM,QAAQ,cAAc,QAAQ;AACpC,QAAM,WAAW,QAAQ,IAAI,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,EAAE;AAAA,IACxD,MAAM;AAAA,EACP;AACA,SAAO,OAAO,OAAO,OAAO,SAAS,QAAQ,CAAC;AAC/C;",
+  "sourcesContent": ["import { groupControls, thenable } from \"#/animate/controls.ts\";\nimport { planGenerator, totalDuration } from \"#/animate/plan.ts\";\nimport type {\n\tAnimationControls,\n\tAnimationOptions,\n\tDOMKeyframes,\n\tElementTarget,\n\tKeyframes,\n} from \"#/animate/types.ts\";\nimport { now } from \"#/frame/frame.ts\";\nimport type { MotionValue } from \"#/value/motion-value.ts\";\n\n/**\n * When a segment starts: seconds from the start of the sequence, `\"+0.1\"` or\n * `\"-0.2\"` from the end of the segment before, `\"<\"` with the segment before,\n * or the name of a label.\n */\nexport type SequenceAt = number | `+${number}` | `-${number}` | \"<\" | string;\n\nexport interface SegmentOptions extends AnimationOptions {\n\treadonly at?: SequenceAt;\n}\n\nexport type Segment =\n\t| readonly [ElementTarget, DOMKeyframes, SegmentOptions?]\n\t// biome-ignore lint/suspicious/noExplicitAny: a sequence mixes values of any type.\n\t| readonly [MotionValue<any>, Keyframes<any>, SegmentOptions?]\n\t| string\n\t| { readonly name: string; readonly at?: SequenceAt };\n\nexport type AnimateOne = (\n\ttarget: unknown,\n\tkeyframes: unknown,\n\toptions: AnimationOptions,\n) => AnimationControls;\n\nexport type ResolveTargets = (target: unknown) => readonly object[];\n\nfunction startOf(\n\tat: SequenceAt | undefined,\n\tcursor: number,\n\tpreviousStart: number,\n\tlabels: ReadonlyMap<string, number>,\n): number {\n\tif (at === undefined) return cursor;\n\tif (typeof at === \"number\") return at;\n\tif (at === \"<\") return previousStart;\n\tif (/^[+-]/.test(at)) return Math.max(0, cursor + Number(at));\n\treturn labels.get(at) ?? cursor;\n}\n\n/**\n * How long a segment that waits for an earlier one will run once launched.\n * Its first keyframe is only read then, but a tween's length doesn't depend\n * on it, and neither does a default spring's (its rest thresholds scale with\n * the distance).\n */\nfunction plannedDuration(keyframes: unknown, options: AnimationOptions) {\n\tconst channels =\n\t\ttypeof keyframes === \"object\" &&\n\t\tkeyframes !== null &&\n\t\t!Array.isArray(keyframes)\n\t\t\t? Object.values(keyframes)\n\t\t\t: [keyframes];\n\tconst { delay } = options;\n\treturn (\n\t\t(typeof delay === \"number\" ? delay : 0) +\n\t\tMath.max(\n\t\t\t0,\n\t\t\t...channels.map((channel) => {\n\t\t\t\tconst frames = Array.isArray(channel) ? channel : [0, channel];\n\t\t\t\tconst { generator } = planGenerator(\n\t\t\t\t\tframes.map((_frame, index) => index),\n\t\t\t\t\toptions,\n\t\t\t\t);\n\t\t\t\treturn totalDuration(generator.duration, options);\n\t\t\t}),\n\t\t)\n\t);\n}\n\n/**\n * Launches every segment at once, each delayed to its place on the\n * timeline, so the whole sequence shares one clock and can be scrubbed. A\n * segment that animates a property an earlier segment already animates\n * waits for that one to finish, then starts from where it left off.\n */\nexport function animateSequence(\n\tsegments: readonly Segment[],\n\toptions: AnimationOptions,\n\tanimateOne: AnimateOne,\n\tresolveTargets: ResolveTargets,\n): AnimationControls {\n\tconst begun = now();\n\tconst labels = new Map<string, number>();\n\tconst busy = new Map<\n\t\tobject,\n\t\tMap<string, { readonly finished: Promise<void>; readonly end: number }>\n\t>();\n\tconst children: AnimationControls[] = [];\n\tconst waits: Promise<void>[] = [];\n\tlet end = 0;\n\tlet cursor = 0;\n\tlet previousStart = 0;\n\tfor (const segment of segments) {\n\t\tif (typeof segment === \"string\" || \"name\" in segment) {\n\t\t\tconst label = typeof segment === \"string\" ? { name: segment } : segment;\n\t\t\tlabels.set(label.name, startOf(label.at, cursor, previousStart, labels));\n\t\t\tcontinue;\n\t\t}\n\t\tconst [target, keyframes, own = {}] = segment as readonly [\n\t\t\tunknown,\n\t\t\tunknown,\n\t\t\tSegmentOptions?,\n\t\t];\n\t\tconst placed = startOf(own.at, cursor, previousStart, labels);\n\t\tconst keys =\n\t\t\ttypeof keyframes === \"object\" &&\n\t\t\tkeyframes !== null &&\n\t\t\t!Array.isArray(keyframes)\n\t\t\t\t? Object.keys(keyframes)\n\t\t\t\t: [\"value\"];\n\t\tconst targets = resolveTargets(target);\n\t\tconst before = targets.flatMap((one) =>\n\t\t\tkeys.flatMap((key) => busy.get(one)?.get(key) ?? []),\n\t\t);\n\t\tconst start = Math.max(placed, ...before.map((earlier) => earlier.end));\n\t\tconst { delay } = own;\n\t\t/** Launched late, a segment only waits for what is left of its delay. */\n\t\tfunction optionsAt(elapsed: number): AnimationOptions {\n\t\t\tconst offset = start - elapsed;\n\t\t\treturn {\n\t\t\t\t...options,\n\t\t\t\t...own,\n\t\t\t\tdelay:\n\t\t\t\t\ttypeof delay === \"function\"\n\t\t\t\t\t\t? (index, total) => Math.max(0, offset + delay(index, total))\n\t\t\t\t\t\t: Math.max(0, offset + (delay ?? 0)),\n\t\t\t};\n\t\t}\n\t\tconst launch = () =>\n\t\t\tanimateOne(target, keyframes, optionsAt((now() - begun) / 1000));\n\t\tlet finished: Promise<void>;\n\t\tlet ends: number;\n\t\tif (before.length === 0) {\n\t\t\tconst controls = launch();\n\t\t\tchildren.push(controls);\n\t\t\tfinished = controls.finished;\n\t\t\tends = Math.max(start, controls.duration);\n\t\t} else {\n\t\t\tfinished = Promise.all(before.map((earlier) => earlier.finished)).then(\n\t\t\t\t() => launch().finished,\n\t\t\t);\n\t\t\twaits.push(finished);\n\t\t\tends = start + plannedDuration(keyframes, { ...options, ...own });\n\t\t}\n\t\tcursor = ends;\n\t\tend = Math.max(end, ends);\n\t\tfor (const one of targets) {\n\t\t\tconst byKey = busy.get(one) ?? new Map();\n\t\t\tbusy.set(one, byKey);\n\t\t\tfor (const key of keys) byKey.set(key, { finished, end: ends });\n\t\t}\n\t\tpreviousStart = start;\n\t}\n\tconst group = groupControls(children);\n\tconst finished = Promise.all([group.finished, ...waits]).then(\n\t\t() => undefined,\n\t);\n\t// The segments still waiting count too: they end after the ones launched.\n\tObject.defineProperty(group, \"duration\", {\n\t\tvalue: Math.max(end, group.duration),\n\t});\n\treturn Object.assign(group, thenable(finished));\n}\n"],
+  "mappings": "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",
   "names": ["optionsAt", "finished"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@voila.dev/motion",
-	"version": "6.0.121",
+	"version": "6.0.123",
 	"type": "module",
 	"description": "Springs played by the browser, values on one frame loop, exits React waits for.",
 	"license": "MIT",

package/src/animate/js-animation.ts

@@ -79,17 +79,25 @@ export function jsAnimation<T>(config: JsAnimationConfig<T>): JsAnimation<T> {
 		resolve();
 	}
 
+	/** Played backwards, it ends where it started, the way WAAPI does. */
+	function finish() {
+		time = speed < 0 ? 0 : duration;
+		apply(speed < 0 ? (keyframes[0] as T) : last);
+		settle("finished");
+		config.onComplete?.();
+	}
+
 	function tick(data: FrameData) {
-		time = Math.max(0, time + ((data.timestamp - previous) / 1000) * speed);
+		time = Math.min(
+			duration,
+			Math.max(0, time + ((data.timestamp - previous) / 1000) * speed),
+		);
 		previous = data.timestamp;
-		if (time < duration) {
+		if (speed < 0 ? time > 0 : time < duration) {
 			render();
 			return;
 		}
-		time = duration;
-		render();
-		settle("finished");
-		config.onComplete?.();
+		finish();
 	}
 
 	function play() {
@@ -133,11 +141,7 @@ export function jsAnimation<T>(config: JsAnimationConfig<T>): JsAnimation<T> {
 			settle("finished");
 		},
 		complete() {
-			if (state === "finished") return;
-			time = duration;
-			render();
-			settle("finished");
-			config.onComplete?.();
+			if (state !== "finished") finish();
 		},
 		attachTimeline: () => false,
 		current() {

package/src/animate/style.ts

@@ -1,6 +1,6 @@
 import type { KeyframeValue } from "#/animate/types.ts";
 
-type TransformProperty = "translate" | "scale" | "rotate";
+type TransformProperty = "translate" | "scale" | "rotate" | "transform";
 
 interface TransformChannel {
 	readonly property: TransformProperty;
@@ -10,6 +10,13 @@ interface TransformChannel {
 	readonly alone: (value: string) => string;
 }
 
+/**
+ * The transforms with no CSS property of their own (`rotate` takes one axis,
+ * and skew has none): they go through `transform`, in this order, after
+ * `translate`, `rotate` and `scale`.
+ */
+const LISTED = ["rotateX", "rotateY", "skew", "skewX", "skewY"];
+
 /**
  * The independent transforms. Each animates its CSS property alone with
  * `composite: "add"`, so `x` and `y` run as two compositor animations that
@@ -38,6 +45,17 @@ export const TRANSFORMS: Readonly<Record<string, TransformChannel>> = {
 		identity: 0,
 		alone: (v) => `${v}`,
 	},
+	...Object.fromEntries(
+		LISTED.map((key) => [
+			key,
+			{
+				property: "transform",
+				unit: "deg",
+				identity: 0,
+				alone: (v: string) => `${key}(${v})`,
+			},
+		]),
+	),
 };
 
 const UNITLESS = new Set([
@@ -102,6 +120,15 @@ export function writeTransforms(element: Element) {
 	const uniform = Number.parseFloat(at("scale"));
 	style.scale = `${uniform * Number.parseFloat(at("scaleX"))} ${uniform * Number.parseFloat(at("scaleY"))}`;
 	style.rotate = at("rotate");
+	// `transform` stays the page's on an element that never animates these.
+	if (
+		LISTED.some(
+			(key) =>
+				committed.get(element)?.has(key) || animating.get(element)?.has(key),
+		)
+	) {
+		style.transform = LISTED.map((key) => `${key}(${at(key)})`).join(" ");
+	}
 }
 
 export function beginTransform(element: Element, key: string) {

package/src/animate/types.ts

@@ -59,8 +59,8 @@ export type Keyframes<T = KeyframeValue> = T | readonly T[];
 
 /**
  * DOM keyframes: any CSS property (camelCase), a CSS variable (`--name`),
- * the independent transforms (`x`, `y`, `z`, `scale`, `scaleX`, `scaleY`,
- * `rotate`), or an SVG attribute. A single value animates from the current
+ * the transforms (`x`, `y`, `z`, `scale`, `scaleX`, `scaleY`,
+ * `rotate`, `rotateX`, `rotateY`, `skew`, `skewX`, `skewY`), or an SVG attribute. A single value animates from the current
  * one; an array lists every keyframe. Numbers take the property's unit (px,
  * deg) when it has one.
  */

package/src/animate/waapi.ts

@@ -131,6 +131,11 @@ export function waapiAnimation(
 			: keyframes.length - 1
 	] as KeyframeValue;
 
+	/** Played backwards, it ends on its first keyframe. */
+	function end(): KeyframeValue {
+		return animation.playbackRate < 0 ? (keyframes[0] as KeyframeValue) : last;
+	}
+
 	let settled = false;
 	/** What stayed on screen when it settled: where a following animation starts. */
 	let held: KeyframeValue = keyframes[0] as KeyframeValue;
@@ -170,7 +175,7 @@ export function waapiAnimation(
 	animation.finished.then(
 		() => {
 			if (settled) return;
-			settle(last);
+			settle(end());
 			config.onComplete?.();
 		},
 		() => settle(undefined),
@@ -201,7 +206,7 @@ export function waapiAnimation(
 		// The browser refuses to finish an endless animation: settle on its last frame instead.
 		complete: () =>
 			iterations === Number.POSITIVE_INFINITY
-				? settle(last)
+				? settle(end())
 				: animation.finish(),
 		attachTimeline(timeline) {
 			animation.timeline = timeline;

package/src/generators/spring.ts

@@ -10,9 +10,8 @@ export interface SpringPhysics {
 	readonly mass: number;
 }
 
-/** A spring that never settles would animate forever: stop looking after this. */
+/** A spring that never settles would animate forever: stop it after this. */
 const MAX_DURATION = 20;
-const SETTLE_STEP = 0.005;
 
 /**
  * Duration and bounce to physics, SwiftUI's mapping: the undamped period is
@@ -38,46 +37,115 @@ export function springPhysics(options: SpringOptions = {}): SpringPhysics {
 
 type Displacement = (t: number) => readonly [number, number];
 
-/** The damped oscillator's closed form: displacement from the target and its velocity at `t`. */
+/**
+ * When `|p + q·t|·e^(−a·t)`, a bound on a distance or a speed, drops under
+ * `threshold` for good. Newton on its logarithm, which is concave past the
+ * peak: every step lands at or past the root, so it errs late, never early.
+ */
+function settleTime(p: number, q: number, a: number, threshold: number) {
+	if (q < 0) {
+		p = -p;
+		q = -q;
+	}
+	const peak = 1 / a - p / q;
+	function excess(t: number): number {
+		return Math.log(p + q * t) - a * t - Math.log(threshold);
+	}
+	// No hump above the threshold: only the stretch before it crosses zero, if it does.
+	if (q === 0 || excess(Math.max(0, peak)) <= 0) {
+		return Math.max(0, Math.log(Math.abs(p) / threshold) / a);
+	}
+	let t = Math.max(0, peak) + 1 / a;
+	for (let step = 0; step < 32; step += 1) {
+		const next = t - excess(t) / (q / (p + q * t) - a);
+		if (Math.abs(next - t) < 1e-6) return next;
+		t = next;
+	}
+	return t;
+}
+
+/**
+ * The damped oscillator's closed form: displacement from the target and its
+ * velocity at `t`, and when both stay under the rest thresholds.
+ */
 function oscillator(
 	physics: SpringPhysics,
 	x0: number,
 	v0: number,
-): Displacement {
+	restDelta: number,
+	restSpeed: number,
+): readonly [Displacement, number] {
 	const omega = Math.sqrt(physics.stiffness / physics.mass);
 	const zeta =
 		physics.damping / (2 * Math.sqrt(physics.stiffness * physics.mass));
-	if (Math.abs(zeta - 1) < 1e-6) {
-		const c = v0 + omega * x0;
-		return (t) => {
-			const decay = Math.exp(-omega * t);
-			return [decay * (x0 + c * t), decay * (c - omega * (x0 + c * t))];
-		};
+	const critical = Math.abs(zeta - 1) < 1e-6;
+	const slow = omega * (zeta < 1 ? zeta : zeta - Math.sqrt(zeta * zeta - 1));
+	const b = v0 + zeta * omega * x0;
+	/**
+	 * Exact at critical damping. Elsewhere a bound, from sin(ωt) ≤ ωt and
+	 * sinh(γt)/γ ≤ t·e^(γt), that stays tight near critical damping, where
+	 * the amplitudes blow up while the motion doesn't.
+	 */
+	function near(p: number, q: number, threshold: number): number {
+		return critical
+			? settleTime(p, q, slow, threshold)
+			: settleTime(Math.abs(p), Math.abs(q), slow, threshold);
+	}
+	const settle = Math.max(
+		near(x0, b, restDelta),
+		near(v0, -(zeta * omega * v0 + omega * omega * x0), restSpeed),
+	);
+	if (critical) {
+		return [
+			(t) => {
+				const decay = Math.exp(-omega * t);
+				return [decay * (x0 + b * t), decay * (b - omega * (x0 + b * t))];
+			},
+			settle,
+		];
 	}
 	if (zeta < 1) {
 		const omegaD = omega * Math.sqrt(1 - zeta * zeta);
-		const b = (v0 + zeta * omega * x0) / omegaD;
-		return (t) => {
-			const decay = Math.exp(-zeta * omega * t);
-			const cos = Math.cos(omegaD * t);
-			const sin = Math.sin(omegaD * t);
-			const x = x0 * cos + b * sin;
-			return [
-				decay * x,
-				decay * (-zeta * omega * x + omegaD * (b * cos - x0 * sin)),
-			];
-		};
+		const sine = b / omegaD;
+		const amplitude = Math.hypot(x0, sine);
+		return [
+			(t) => {
+				const decay = Math.exp(-slow * t);
+				const cos = Math.cos(omegaD * t);
+				const sin = Math.sin(omegaD * t);
+				const x = x0 * cos + sine * sin;
+				return [decay * x, decay * (-slow * x + b * cos - omegaD * x0 * sin)];
+			},
+			Math.min(
+				settle,
+				Math.max(
+					settleTime(amplitude, 0, slow, restDelta),
+					settleTime(amplitude * omega, 0, slow, restSpeed),
+				),
+			),
+		];
 	}
-	const root = omega * Math.sqrt(zeta * zeta - 1);
-	const r1 = -zeta * omega + root;
-	const r2 = -zeta * omega - root;
+	const r1 = -slow;
+	const r2 = -2 * zeta * omega - r1;
 	const c2 = (v0 - r1 * x0) / (r2 - r1);
 	const c1 = x0 - c2;
-	return (t) => {
-		const e1 = c1 * Math.exp(r1 * t);
-		const e2 = c2 * Math.exp(r2 * t);
-		return [e1 + e2, r1 * e1 + r2 * e2];
-	};
+	return [
+		(t) => {
+			const e1 = c1 * Math.exp(r1 * t);
+			const e2 = c2 * Math.exp(r2 * t);
+			return [e1 + e2, r1 * e1 + r2 * e2];
+		},
+		// Each mode on its own, with half of each threshold.
+		Math.min(
+			settle,
+			Math.max(
+				settleTime(c1, 0, -r1, restDelta / 2),
+				settleTime(c2, 0, -r2, restDelta / 2),
+				settleTime(r1 * c1, 0, -r1, restSpeed / 2),
+				settleTime(r2 * c2, 0, -r2, restSpeed / 2),
+			),
+		),
+	];
 }
 
 /** Rest thresholds scale with the motion, so 0→1 and 0→1000 both settle to the eye. */
@@ -91,18 +159,16 @@ export function spring(
 ): Generator {
 	const { from, to } = options;
 	const velocity = options.velocity ?? 0;
-	const displacement = oscillator(springPhysics(options), from - to, velocity);
 	const { restDelta, restSpeed } = restThresholds(options, Math.abs(to - from));
-
-	function atRest(t: number): boolean {
-		const [x, v] = displacement(t);
-		return Math.abs(x) <= restDelta && Math.abs(v) <= restSpeed;
-	}
-
-	let duration = 0;
-	while (duration < MAX_DURATION && !atRest(duration)) {
-		duration += SETTLE_STEP;
-	}
+	const [displacement, settle] = oscillator(
+		springPhysics(options),
+		from - to,
+		velocity,
+		restDelta,
+		restSpeed,
+	);
+	// An undamped spring never settles, and degenerate physics yields NaN.
+	const duration = settle < MAX_DURATION ? settle : MAX_DURATION;
 
 	return {
 		duration,

package/src/interpolate/color-parse.ts

@@ -117,7 +117,36 @@ function parseHex(hex: string): Rgba | undefined {
 	};
 }
 
-/** A colour written out in full; `undefined` for what only the page can resolve (`var()`, names). */
+const names = new Map<string, Rgba | undefined>();
+let probe: CanvasRenderingContext2D | null | undefined;
+const SENTINEL = "#010203";
+
+/**
+ * A colour name (`red`, `rebeccapurple`) as the browser spells it out: a
+ * canvas drops what isn't a colour (`auto`, `none`) and hands back hex for
+ * what is. The 148 names would weigh more than this; without a browser a
+ * name stays unknown and the page mixes it.
+ */
+function parseName(name: string): Rgba | undefined {
+	if (name === "currentcolor" || !/^[a-z]+$/.test(name)) return undefined;
+	if (!names.has(name)) {
+		probe ??=
+			typeof document === "undefined"
+				? null
+				: document.createElement("canvas").getContext("2d");
+		let resolved: Rgba | undefined;
+		if (probe) {
+			probe.fillStyle = SENTINEL;
+			probe.fillStyle = name;
+			const spelled = String(probe.fillStyle);
+			resolved = spelled === SENTINEL ? undefined : parseColor(spelled);
+		}
+		names.set(name, resolved);
+	}
+	return names.get(name);
+}
+
+/** A colour written out in full, or a name the browser knows; `undefined` for what only the page can resolve (`var()`, `currentColor`). */
 export function parseColor(text: string): Rgba | undefined {
 	const trimmed = text.trim();
 	if (trimmed.toLowerCase() === "transparent") {
@@ -128,7 +157,7 @@ export function parseColor(text: string): Rgba | undefined {
 	}
 	const match = FUNCTION.exec(trimmed);
 	if (match === null) {
-		return undefined;
+		return parseName(trimmed.toLowerCase());
 	}
 	const name = (match[1] as string).toLowerCase().replace(/a$/, "");
 	const args = (match[2] as string).split(/[\s,/]+/).filter(Boolean);

package/src/interpolate/mix.ts

@@ -18,8 +18,9 @@ function bothStrings(from: unknown, to: unknown): [string, string] | undefined {
 }
 
 /**
- * A colour pair needs one side written out, or both to be variables: two bare
- * words are as likely `auto` and `none` as `red` and `blue`.
+ * A colour pair needs one side spelled out (a name counts where a browser can
+ * spell it), or both to be variables: two other bare words are as likely
+ * `auto` and `none` as colours.
  */
 function colors(from: string, to: string): boolean {
 	const resolved =