body{
  margin: 20px;
  background: #ececec;
}

.demo-container{
  display: flex;
  justify-content: space-between;
  align-items: start;
  padding: 0px 20px;
}

.demo{
  margin: auto;
  width: 400px;
  height: 300px;
  background-color: black;
}

new RippleEffect({
  parent: document.querySelector('.demo1'),
  texture: 'https://upload.wikimedia.org/wikipedia/commons/3/30/Echo_Park_Lake_with_Downtown_Los_Angeles_Skyline.jpg',
  intensity: 1,
  strength: 2,
  area: 4,
  waveSpeed: 0.008,
  speedIn: 1.5,
  speedOut: 2,
  easing: 'Expo.easeInOut',
  hover: true,
});

new RippleEffect({
  parent: document.querySelector('.demo2'),
  texture: 'https://images.unsplash.com/photo-1588948378271-ae6cf0060ff8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80',
  intensity: 1.5,
  strength: .9,
  area: 6,
  waveSpeed: 0.01,
  speedIn: 1.5,
  speedOut: 2,
  easing: 'Expo.easeInOut',
  hover: true,
});
 
new RippleEffect({
  parent: document.querySelector('.demo3'),
  texture: 'https://images.unsplash.com/photo-1627729115394-16a6019b4064?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=401&q=80',
  intensity: 1.5,
  strength: 3,
  area: 6,
  waveSpeed: 0.01,
  speedIn: 1.5,
  speedOut: 2,
  easing: 'Expo.easeInOut',
  hover: true,
});