<script type="x-shader/x-fragment" id="mask">
  precision highp float;

  uniform vec2 resolution;
  uniform sampler2D image;
  uniform vec2 imageResolution;
  uniform float progress;

  vec2 adjustRatio(vec2 uv, vec2 inputResolution, vec2 outputResolution) {
    vec2 ratio = vec2(
      min((outputResolution.x / outputResolution.y) / (inputResolution.x / inputResolution.y), 1.),
      min((outputResolution.y / outputResolution.x) / (inputResolution.y / inputResolution.x), 1.)
    );
    return uv * ratio + (1. - ratio) * 0.5;
  }

  vec2 getZoomedUv(vec2 uv, float zoom, vec2 origin) {
    origin.x = -origin.x;
    uv += origin;
    float scale = 1. / zoom;
    vec2 zoomedUv = uv * scale;
    zoomedUv -= 0.5 * (scale - 1.);
    return zoomedUv;
  }

  const float maxMove = 0.032;

  void main() {
    vec2 uv = gl_FragCoord.st / resolution;
    uv.y = 1. - uv.y;
    uv = adjustRatio(uv, imageResolution, resolution);
    uv = getZoomedUv(uv, 1. + maxMove, vec2((progress - 0.5) * maxMove, 0.));

    gl_FragColor = texture2D(image, uv);
  }
</script>