It Bends

            html, body {
  height: 100%;
  background: #1a5c9a;
  font-family: "Oswald", sans-serif;
}

.wrapper {
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #a0d1ff 0%, #a0d1ff 1%, rgba(0, 0, 0, 0) 100%);
  overflow: hidden;
}
.wrapper::before {
  content: "";
  background: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0) 19%);
  width: 50%;
  left: 50%;
  height: 100%;
  position: absolute;
  z-index: 10;
}

h1 {
  color: transparent;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  font-size: 20vw;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  position: absolute;
  font-weight: 900;
}
h1:after {
  content: attr(data-heading);
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  color: #2a3842;
  width: 50%;
}
h1:before {
  content: attr(data-heading);
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  color: #071a28;
  width: 100%;
  -webkit-clip-path: polygon(100% 0, 50% 0, 50% 100%, 100% 100%);
          clip-path: polygon(100% 0, 50% 0, 50% 100%, 100% 100%);
  transform: perspective(600px) rotateY(70deg);
}          

            var h1 = document.querySelector("h1");

h1.addEventListener("input", function() {
    this.setAttribute("data-heading", this.innerText);
});