Эффект капли

<!--Эффект капли-->
<!--https://mt-webdesign.ru/blob-effect-->
<style>
.list-block {
transform: translateX(-200px);
overflow: hidden;
}
.list-block-hover {
transform: translateX(-200px);
overflow: hidden;
}
.list-block .tn-atom {
transform: translate3d(0px, -50%, 0px) scale3d(1, 1, 1) rotateX(90deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
transform-style: preserve-3d; 
opacity: 1;
transition: opacity 700ms ease 0s, transform 700ms cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
.list-block-hover .tn-atom {
transform: translate3d(0px, -7%, 0px) scale3d(1, 1, 1) rotateX(30deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
transform-style: preserve-3d; 
opacity: 1;
transition: opacity 700ms ease 0s, transform 700ms cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
</style>
<!--Создаём классы при наведении-->
<script>
$(document).ready(function() { 
$('.list-shape-block').hover(function(){ 
$('.list-block').addClass('list-block-hover'); 
}, 
function(){ 
$('.list-block').removeClass('list-block-hover'); 
});
}); 
<!--Двигаем капли по движению мыши-->
let mouseX = 0;
let ballX = 0;
let speed = 0.02;
function animate(){
let distX = mouseX - ballX;
ballX = ballX + (distX * speed);
document.querySelector(".list-block").style.left = ballX + "px";
requestAnimationFrame(animate);
}
animate();
document.addEventListener("mousemove", function(event){
mouseX = event.pageX;
});
</script>