@px-petals/roku.motion-web 0.0.0-stage → 1.0.0

package/lottie/lottie.paths.js

@@ -0,0 +1,459 @@
+/**
+ * Geometry: Lottie's shapes as cubic bezier paths, the affine maths that
+ * moves them between spaces, and trimming by length.
+ *
+ * A path keeps absolute control points, so a transform maps it exactly:
+ * `cOut[k]` follows point k, `cIn[k]` leads into it. Rectangles, ellipses and
+ * stars start and wind as lottie-web builds them, since a trim depends on both.
+ */
+
+/** Bezier control distance for a quarter circle */
+const KAPPA = 0.5519
+
+/**
+ * @typedef {{ x: number, y: number }} Point
+ * @typedef {{ closed: boolean, points: Point[], cIn: Point[], cOut: Point[] }} Path
+ * @typedef {number[]} Matrix  `[a, b, c, d, e, f]`, as canvas setTransform takes it
+ */
+
+export const IDENTITY = [ 1, 0, 0, 1, 0, 0 ]
+
+/**
+ * `left × right`: right applies first.
+ *
+ * @param   {Matrix} left
+ * @param   {Matrix} right
+ * @returns {Matrix}
+ */
+export function multiply(left, right) {
+  return [
+    left[0] * right[0] + left[2] * right[1],
+    left[1] * right[0] + left[3] * right[1],
+    left[0] * right[2] + left[2] * right[3],
+    left[1] * right[2] + left[3] * right[3],
+    left[0] * right[4] + left[2] * right[5] + left[4],
+    left[1] * right[4] + left[3] * right[5] + left[5],
+  ]
+}
+
+/**
+ * @param   {Matrix} m
+ * @param   {number} x
+ * @param   {number} y
+ * @returns {Point}
+ */
+export function apply(m, x, y) {
+  return { x: m[0] * x + m[2] * y + m[4], y: m[1] * x + m[3] * y + m[5] }
+}
+
+/**
+ * A Lottie transform's matrix: anchor, scale, skew, rotation, then position,
+ * in lottie-web's order.
+ *
+ * @param   {number[]} anchor
+ * @param   {number[]} position
+ * @param   {number[]} scale    percent
+ * @param   {number}   rotation degrees, clockwise
+ * @param   {number}   skew     degrees
+ * @param   {number}   skewAxis degrees
+ * @returns {Matrix}
+ */
+export function transformMatrix(anchor, position, scale, rotation, skew, skewAxis) {
+  let m = [ 1, 0, 0, 1, -anchor[0], -anchor[1] ]
+  m = multiply([ scale[0] / 100, 0, 0, scale[1] / 100, 0, 0 ], m)
+  if (skew) {
+    const axis = (skewAxis * Math.PI) / 180
+    const shear = Math.tan((-skew * Math.PI) / 180)
+    const cos = Math.cos(axis)
+    const sin = Math.sin(axis)
+    m = multiply([ cos, -sin, sin, cos, 0, 0 ], m)
+    m = multiply([ 1, 0, shear, 1, 0, 0 ], m)
+    m = multiply([ cos, sin, -sin, cos, 0, 0 ], m)
+  }
+  if (rotation) {
+    const angle = (rotation * Math.PI) / 180
+    m = multiply([ Math.cos(angle), Math.sin(angle), -Math.sin(angle), Math.cos(angle), 0, 0 ], m)
+  }
+  return multiply([ 1, 0, 0, 1, position[0], position[1] ], m)
+}
+
+/**
+ * @param   {Path}   path
+ * @param   {Matrix} m
+ * @returns {Path}
+ */
+export function transformPath(path, m) {
+  const map = (/** @type {Point[]} */ list) => list.map((p) => apply(m, p.x, p.y))
+  return { closed: path.closed, points: map(path.points), cIn: map(path.cIn), cOut: map(path.cOut) }
+}
+
+/**
+ * Traces a path onto the context's current path.
+ *
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {Path}                     path
+ */
+export function trace(ctx, path) {
+  const { points, cIn, cOut } = path
+  if (!points.length) return
+
+  ctx.moveTo(points[0].x, points[0].y)
+  for (let k = 1; k < points.length; k++) {
+    ctx.bezierCurveTo(cOut[k - 1].x, cOut[k - 1].y, cIn[k].x, cIn[k].y, points[k].x, points[k].y)
+  }
+  if (path.closed) {
+    const last = points.length - 1
+    ctx.bezierCurveTo(cOut[last].x, cOut[last].y, cIn[0].x, cIn[0].y, points[0].x, points[0].y)
+    ctx.closePath()
+  }
+}
+
+// Shapes
+// ■■■■■■
+
+/**
+ * Lottie's own `{ v, i, o, c }`, tangents relative to their vertex.
+ *
+ * @param   {any}  shape
+ * @returns {Path}
+ */
+export function fromLottie(shape) {
+  const points = []
+  const cIn = []
+  const cOut = []
+  const vertices = shape.v || []
+  for (let k = 0; k < vertices.length; k++) {
+    const v = vertices[k]
+    const i = (shape.i && shape.i[k]) || [ 0, 0 ]
+    const o = (shape.o && shape.o[k]) || [ 0, 0 ]
+    points.push({ x: v[0], y: v[1] })
+    cIn.push({ x: v[0] + i[0], y: v[1] + i[1] })
+    cOut.push({ x: v[0] + o[0], y: v[1] + o[1] })
+  }
+  return { closed: !!shape.c, points, cIn, cOut }
+}
+
+/**
+ * A rectangle centred on `position`, its corners rounded by `roundness`.
+ * Winds clockwise from the top right, or the other way when `reversed`.
+ *
+ * @param   {number[]} position
+ * @param   {number[]} size
+ * @param   {number}   roundness
+ * @param   {boolean}  reversed
+ * @returns {Path}
+ */
+export function rectangle(position, size, roundness, reversed) {
+  const w = size[0] / 2
+  const h = size[1] / 2
+  const r = Math.min(roundness || 0, w, h)
+  const [ x, y ] = position
+  const c = r * (1 - KAPPA)
+
+  /** @type {[number, number, number, number, number, number][]} point, then in and out control offsets */
+  const corners = r
+    ? [
+      [ x + w, y - h + r, 0, -r + c, 0, 0 ],
+      [ x + w, y + h - r, 0, 0, 0, r - c ],
+      [ x + w - r, y + h, r - c, 0, 0, 0 ],
+      [ x - w + r, y + h, 0, 0, -(r - c), 0 ],
+      [ x - w, y + h - r, 0, r - c, 0, 0 ],
+      [ x - w, y - h + r, 0, 0, 0, -(r - c) ],
+      [ x - w + r, y - h, -(r - c), 0, 0, 0 ],
+      [ x + w - r, y - h, 0, 0, r - c, 0 ],
+    ]
+    : [ [ x + w, y - h, 0, 0, 0, 0 ], [ x + w, y + h, 0, 0, 0, 0 ], [ x - w, y + h, 0, 0, 0, 0 ], [ x - w, y - h, 0, 0, 0, 0 ] ]
+
+  const ordered = reversed ? reverseCorners(corners) : corners
+  return {
+    closed: true,
+    points: ordered.map((p) => ({ x: p[0], y: p[1] })),
+    cIn: ordered.map((p) => ({ x: p[0] + p[2], y: p[1] + p[3] })),
+    cOut: ordered.map((p) => ({ x: p[0] + p[4], y: p[1] + p[5] })),
+  }
+}
+
+/**
+ * The same corners the other way round: each point's in and out swap.
+ *
+ * @param {[number, number, number, number, number, number][]} corners
+ */
+function reverseCorners(corners) {
+  const reversed = []
+  for (let k = corners.length - 1; k >= 0; k--) {
+    const p = corners[k]
+    reversed.push(/** @type {[number, number, number, number, number, number]} */ ([ p[0], p[1], p[4], p[5], p[2], p[3] ]))
+  }
+  return reversed
+}
+
+/**
+ * An ellipse centred on `position`, from its top, clockwise unless `reversed`.
+ *
+ * @param   {number[]} position
+ * @param   {number[]} size
+ * @param   {boolean}  reversed
+ * @returns {Path}
+ */
+export function ellipse(position, size, reversed) {
+  const [ x, y ] = position
+  const rx = size[0] / 2
+  const ry = size[1] / 2
+  const kx = rx * KAPPA
+  const ky = ry * KAPPA
+  const direction = reversed ? -1 : 1
+
+  const points = [ { x, y: y - ry }, { x: x + direction * rx, y }, { x, y: y + ry }, { x: x - direction * rx, y } ]
+  const cIn = [ { x: x - direction * kx, y: y - ry }, { x: x + direction * rx, y: y - ky }, { x: x + direction * kx, y: y + ry }, { x: x - direction * rx, y: y + ky } ]
+  const cOut = [ { x: x + direction * kx, y: y - ry }, { x: x + direction * rx, y: y + ky }, { x: x - direction * kx, y: y + ry }, { x: x - direction * rx, y: y - ky } ]
+  return { closed: true, points, cIn, cOut }
+}
+
+/**
+ * A star (`sy` 1) or polygon (`sy` 2), as lottie-web builds them.
+ *
+ * @param   {{ type: number, points: number, position: number[], rotation: number, outer: number, inner: number, outerRound: number, innerRound: number, reversed: boolean }} star
+ * @returns {Path}
+ */
+export function star(star) {
+  const isStar = star.type === 1
+  const count = Math.floor(star.points) * (isStar ? 2 : 1)
+  const angleStep = (2 * Math.PI) / count
+  const direction = star.reversed ? -1 : 1
+  let angle = (star.rotation * Math.PI) / 180 - Math.PI / 2
+
+  const points = []
+  const cIn = []
+  const cOut = []
+  for (let k = 0; k < count; k++) {
+    const isOuter = !isStar || k % 2 === 0
+    const radius = isOuter ? star.outer : star.inner
+    const round = (isOuter ? star.outerRound : star.innerRound) / 100
+    const perimeter = (2 * Math.PI * radius) / (count * 2)
+    const x = star.position[0] + radius * Math.cos(angle)
+    const y = star.position[1] + radius * Math.sin(angle)
+    const tx = -Math.sin(angle) * perimeter * round * direction
+    const ty = Math.cos(angle) * perimeter * round * direction
+    points.push({ x, y })
+    cIn.push({ x: x - tx, y: y - ty })
+    cOut.push({ x: x + tx, y: y + ty })
+    angle += angleStep * direction
+  }
+  return { closed: true, points, cIn, cOut }
+}
+
+// Trimming
+// ■■■■■■■■
+
+/**
+ * The segments of a path, each as its four bezier points.
+ *
+ * @param   {Path}      path
+ * @returns {Point[][]}
+ */
+function segments(path) {
+  const list = []
+  const { points, cIn, cOut } = path
+  for (let k = 1; k < points.length; k++) list.push([ points[k - 1], cOut[k - 1], cIn[k], points[k] ])
+  if (path.closed && points.length > 1) {
+    const last = points.length - 1
+    list.push([ points[last], cOut[last], cIn[0], points[0] ])
+  }
+  return list
+}
+
+/**
+ * @param {Point[]} s four bezier points
+ * @param {number}  t
+ */
+function pointAt(s, t) {
+  const u = 1 - t
+  return {
+    x: u * u * u * s[0].x + 3 * u * u * t * s[1].x + 3 * u * t * t * s[2].x + t * t * t * s[3].x,
+    y: u * u * u * s[0].y + 3 * u * u * t * s[1].y + 3 * u * t * t * s[2].y + t * t * t * s[3].y,
+  }
+}
+
+/** Samples per segment when measuring length */
+const STEPS = 24
+
+/**
+ * @param   {Point[]}  s
+ * @returns {number[]}   cumulative length at each of STEPS + 1 samples
+ */
+function lengths(s) {
+  const table = [ 0 ]
+  let previous = s[0]
+  for (let n = 1; n <= STEPS; n++) {
+    const point = pointAt(s, n / STEPS)
+    const dx = point.x - previous.x
+    const dy = point.y - previous.y
+    table.push(table[n - 1] + Math.sqrt(dx * dx + dy * dy))
+    previous = point
+  }
+  return table
+}
+
+/**
+ * The bezier parameter at a distance along a segment.
+ *
+ * @param {number[]} table    from lengths()
+ * @param {number}   distance
+ */
+function parameterAt(table, distance) {
+  const total = table[table.length - 1]
+  if (distance <= 0 || total === 0) return 0
+  if (distance >= total) return 1
+
+  for (let n = 1; n < table.length; n++) {
+    if (table[n] >= distance) {
+      const span = table[n] - table[n - 1]
+      const within = span > 0 ? (distance - table[n - 1]) / span : 0
+      return (n - 1 + within) / STEPS
+    }
+  }
+  return 1
+}
+
+/**
+ * The part of a segment between two parameters, by de Casteljau.
+ *
+ * @param   {Point[]} s
+ * @param   {number}  t0
+ * @param   {number}  t1
+ * @returns {Point[]}
+ */
+function subSegment(s, t0, t1) {
+  const split = (/** @type {Point[]} */ q, /** @type {number} */ t) => {
+    const mix = (/** @type {Point} */ a, /** @type {Point} */ b) => ({ x: a.x + (b.x - a.x) * t, y: a.y + (b.y - a.y) * t })
+    const ab = mix(q[0], q[1])
+    const bc = mix(q[1], q[2])
+    const cd = mix(q[2], q[3])
+    const abc = mix(ab, bc)
+    const bcd = mix(bc, cd)
+    const mid = mix(abc, bcd)
+    return { before: [ q[0], ab, abc, mid ], after: [ mid, bcd, cd, q[3] ] }
+  }
+  const tail = split(s, t0).after
+  const span = t0 < 1 ? (t1 - t0) / (1 - t0) : 0
+  return split(tail, Math.min(1, Math.max(0, span))).before
+}
+
+/**
+ * The stretch of a path between two distances along it, as an open path.
+ *
+ * @param   {Point[][]}   list   the path's segments
+ * @param   {number[][]}  tables each segment's lengths()
+ * @param   {number}      from
+ * @param   {number}      to
+ * @returns {Path | null}
+ */
+function between(list, tables, from, to) {
+  /** @type {Path} */
+  const path = { closed: false, points: [], cIn: [], cOut: [] }
+  let offset = 0
+  for (let n = 0; n < list.length; n++) {
+    const length = tables[n][tables[n].length - 1]
+    const start = Math.max(from, offset)
+    const end = Math.min(to, offset + length)
+    if (end > start || (length === 0 && start === offset && start <= to && start >= from)) {
+      const piece = subSegment(list[n], parameterAt(tables[n], start - offset), parameterAt(tables[n], end - offset))
+      if (!path.points.length) {
+        path.points.push(piece[0])
+        path.cIn.push(piece[0])
+      }
+      path.cOut[path.points.length - 1] = piece[1]
+      path.points.push(piece[3])
+      path.cIn.push(piece[2])
+      path.cOut.push(piece[3])
+    }
+    offset += length
+  }
+  return path.points.length > 1 ? path : null
+}
+
+/**
+ * Trim Paths: the part of each path between `start` and `end`, percent of its
+ * length, shifted by `offset` degrees (360 is the whole length). `together`
+ * (`m` 2) treats every path as one, in order; otherwise each is trimmed alone.
+ *
+ * @param   {Path[]}   paths
+ * @param   {number}   start
+ * @param   {number}   end
+ * @param   {number}   offset
+ * @param   {boolean}  together
+ * @returns {Path[][]}          what each path keeps, in the same order
+ */
+export function trimEach(paths, start, end, offset, together) {
+  let s = Math.min(start, end) / 100
+  let e = Math.max(start, end) / 100
+  if (e - s >= 1) return paths.map((path) => [ path ])
+  if (e === s) return paths.map(() => [])
+
+  const shift = (offset % 360) / 360
+  s += shift
+  e += shift
+  // the range may run past the end and wrap round to the start
+  const ranges = s >= 1 || s < 0 ? wrapRanges(s, e) : e > 1 ? [ [ s, 1 ], [ 0, e - 1 ] ] : [ [ s, e ] ]
+
+  const measured = paths.map((path) => {
+    const list = segments(path)
+    const tables = list.map(lengths)
+    let total = 0
+    for (let n = 0; n < tables.length; n++) total += tables[n][tables[n].length - 1]
+    return { list, tables, total }
+  })
+
+  let combined = 0
+  for (let n = 0; n < measured.length; n++) combined += measured[n].total
+
+  const kept = []
+  let before = 0
+  for (let n = 0; n < measured.length; n++) {
+    const m = measured[n]
+    // alone, a path's range is its own length; together, a share of the combined one
+    const scale = together ? combined : m.total
+    const origin = together ? before : 0
+    const pieces = []
+    for (let r = 0; r < ranges.length; r++) {
+      const from = ranges[r][0] * scale - origin
+      const to = ranges[r][1] * scale - origin
+      if (to <= 0 || from >= m.total) continue
+      const piece = between(m.list, m.tables, Math.max(0, from), Math.min(m.total, to))
+      if (piece) pieces.push(piece)
+    }
+    kept.push(pieces)
+    before += m.total
+  }
+  return kept
+}
+
+/**
+ * The same trim, every path's pieces in one list.
+ *
+ * @param   {Path[]}  paths
+ * @param   {number}  start
+ * @param   {number}  end
+ * @param   {number}  offset
+ * @param   {boolean} together
+ * @returns {Path[]}
+ */
+export function trim(paths, start, end, offset, together) {
+  const kept = trimEach(paths, start, end, offset, together)
+  const flat = []
+  for (let n = 0; n < kept.length; n++) for (let k = 0; k < kept[n].length; k++) flat.push(kept[n][k])
+  return flat
+}
+
+/**
+ * A range shifted wholly outside 0-1, folded back into it.
+ *
+ * @param {number} s
+ * @param {number} e
+ */
+function wrapRanges(s, e) {
+  const shift = Math.floor(s)
+  const a = s - shift
+  const b = e - shift
+  return b > 1 ? [ [ a, 1 ], [ 0, b - 1 ] ] : [ [ a, b ] ]
+}

package/lottie/lottie.props.js

@@ -0,0 +1,255 @@
+/**
+ * Lottie properties as functions of the frame: a static value, or keyframes
+ * eased by their cubic beziers. A property carrying a slot id (`sid`) reads
+ * the live slot table first, so data bindings change what draws without
+ * recompiling the animation.
+ *
+ * Both keyframe forms are read: the current one, where a segment ends at the
+ * next keyframe's `s`, and the older one lottie-roku's sources still use,
+ * where a keyframe carries its own end value in `e`.
+ */
+
+import { mixValues } from '../mixer/mixer.mix.js'
+
+/**
+ * @typedef {(frame: number) => any} Evaluator
+ */
+
+/**
+ * Live slot values, by slot id; `undefined` leaves a property to its keyframes.
+ * @typedef {Record<string, any>} Slots
+ */
+
+/**
+ * @param   {any}       property   a Lottie property: `{ a, k }`, optionally with `sid`
+ * @param   {Slots}     slots      read on every call, so changing it changes the result
+ * @param   {any}       [fallback] the value when the property is absent
+ * @returns {Evaluator}
+ */
+export function evaluator(property, slots, fallback) {
+  if (!property) return () => fallback
+
+  const keyed = property.pz ? posedEvaluator(property, keyedEvaluator(property, fallback), slots) : keyedEvaluator(property, fallback)
+  const sid = property.sid
+  if (typeof sid !== 'string') return keyed
+
+  return (frame) => {
+    const live = slots[sid]
+    return live === undefined ? keyed(frame) : live
+  }
+}
+
+/**
+ * A property of a nested machine that plays several animations at once. The
+ * machine says which it plays, as `{ start, frame, weight }` in the slot
+ * `pz:<id>`: the first frame of the animation's segment on the stitched
+ * timeline, how far in it is, and its weight. The value is the property's at
+ * the frame the machine's time remap gives, with each pose that keys it
+ * mixed in by its weight, in order, as Rive applies animations; one that
+ * does not key it leaves it alone. Without poses it is the keyframes.
+ *
+ * @param   {any}       property `pz` is `{ n, k }`: the machine's id, and the segments that key the property
+ * @param   {Evaluator} keyed
+ * @param   {Slots}     slots
+ * @returns {Evaluator}
+ */
+function posedEvaluator(property, keyed, slots) {
+  const key = 'pz:' + property.pz.n
+  const keying = property.pz.k
+  return (frame) => {
+    const poses = slots[key]
+    const value = keyed(frame)
+    if (!poses) return value
+
+    let mixed = value
+    for (let n = 0; n < poses.length; n++) {
+      const pose = poses[n]
+      if (keying.indexOf(pose.start) < 0) continue
+      mixed = mixValues(mixed, keyed(pose.start + pose.frame), pose.weight)
+    }
+    return mixed
+  }
+}
+
+/**
+ * Whether a property's value changes over time.
+ *
+ * @param {any} property
+ */
+export function isAnimated(property) {
+  return !!property && property.a === 1 && Array.isArray(property.k) && property.k.length > 0 && typeof property.k[0] === 'object' && property.k[0] !== null && 't' in property.k[0]
+}
+
+/**
+ * @param   {any}       property
+ * @param   {any}       fallback
+ * @returns {Evaluator}
+ */
+function keyedEvaluator(property, fallback) {
+  // the pose mixer replaces a keyed property's keyframes with its own evaluator
+  if (typeof property.mx === 'function') return property.mx
+
+  if (!isAnimated(property)) {
+    const value = property.k === undefined ? fallback : property.k
+    return () => value
+  }
+
+  const keyframes = property.k
+  return (frame) => valueAt(keyframes, frame)
+}
+
+/**
+ * @param   {any[]}  keyframes
+ * @param   {number} frame
+ * @returns {any}
+ */
+function valueAt(keyframes, frame) {
+  const first = keyframes[0]
+  if (frame <= first.t || keyframes.length === 1) return startValue(first)
+
+  for (let n = 0; n < keyframes.length - 1; n++) {
+    const from = keyframes[n]
+    const to = keyframes[n + 1]
+    if (frame >= to.t) continue
+
+    if (from.h === 1) return startValue(from)
+    const end = from.e !== undefined ? from.e : startValue(to)
+    const span = to.t - from.t
+    const progress = span > 0 ? (frame - from.t) / span : 1
+    return blend(startValue(from), end, from, progress)
+  }
+
+  const last = keyframes[keyframes.length - 1]
+  // an old-form last keyframe may hold no `s`; the one before ends where it ends
+  if (last.s === undefined) {
+    const before = keyframes[keyframes.length - 2]
+    return before.e !== undefined ? before.e : startValue(before)
+  }
+  return startValue(last)
+}
+
+/** @param {any} keyframe */
+function startValue(keyframe) {
+  return keyframe.s
+}
+
+/**
+ * Eases each dimension by its own bezier when the keyframe gives one per
+ * dimension, else all by the same one.
+ *
+ * @param {any}    from
+ * @param {any}    to
+ * @param {any}    keyframe the segment's first keyframe, holding `o` and `i`
+ * @param {number} progress 0-1 through the segment
+ */
+function blend(from, to, keyframe, progress) {
+  if (isPath(from)) return blendPath(from, to, easeAt(keyframe, 0, progress))
+  if (!Array.isArray(from)) return lerp(from, to, easeAt(keyframe, 0, progress))
+
+  const result = []
+  for (let d = 0; d < from.length; d++) {
+    const target = Array.isArray(to) && d < to.length ? to[d] : from[d]
+    result.push(lerp(from[d], target, easeAt(keyframe, d, progress)))
+  }
+  return result
+}
+
+/**
+ * @param {any} value
+ */
+function isPath(value) {
+  return Array.isArray(value) && value.length > 0 && typeof value[0] === 'object' && value[0] !== null && Array.isArray(value[0].v)
+}
+
+/**
+ * A shape keyframe's value is `[{ i, o, v, c }]`; its vertices blend pairwise.
+ *
+ * @param {any[]}  from
+ * @param {any[]}  to
+ * @param {number} t
+ */
+function blendPath(from, to, t) {
+  const a = from[0]
+  const b = Array.isArray(to) && to[0] ? to[0] : a
+  return [ { c: a.c, v: blendPoints(a.v, b.v, t), i: blendPoints(a.i, b.i, t), o: blendPoints(a.o, b.o, t) } ]
+}
+
+/**
+ * @param {number[][]} a
+ * @param {number[][]} b
+ * @param {number}     t
+ */
+function blendPoints(a, b, t) {
+  const points = []
+  for (let n = 0; n < a.length; n++) {
+    const q = b[n] || a[n]
+    points.push([ lerp(a[n][0], q[0], t), lerp(a[n][1], q[1], t) ])
+  }
+  return points
+}
+
+/**
+ * @param {number} a
+ * @param {number} b
+ * @param {number} t
+ */
+function lerp(a, b, t) {
+  return a + (b - a) * t
+}
+
+/**
+ * The eased progress for one dimension.
+ *
+ * @param   {any}    keyframe
+ * @param   {number} dimension
+ * @param   {number} progress
+ * @returns {number}
+ */
+function easeAt(keyframe, dimension, progress) {
+  const out = keyframe.o
+  const into = keyframe.i
+  if (!out || !into) return progress
+
+  const pick = (/** @type {any} */ value) => (Array.isArray(value) ? (dimension < value.length ? value[dimension] : value[0]) : value)
+  return cubicBezier(pick(out.x), pick(out.y), pick(into.x), pick(into.y), progress)
+}
+
+/**
+ * The y of a CSS-style cubic bezier easing curve (0,0)-(x1,y1)-(x2,y2)-(1,1)
+ * at x: Newton's method on x, bisection when it stalls.
+ *
+ * @param   {number} x1
+ * @param   {number} y1
+ * @param   {number} x2
+ * @param   {number} y2
+ * @param   {number} x
+ * @returns {number}
+ */
+export function cubicBezier(x1, y1, x2, y2, x) {
+  const isLinear = x1 === y1 && x2 === y2
+  if (isLinear || x <= 0 || x >= 1) return x <= 0 ? 0 : x >= 1 ? 1 : x
+
+  const curve = (/** @type {number} */ t, /** @type {number} */ p1, /** @type {number} */ p2) => 3 * (1 - t) * (1 - t) * t * p1 + 3 * (1 - t) * t * t * p2 + t * t * t
+  const slope = (/** @type {number} */ t, /** @type {number} */ p1, /** @type {number} */ p2) => 3 * (1 - t) * (1 - t) * p1 + 6 * (1 - t) * t * (p2 - p1) + 3 * t * t * (1 - p2)
+
+  let t = x
+  for (let n = 0; n < 8; n++) {
+    const error = curve(t, x1, x2) - x
+    if (Math.abs(error) < 1e-6) return curve(t, y1, y2)
+    const d = slope(t, x1, x2)
+    if (Math.abs(d) < 1e-6) break
+    t -= error / d
+  }
+
+  let low = 0
+  let high = 1
+  t = x
+  for (let n = 0; n < 40; n++) {
+    const value = curve(t, x1, x2)
+    if (Math.abs(value - x) < 1e-6) break
+    if (value < x) low = t
+    else high = t
+    t = (low + high) / 2
+  }
+  return curve(t, y1, y2)
+}