<div class="text-container">
    <span class="reg-text">Disappear</span>
    <span class="letter">H</span><span class="letter">e</span><span class="letter">r</span><span class="letter">e</span><span  class="letter">.</span>
</div>

$fadeUp: 100px;
$fallDown: -200px;
$delay: 50ms;
$duration: 5s;

body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    background-color: black;
}

.text-container {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-family: 'Cutive Mono', monospace;
    letter-spacing: 4px;
    font-size: 34px;
    -webkit-font-smoothing: antialiased;
    text-align: center;
}

span {
    display: inline-block;
}

.reg-text {
    transform: translateY($fadeUp);
    opacity: 0;
    
    transition: transform $duration/1.5 ease-out, opacity $duration ease;
    
    &.loaded {
        opacity: 1;
        transform: translateY(0);
    }
}

.letter {
    transition: transform $duration cubic-bezier(.43,.1,.57,.9), filter $duration ease, opacity $duration ease;
    opacity: 0;
    filter: blur(5px);
    
    &:nth-of-type(2) {
        transform: translateY($fallDown + 40px);
        transition-duration: $duration/2;
    }
    
    &:nth-of-type(3) {
        filter: blur(0);
        transform: translateY($fallDown + 30px);
        transition-duration: $duration/1.3;
    }
    
    &:nth-of-type(4) {
        transform: translateY($fallDown);
        transition-duration: $duration/1.5;
    }
    
    &:nth-of-type(5) {
        transform: translateY($fallDown + 50px);
        transition-duration: $duration/2;
    }
    
    &:nth-of-type(6) {
        filter: blur(0);
        transform: translateY($fallDown + 20px);
        transition-duration: $duration/2.3;
    }
    
    &.loaded {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

$(document).on('ready', function () {
    setTimeout(function () {
        $('.letter').addClass('loaded');
        $('.reg-text').addClass('loaded');
    }, 1000);
});