Liquid Wave Text | Learning Axis

HTML

CSS

:root{
  --bg:#0b1220;
  --c1:#67e8f9;
  --c2:#22d3ee;
  --c3:#38bdf8;
  --c4:#a5f3fc;
}
html,body{height:100%;margin:0}
body{
  display:grid; place-items:center;
  background:
    radial-gradient(80vmax 40vmax at 20% 120%, #0f1b37 0%, transparent 60%),
    radial-gradient(90vmax 60vmax at 120% -10%, #0a1730 0%, transparent 60%),
    var(--bg);
  font-family: "Poppins", system-ui, Segoe UI, Roboto, Arial;
  overflow:hidden;
}
.wrap{
  text-align:center;
  padding:2rem 2rem;
}
.wave{
  --size:min(5vw,50px);
  line-height:1;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.35));
  user-select:none;
  white-space:nowrap;
}
.wave .row{
  display:block;
  font-size:clamp(40px, var(--size), 120px);
  margin:.08em 0;
}
.wave .row span{
  display:inline-block;
  position:relative;
  padding:0 .04em;
  background:
    conic-gradient(from 180deg, var(--c1), var(--c2), var(--c3), var(--c4), var(--c1));
  background-size:200% 200%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:
    0 0 .02em rgba(255,255,255,.2),
    0 8px 18px rgba(0,0,0,.35);
  animation:
    bob 1.9s ease-in-out infinite,
    flow 3.5s linear infinite;
  animation-delay: calc(var(--i) * .08s), 0s;
  transform-origin:center 80%;
}
.wave .row span::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(255,255,255,.35), transparent 55%);
  -webkit-mask: linear-gradient(#000, #000);
  mask: linear-gradient(#000, #000);
  mix-blend-mode:soft-light;
  pointer-events:none;
}
@keyframes flow{
  0% { background-position: 0% 50%;}
  100% { background-position: 200% 50%;}
}
@keyframes bob{
  0%,100%{ transform: translateY(0) rotate(0.2deg);}
  50% { transform: translateY(-10%) rotate(-0.2deg);}
}