#wrapper
   -for (var x = 0; x < 30; x++)
    .text Infinite
#editor
  .typer
    input(type='text' name='text' value='Infinite')
    .hint Type Something
#copy <a href="https://twitter.com/igcorreia" target="_blank">Crafted by: <b>@igcorreia</b><br/>Searching for a Dribbble invite :)</a>

@link:#898989;
@transition:all 0.3s ease-in-out 0s;
@linkhover:#fff;

html{
  font-family: 'Noto Sans', sans-serif;
  overflow: hidden;
  -ms-touch-action: none;
  -ms-content-zooming: none;
  user-select: none;
  background: #000;
  color:#000;
  min-height: 100%;
  height: 100%;
  font-weight: 700;
  
  body{
    min-height: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow:hidden;
    
    #copy{
      position:absolute;
      bottom:0;
      height: 40px;
      width: 100%;
      text-align:center;
      text-transform:uppercase;
      line-height: 14px;
      font-size:10px;
      font-weight:400;
      z-index:999;
      
      a{
        color:@link;
        text-decoration:none;
        transition:@transition;
        
        b{
          font-weight: 700;
        }
        &:hover{
          color:@linkhover
        }
      }
    }
  

    #editor{
      position:absolute;
      width: 100%;
      height: 100%;
      z-index:9;
      text-align:center;
      
      .typer{
      
        input{
          border:0;
          border-bottom:solid 1px #2f2f2f;
          background:transparent;
          color:#fff;
          text-align:center;
          margin-top:20px;
          font-size:20px;
          letter-spacing: 5px;
          font-weight:100;

          &:focus{
            outline:none;
            box-shadow:0 none;
          }
          
        }
        .hint{
            position: relative;
            font-size: 10px;
            font-weight: 100;
            text-align: center;
            float: none;
            display: block;
            width: 100%;
            color: #767676;
          cursor:default;
        }
      }
    }
    #wrapper{
      position:absolute;
      width: 100%;
      height: 100%;
      
      @iterations: 30;
      .mixin-loop (@i) when (@i > 0) {
        .text:nth-child(@{i}){
          font-size: 30px+@i*3;
        }
        .mixin-loop(@i - 1);
      }
      .mixin-loop(@iterations);

      .text {
        cursor: default;
        position: absolute;
        height: 100%;
        width: 2000px;
        min-height: 100%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        text-align: center;
        -webkit-text-fill-color: black;
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: white;
        left: 50%;
        transform: translate(-50%);
        letter-spacing: 10px;
        opacity:0;
      }
    }
  }
}

/* 
* Hi and Welcome to Codepen!
*
* My name is Ignacio and I am looking for a Dribble invitation.
* Please contact me via twitter if you have 1, 
* I would like to have 1 hehe :)
* 
*
* Finally I can reproduce in CSS what I managed to design in Photoshop. 
* Still not all browsers allow for the creatives to reproduce everything.
* We still have browser compatibility problems.
*
* I will keep publishing examples to help push the web foward.
* PLEASE Like, Heart or Share if you like, and don't forget to follow. 
* Thanks.
*
* Now let's animate it :)
*/

$(document).ready(function(){
  var tl = new TimelineLite()
  ,inter = 30
  ,speed = 1
  ,$text = $('.text');
  function animInfinite(){
    $('.text').each(function(index,val) {
      index = index + 1;
      TweenMax.fromTo(
        $(this), speed, {autoAlpha:0},{autoAlpha:0+(0.01*index),delay:0.1*index});
     });
    TweenMax.to(
      $('.text:nth-child(30)'), speed,{autoAlpha:1.5,delay:3.5}
    );
  }
  $('.typer input').keyup(function() {
    //Stop Everything First
    TweenMax.killAll(false, true, false);
    TweenMax.set($text, {autoAlpha:0});
    $text.text(this.value);
     animInfinite();
  });
  animInfinite();
});