Как применить эффект WaterMouse в ZeroBlock в Tilda

<script src='https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js'></script>
<style>
    
    #wrapper {
      position: absolute;
      top: 0;
      width: 100% !important;
      height: 100%  !important;
      pointer-events: none;
    }
 .dg.ac {
    display: none;
}
    
</style>
 <canvas id="canvas"></canvas>
    <div id="wrapper">
    </div>
<script>
var rippleSettings = {
  maxSize: 100,
  animationSpeed: 5,
  strokeColor: [148, 217, 255]
};

var canvasSettings = {
  blur: 8,
  ratio: 1
};

function Coords(x, y) {
  this.x = x || null;
  this.y = y || null;
}

var Ripple = function Ripple(x, y, circleSize, ctx) {
  this.position = new Coords(x, y);
  this.circleSize = circleSize;
  this.maxSize = rippleSettings.maxSize;
  this.opacity = 1;
  this.ctx = ctx;
  this.strokeColor = 'rgba(' + Math.floor(rippleSettings.strokeColor[0]) + ',\n    ' + Math.floor(rippleSettings.strokeColor[1]) + ',\n    ' + Math.floor(rippleSettings.strokeColor[2]) + ',\n    ' + this.opacity + ')';

  this.animationSpeed = rippleSettings.animationSpeed;
  this.opacityStep = this.animationSpeed / (this.maxSize - circleSize) / 2;
};

Ripple.prototype = {
  update: function update() {
    this.circleSize = this.circleSize + this.animationSpeed;
    this.opacity = this.opacity - this.opacityStep;
    this.strokeColor = 'rgba(' + Math.floor(rippleSettings.strokeColor[0]) + ',\n      ' + Math.floor(rippleSettings.strokeColor[1]) + ',\n      ' + Math.floor(rippleSettings.strokeColor[2]) + ',\n      ' + this.opacity + ')';
  },
  draw: function draw() {
    this.ctx.beginPath();
    this.ctx.strokeStyle = this.strokeColor;
    this.ctx.arc(this.position.x, this.position.y, this.circleSize, 0, 2 * Math.PI);
    this.ctx.stroke();
  },
  setStatus: function setStatus(status) {
    this.status = status;
  }
};

var canvas = document.querySelector('#canvas');
var ctx = canvas.getContext('2d');
var ripples = [];

var height = document.body.clientHeight;
var width = document.body.clientWidth;

var rippleStartStatus = 'start';

var isIE11 = !!window.MSInputMethodContext && !!document.documentMode;

canvas.style.filter = 'blur(' + canvasSettings.blur + 'px)';

canvas.width = width * canvasSettings.ratio;
canvas.height = height * canvasSettings.ratio;

canvas.style.width = width + 'px';
canvas.style.height = height + 'px';

var animationFrame = void 0;

// Add GUI settings
var addGuiSettings = function addGuiSettings() {
  var gui = new dat.GUI();
  gui.add(rippleSettings, 'maxSize', 0, 1000).step(1);
  gui.add(rippleSettings, 'animationSpeed', 1, 30).step(1);
  gui.addColor(rippleSettings, 'strokeColor');

  var blur = gui.add(canvasSettings, 'blur', 0, 20).step(1);
  blur.onChange(function (value) {
    canvas.style.filter = 'blur(' + value + 'px)';
  });
};

addGuiSettings();

// Function which is executed on mouse hover on canvas
var canvasMouseOver = function canvasMouseOver(e) {
  var x = e.clientX * canvasSettings.ratio;
  var y = e.clientY * canvasSettings.ratio;
  ripples.unshift(new Ripple(x, y, 2, ctx));
};

var animation = function animation() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  var length = ripples.length;
  for (var i = length - 1; i >= 0; i -= 1) {
    var r = ripples[i];

    r.update();
    r.draw();

    if (r.opacity <= 0) {
      ripples[i] = null;
      delete ripples[i];
      ripples.pop();
    }
  }
  animationFrame = window.requestAnimationFrame(animation);
};

animation();
canvas.addEventListener('mousemove', canvasMouseOver);
  
</script>
<script>
    $('#canvas').appendTo('#rec83732178 .t396__filter');
</script>