- var text = "water"

#js-vue(@mouseover="water" @mouseout="water")
  svg.svg(xmlns="http://www.w3.org/2000/svg")
    filter#filter_1
      feTurbulence#js-fe_turbulence_1(type="turbulence" baseFrequency="0.01" numOctaves="1" seed="1")
      feDisplacementMap#js-fe_displacement_map_1(in="SourceGraphic" in2="turbulence" scale="0" xChannelSelector="R" yChannelSelector="B")
    filter#filter_2
      feTurbulence#js-fe_turbulence_2(type="turbulence" baseFrequency="0.01" numOctaves="1" seed="1")
      feDisplacementMap#js-fe_displacement_map_2(in="SourceGraphic" in2="turbulence" scale="0" xChannelSelector="R" yChannelSelector="B")
    filter#filter_3
      feTurbulence#js-fe_turbulence_3(type="turbulence" baseFrequency="0.01" numOctaves="1" seed="1")
      feDisplacementMap#js-fe_displacement_map_3(in="SourceGraphic" in2="turbulence" scale="0" xChannelSelector="R" yChannelSelector="B")
  .water.water_1= text
  .water.water_2= text
  .water.water_3= text

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  color: rgba(100, 200, 255, 0.7);
  font-family: 'Dosis', sans-serif;
  font-size: 8rem;
}

.svg {
  display: none;
}

.water {
  position: absolute;
  transform: translate(-50%, -50%);
  background: linear-gradient(180deg, #ffffff, #ffffff, #0000ff);
  background-clip: text;
  text-fill-color: transparent;
  opacity: 0.8;
  cursor: pointer;
  
  &_1 {
    filter: url(#filter_1);
  }
  
  &_2 {
    filter: url(#filter_2);
  }
  
  &_3 {
    filter: url(#filter_3);
    opacity: 0.3;
  }
}

new Vue({
  el: '#js-vue',

  data () {
    return {
      duration: 5000
    }
  },

  computed: {
  },

  mounted () {
    this.water()
    this.duration = 2000
  },

  methods: {
    water () {
      anime({
        targets: ['#js-fe_turbulence_1', '#js-fe_displacement_map_1'],
        baseFrequency: [0.03, 0],
        scale: [20, 0],
        duration: this.duration,
        easing: 'easeOutCubic'
      })
      
      anime({
        targets: ['#js-fe_turbulence_2', '#js-fe_displacement_map_2'],
        baseFrequency: [0.2, 0],
        scale: [20, 0],
        duration: this.duration * 2,
        easing: 'easeOutCubic'
      })
      
      anime({
        targets: ['#js-fe_turbulence_3', '#js-fe_displacement_map_3'],
        baseFrequency: [0.1, 0],
        scale: [40, 0],
        duration: this.duration * 3,
        easing: 'easeOutCubic'
      })
    }
  }
})