JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.3.5/pixi.js"></script>
<body>
  <img id="grid_img" style="display: none"...

JavaScript

var app = new PIXI.Application(500, 500, {
  backgroundColor: 0x1099bb
});
document.body.appendChild(app.view);

// create filter
var fragSrc = `
  precision mediump float;
uniform vec2 iResolution;
uniform vec4 iMouse;
uniform sampler2D uSampler;




void main()
{
  vec2 p = "gl_FragCoord.xy / iResolution.x;//normalized coords with some cheat
                                                           //(assume 1:1 prop)
  float prop = iResolution.x / iResolution.y;//screen proroption
  vec2 m = vec2(0.5, 0.5 / prop);//center coords
  vec2 d = p - m;//vector from center to current fragment
  float r = sqrt(dot(d, d)); // distance of pixel from center

  float power = ( 2.0 * 3.141592 / (2.0 * sqrt(dot(m, m))) ) *
        (iMouse.x / iResolution.x - 0.5);//amount of effect

  float bind;//radius of 1:1 effect
  if (power > 0.0) bind = sqrt(dot(m, m));//stick to corners
  else {if (prop < 1.0) bind = m.x; else bind = m.y;}//stick to borders

  //Weird formulas
  vec2 uv;
  if (power > 0.0)//fisheye
    uv = m + normalize(d) * tan(r * power) * bind / tan( bind * power);
  else if (power < 0.0)//antifisheye
    uv = m + normalize(d) * atan(r * -power * 10.0) * bind / atan(-power * bind * 10.0);
  else uv = p;//no effect for power = 1.0

  vec3 col = texture2D(uSampler, vec2(uv.x, -uv.y * prop)).xyz;//Second part of cheat
                                                    //for round effect, not elliptical
  gl_FragColor = vec4(col, 1.0);
}
`.split('\n').reduce((c, a) => c + a.trim() + '\n');

filter = new PIXI.Filter(null, fragSrc);


// load image
var img = document.getElementById("grid_img");
var texture = PIXI.Texture.from(img);
var sprite = new PIXI.Sprite(texture);
app.stage.addChild(sprite);
sprite.x = 50;
sprite.y = 50;

// apply filter
sprite.filters = [filter];