<h1 data-splitting>Breathing</h1>

/* 
  Weight axis: 100 – 700
  Width axis: 85 – 100
*/
@font-face {
  font-family: "IBM Plex Sans Roman";
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/85648/IBMPlexSansVar-Roman.ttf");
}

* {
  box-sizing: border-box;
}

body {
  font-family: "IBM Plex Sans Roman", Times;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 100vh;
  background-color: #DCEDC8;
}

h1 {
  font-weight: 100;
  font-size: 10vw;
  line-height: 10vw;
  font-variation-settings: 'wght' 100, 'wdth' 85;
}

h1 .char {
  --delay: calc((var(--char-index) + 1) * 400ms);
  animation: breathe 4000ms infinite both;
  animation-delay: var(--delay);
}

h1:hover span {
  animation-play-state: paused;
}

@keyframes breathe {
  0% {
    font-variation-settings: 'wght' 100, 'wdth' 85;
    font-size: 10vw;
  }
  60% {
    font-variation-settings: 'wght' 700, 'wdth' 100;
    font-size: 11vw;
  }
  
  100% {
    font-variation-settings: 'wght' 100, 'wdth' 85;
    font-size: 10vw;
  }
}

Splitting()