<label>
  <input type="text" required>
  <ul>
    <li s>s</li>
    <li e>e</li>
    <li a>a</li>
    <li r>r</li>
    <li c>c</li>
    <li h>h</li>
  </ul>
</label>
*{
  box-sizing: border-box;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: white;
  font-family: 'Knewave', cursive;
}
label{
  width: 100%;
  max-width: 300px;
}
input{
  width: 100%;
  display: flex;
  padding: 15px;
  background-color: white;
  border: 2px solid black;
  color: #111;
  font-size: 15px;
  box-shadow: 3px 1px 0px 2px, 0px -1px 0px 2px rgba(0, 0, 0, 0.62);
  height: 58px;    
  transform: skew(-3deg, 1deg);
  font-family: 'Knewave', cursive;
  letter-spacing: 2px;
  text-transform: uppercase;
  &:focus,
  &:valid{
    outline: none;
    ~ ul li{
      @for $i from 1 through 6 {
        &:nth-child(#{$i}){
          &::before{
            filter: blur(20px);
            transform: translate(0, -35px) rotate(-210deg);
          }
          &::after{
            filter: blur(0);
            transform: scale(1) rotate(0);
          }
        }
      }
      @for $i from 1 through 6{
        &:nth-child(#{$i}){
          &::after{
            transition-delay: 200ms + ($i * 200ms);
          }
        }
      }
    }
  }
}
label{
  position: relative;
}
ul{
  position: absolute;
  top: 38px;
  left: -4px;
  margin: 0;
  list-style: none;
  padding-left: 22px;
  position: absolute;
  display: flex;
  pointer-events: none;
  transition: 200ms;
  li{
    letter-spacing: 3px;
    text-transform: uppercase;
    color: transparent;
    pointer-events: none;
    transition: 500ms ease-in-out;
    ::selection{
      color: transparent;
    }
    &::after,
    &::before{
      color: black;
      position: absolute;
      transition: 500ms ease-in-out;
    }
    &::before{
      top: -20px;
    }
    &::after{
      top: -63px;
      transform: scale(0) rotate(210deg);
      filter: blur(20px);
    }
    $chars: s,e,a,r,c,h;
    @each $char in $chars {
      $i: index($chars, $char);
      $x: index($chars, $char);
      $i: $i * 200;
      $y: $x * 12;
      &[#{$char}]::before{
        content: attr($char) quote($char);
        transition-delay: $i+ms;
      }
      &[#{$char}]::after{
        content: attr($char) quote($char);
        left: unquote($y+'px');
        color: #666;
      }
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.