Template:Froot/frootyeffect.css

.content {
  position: relative;
}

.effect h2 {
  color: #fff;
  font-size: 8em;
  position: absolute;
  transform: translate(-50%, -50%);
}

.effect{
  color: transparent;
}

.effect {
  color: #FFA500;
  animation: animate 4s ease-in-out infinite;
}
/*This is the animation for the juice effect If you want to edit it open up the froot template and hit inspect element-> style editor -> style sheet 4. so you can edit it and test in real time
before publishing */ 
@keyframes animate {

  0%,
  100% {  /* xposition%,yposition. the more you add here the more realistic the liquid effect will look/reduce sharp edges. However to much may cause performance issues for phonegods*/
    clip-path:polygon(0%5%,16%10%,33%5%,54%9%,70%7%,84%6.2%,100%7%,100%100%,0%100%)
  }
  50% { /*second animation. the template will cycle between the one on the top and the one on the bottom forever creating the illusion of liquid. may add more than just 2 states*/
    clip-path:polygon(0%8%,16%7%,34%11.6%,51%11.2%,67%12.0%,84%12.5%,100%10.6%,100%100%,0%100%)
  }
}