<section class="row variable-font--scroll">
  <h1 class="title">Scroll</h1>
</section>

<section class="row variable-font--mousemove">
  <h1 class="title">Mousemove</h1>
</section>

@import url('https://rsms.me/inter/inter.css');
h1 { font-family: 'Inter', sans-serif; }
@supports (font-variation-settings: normal) {
  h1 { font-family: 'Inter var', sans-serif; }
}

* {
  padding: 0;
  margin: 0;
}
:root {
  --font-weight: 100;
  --translate: 100%;
  --slant: 0;
  --scale: 0;
}
section {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.title {
  z-index: 1;
  font-weight: var(--font-weight);
  font-size: 4vw;
  text-align: center;
  width: 80vw;
}

.variable-font--mousemove {
  background: hotpink;
  overflow: hidden;
  &:before {
    content: '';
    position: absolute;
    background: white;
    mix-blend-mode: exclusion;
    width: 100%;
    height: 110%;
    top: 0;
    left: 0;
    transform: translateY(var(--translate));
    transition: 0.4s cubic-bezier(0.64, 0.57, 0.67, 1.53);
  }
  .title {
    position: relative;
    transition: 0.8s;
    pointer-events: none;
    color: white;
    mix-blend-mode: overlay;
  }
}

.variable-font--scroll {
  background: rebeccapurple;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  &:before{
    content: '';
    background: turquoise;
    width: 120%;
    padding-bottom: 120%;
    position: absolute;
    border-radius: 100%;
    right: -60%;
    bottom: -60%;
    transform: scale(calc(var(--scale) / 10));
  }
  .title {
    position: relative;
    z-index: 1;
    font-weight: var(--font-weight);
    transform: rotate(var(--translate));
    font-size: 18vw;
    text-align: left;
    color: white;
    mix-blend-mode: overlay;
    transition: transform 0.5s cubic-bezier(0.64, 0.57, 0.67, 1.53);
  }
}

let mousemove = document.querySelector('.variable-font--mousemove');

let scroll = document.querySelector('.variable-font--scroll');

let video = document.querySelector('.variable-font--scale-video');

mousemove.addEventListener('mousemove', function(e) {
  let windowWidth =  window.innerHeight;
  let clientY = e.clientY;
  let fontWeight = clientY;
  if (fontWeight > 1000) {
    fontWeight = 1000;
  } else if (fontWeight < 100) {
    fontWeight = 100;
  }
  
  e.target.style.setProperty('--font-weight', `${ clientY }`);
  e.target.style.setProperty('--translate', `${ clientY }px`);
});

window.addEventListener('scroll', function(e) {
  let windowY = window.scrollY  * 2;
  if (windowY > 1000) windowY = 1000;
  if (windowY <= 100) windowY = 100;
  
  scroll.style.setProperty('--font-weight', `${ windowY }`);
  scroll.style.setProperty('--translate', `${ window.scrollY / window.innerHeight * 100 }deg`);
  scroll.style.setProperty('--scale', `${ window.scrollY / window.innerHeight * 10 }`);
  video.style.setProperty('--scale', `${ window.scrollY / window.innerHeight * 10 }`);
});