Liquid effect animation on background-image

I’m looking for a code about an animation on a background-image who’s moving and make a distortion of the image.
Here’s the example of a website using Squarespace code with the animation that I’m looking for:
https://www.eliekupsc.com/cal-test-design

I hope that someone could have a solution for me.

Thank you by advance, best

I searched for this for a long time and here’s what’s the best I have for now:

<div class="background-container">
    <img src="<?php bloginfo('stylesheet_directory');?>/images/fond_general.jpg" alt="Background Image" class="background-image">
</div>
    


<style>
    
.background-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.background-image {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: url(#displacementFilter);
}
</style>
    
<script>
document.addEventListener('DOMContentLoaded', function() {
        const svgNS = "http://www.w3.org/2000/svg";
        const svg = document.createElementNS(svgNS, "svg");
        const filter = document.createElementNS(svgNS, "filter");
        const feTurbulence = document.createElementNS(svgNS, "feTurbulence");
        const feDisplacementMap = document.createElementNS(svgNS, "feDisplacementMap");
    
        svg.setAttribute("style", "position: absolute; width: 0; height: 0;");
        filter.setAttribute("id", "displacementFilter");
        feTurbulence.setAttribute("type", "turbulence");
        feTurbulence.setAttribute("baseFrequency", "0.01 0.01");
        feTurbulence.setAttribute("numOctaves", "3");
        feTurbulence.setAttribute("seed", "2");
        feDisplacementMap.setAttribute("in", "SourceGraphic");
        feDisplacementMap.setAttribute("in2", "turbulence");
        feDisplacementMap.setAttribute("scale", "30");
    
        filter.appendChild(feTurbulence);
        filter.appendChild(feDisplacementMap);
        svg.appendChild(filter);
        document.body.appendChild(svg);
    
        const animateTurbulence = () => {
            let baseFrequencyX = 0.01, baseFrequencyY = 0.01;
            let directionX = 1, directionY = 1;
    
            const animate = () => {
                if (baseFrequencyX > 0.015 || baseFrequencyX < 0.005) directionX *= -1;
                if (baseFrequencyY > 0.015 || baseFrequencyY < 0.005) directionY *= -1;
    
                baseFrequencyX += directionX * 0.00001;
                baseFrequencyY += directionY * 0.00001;
    
                feTurbulence.setAttribute('baseFrequency', `${baseFrequencyX} ${baseFrequencyY}`);
    
                requestAnimationFrame(animate);
            };
            
            animate();
        };
    
        animateTurbulence();
    });

</script>

But the animation is not moving on the image. The effect is eveywhere.

I tried PIXI and some other plugin but I want to use an SVG background and it’s not working with SVG or big images.

The example of this Squarespace website is what I really want: https://www.eliekupsc.com/cal-test-design