@font-face {

  font-family: 'Anybody';

  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/61488/ETCAnybodyPB.woff2') format('woff2-variations');

  font-display: block;

  font-style: normal italic;

  font-weight: 100 900;

  font-stretch: 10% 400%;

}

​

html, body {

    width: 100%;

    height: 100%;

    display: flex;

    font-size: 48px;

    font-family: 'Anybody';

    color: #fff;

    background: radial-gradient(circle at 50% 100%, #333, #000 80%);

}

​

.g-container {

    position: relative;

    margin: auto;

    display: flex;

    transform-style: preserve-3d;

    perspective: 200px;

}

​

ul {

    background: radial-gradient(farthest-side at 110px 0px, rgba(255, 255, 255, 0.2) 0%, #171717 100%);

    padding: 5px;

    transform-style: preserve-3d;

    transform: translateZ(-60px) rotateX(30deg) translateY(-30px);

    animation: move 3s infinite alternate;

    &::before {

        content: "";

        position: absolute;

        left: 0;

        bottom: 0;

        right: 0;

        height: 45px;

        background: #141313;

        z-index: 10;

        transform: rotateX(

    -230deg);

        transform-origin: 50% 100%;

    }

}

​

li {

    width: 410px;

    font-variation-settings: 'wdth' 85, 'wght' 100;

    animation: change 0.8s infinite linear alternate;

}

​

@for $i from 1 to 9 {

    li:nth-child(#{$i}) {

        animation-delay: #{($i - 1) * -0.125}s;

    }

}

​

@keyframes change {

    0% {

        font-variation-settings: 'wdth' 60, 'wght' 100;

        opacity: .5;

    }

    100% {

        font-variation-settings: 'wdth' 400, 'wght' 900;

        opacity: 1;

    }

}

​

@keyframes move {

    100% {

        transform: translateZ(-60px) rotateX(30deg) translateY(0px);

    }

}

​