Creating a JavaScript Interface for Easing Function Configuration

Question

I'm attempting to build a JavaScript interface to configure an easing function, similar to what's commonly seen in software like After Effects or Blender.

While I've made some progress, I'm not entirely satisfied with the results. I've experimented with various calculations, drawing inspiration from Bezier curves, but haven't achieved the desired outcome. I've set up a StackBlitz environment to showcase my current implementation .

As you can observe, the control handles' influence is not up to par; although I've occasionally achieved better results for one or the other, there's always an issue.

This is the best result I'm able to achieve. The handle in the upper-right corner behaves as I'd like, but the handleA in the bottom-left corner appears to respond only to its Y position; its X axis has no effect:

const interpCurve = (t) => {
  const A = [0, 1];
  const B = [handlePosA.value.x, handlePosA.value.y];
  const C = [handlePosB.value.x, handlePosB.value.y];
  const D = [1, 0];

  const AB = interpolateLine(A, B, t);
  const BC = interpolateLine(B, C, t);
  const CD = interpolateLine(C, D, t);

  const ABBC = interpolateLine(AB, BC, t);
  const BCCD = interpolateLine(BC, CD, t);
  const ABBCBCCD = interpolateLine(ABBC, BCCD, t);

  const result = ABBCBCCD[1];
  return result;
};