waves

const {
  Scene,
  tween,
  layer,
  path,
  easeInSine,
  easeOutLog,
  move,
  parallel,
  repeat,
  sequence,
  wait,
} = Canvas;
const COLOR = { r: 224, g: 122, b: 95 };
const BASE_Y = height - 100;
const MAX_RIPPLE = 1;

function waves() {
  const ripple = path({
    x0: 0,
    x1: width,
    y0: BASE_Y,
    y1: BASE_Y,
    lineWidth: 4,
    color: COLOR,
    segments: 96,
    cycles: 2,
    amplitude: 10,
    phase: 100,
    offset: (t, { amplitude, phase, cycles }) => {
      return amplitude * Math.sin(Math.PI * 2 * t * cycles + phase);
    },
  });

  return layer(
    ripple,
    repeat(
      sequence(
        parallel(
          move({ y: -300 }, { duration: 1300, ease: easeInSine }),
          tween(
            { cycles: 2, phase: 95, amplitude: 20 },
            { duration: 1300, ease: easeInSine },
          ),
        ),
        parallel(
          move({ y: -400 }, { duration: 6000, ease: easeOutLog }),
          tween(
            { cycles: 1, phase: 90, amplitude: 10 },
            { duration: 6000, ease: easeOutLog },
          ),
        ),
        parallel(
          move({ y: 600 }, { duration: 7000, ease: easeInSine }),
          tween(
            { cycles: 2, phase: 100 },
            { duration: 7000, ease: easeInSine },
          ),
        ),
        move({ y: 100 }, { duration: 3000, ease: easeOutLog }),
      ),
    ),
  );
}

const scene = new Scene({
  canvas,
  layers: [waves()],
});

loop((t) => scene.render(t));