모션 패럴랙스

<div class="depth">
  <div class="layer far"></div>
  <div class="layer mid"></div>
  <div class="layer near"></div>
</div>
<div class="eye"></div>

.depth{position:absolute;inset:0;overflow:hidden;background:linear-gradient(180deg,#bcd7ea,#e9e6d8 65%)}
.layer{position:absolute;left:-15%;right:-15%;bottom:0}
.far{height:30%;background:#a9bdae;opacity:.6;
  clip-path:polygon(0 100%,0 58%,12% 32%,24% 62%,38% 22%,52% 56%,66% 18%,80% 50%,92% 26%,100% 56%,100% 100%)}
.mid{height:22%;background:#79a082;opacity:.8;
  clip-path:polygon(0 100%,0 42%,16% 72%,30% 22%,46% 62%,60% 12%,76% 56%,90% 26%,100% 60%,100% 100%)}
.near{height:15%;background:#3f5744;
  clip-path:polygon(0 100%,0 24%,10% 62%,22% 8%,34% 52%,48% 2%,60% 46%,74% 12%,86% 56%,100% 18%,100% 100%)}
.eye{position:absolute;left:50%;bottom:4%;width:6%;aspect-ratio:1.6;border-radius:3px;background:var(--fg);
  opacity:.7;transform:translateX(-50%)}

const far=document.querySelector('.far');
const mid=document.querySelector('.mid');
const near=document.querySelector('.near');
const eye=document.querySelector('.eye');
function frame(t){
  const shift=Math.sin(t*0.0007);
  far.style.transform='translateX('+(shift*3)+'%)';
  mid.style.transform='translateX('+(shift*10)+'%)';
  near.style.transform='translateX('+(shift*22)+'%)';
  eye.style.left=(50+shift*30)+'%';
  requestAnimationFrame(frame);
}
requestAnimationFrame(frame);