<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
*
{
margin: 0;
padding:0;
box-sizing: bordder-box;
}
.liquid{
width:100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #183954;
}
.liquid h2{
position: absolute;
font-size: 15vw;
font-family: poppins;
}
.liquid h2:nth-child(1){
color: #fff;
text-shadow: -2px 2px 0px #183954,
-4px 4px 0px #183954,
-6px 6px 0px #183954,
-8px 8px 0px #183954,
-18px 18px 50px rgba(0,0,0,0.5),
-18px 18px 20px rgba(0,0,0,0.5);
}
.liquid h2:nth-child(2){
color: #2196f3;
opacity:0.5;
animation: animate 6s ease-in-out infinite;
}
.liquid h2:nth-child(3){
color: #1b95e0;
opacity:0.8;
animation: animate 8s ease-in-out infinite;
}
.liquid h2:nth-child(4){
color: #2196f3;
animation: animate 10s ease-in-out infinite;
}
@keyframes animate{
0%,100%{
clip-path: polygon(0% 55%, 13% 51%, 28% 55%, 45% 63%, 63% 67%, 82% 61%, 100% 49%, 100% 100%, 0% 100%);
}
50%{
clip-path: polygon(0 73%, 15% 77%, 30% 79%, 49% 70%, 65% 57%, 84% 49%, 100% 52%, 100% 100%, 0% 100%);
}
}
</style>
<div class="liquid">
<h2>ARI THE BIRD</h2>
<h2>ARI THE BIRD</h2>
<h2>ARI THE BIRD</h2>
<h2>ARI THE BIRD</h2>
</div>