JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block" id="wave">
      <span class="line" id="lines">-</span>
      <span class="line">-</span>
      <span class="line">-</span>
      <span class="line">-</span>
      <span class="line">-</span>
      <span class="line">
        <a href="#" class="circle" title="Подсказка"></a>
      </span>
      <span class="line">-</span>
      <span class="line">-</span>
      <span class="line">-</span>
      <span class="line">-</span>
    </div>

CSS

body {
  background-color: rgba(0,0,0,.3);
}
.block {
  background-color: rgba(0,0,0,.7);
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
}
.line {
  color: white;
  display: block;
  font-size: 18px;
  text-align: center;
  transform: translate(0px);
  width: 100%;
}
.circle {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border:1px solid #ff9c5d;
  display: inline-block;
  transition: .3s linear;
}
.circle:hover {
  background-color: #ff9c5d;
}

JavaScript

(function(){
  console.clear()
   let wave = document.querySelector('#wave'),
       line = document.querySelectorAll('.line');
       wave.addEventListener('mousemove',function(e){
          let startX = e.screenY
          let multy = 40

          let getOffset = (elem, startX) => {
            return Math.sin((elem.getBoundingClientRect().top - startX)/21) * 40;
          }
						for(let i = 0;i<line.length;i++){
           		let newPosX = getOffset(line[i], startX)
           		console.log(newPosX)
              line[i].style.transform = 'translate(' + (newPosX) + 'px)'
          }
      })

  })();