Анимация волны в зависимости от курсора как?
Криво, но работает почти как должно.$('.js-line-wave').on('mouseenter, mousemove', function(e) {
    // Здесь расчитывается относитеьное положение курсора чтобы от него считать синус
    var offset = $(this).offset();
    var relativeX = (e.pageX - offset.left);
    var relativeY = (e.pageY - offset.top);

    $('.line, .button_wave, .line_item').each(function(index, letter) {        
        var posx = index; 
      
        // Здесь нужно править магические числа, например вместо 352 надо ставить ширину элемента
        //и ещё нужно править частоту волны и амплитуду, но я забыл формулы
      
        var posy = Math.sin((index / 10 + relativeX / 352) * 180 / Math.PI) * 30 - 20;
      
        // Здесь происходит применение синуса только к 30 элементам слева и справа от мышки
      
        if ($(letter).position().left > relativeX - 30 && $(letter).position().left < relativeX + 30) {
            $(letter).css("transform", "translateY(" + posy + "px)");
        } else {
            $(letter).css("transform", "translateY(" + 0 + "px)");
        }
    });


});
Задай своему .js-line-wave высоту побольше, чтоб в него вмещалась вся кривая, например height: 300px;
Еще можно для плавности добавить transition: ease transform 100ms; для двигающихся элементов.