Edit in JSFiddle

.workspace {
    width: 100%;
    height: 100%;
  background: #fff;
}

$rudy-primary-color: #212121;
$rudy-primary-color-light: #9E9E9E;
$rudy-primary-color-dark: #616161;

$rudy-accent-color: #00C853;
$rudy-accent-color-fallback-1: #00E676;
$rudy-accent-color-fallback-2: #69F0AE;

.navbar {
  font-family: monospace;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.navbar-brand {
  a {
    color: $rudy-accent-color;
    position: relative;

    &:hover {
      color: $rudy-accent-color;
      text-decoration: none;
    }

    span {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      width: 0;
      background: $rudy-primary-color;
      border-left: .5em solid;

      box-sizing: border-box;
      -webkit-animation: typing 3s steps(13, end) infinite alternate,
        blink-caret 1s step-end infinite;
      animation: typing 3s steps(13, end) infinite alternate,
        blink-caret 1s step-end infinite;
    }
  }
}

#faux-terminal {
  @mixin terminal-navbar-size {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 51px;
    min-height: 51px;
  }

  @mixin terminal-navbar-absolute {
    content: '';
    position: absolute;
    @include terminal-navbar-size;
  }

  @mixin terminal-navbar-fixed {
    position: fixed;
    @include terminal-navbar-size;
  }

  @include terminal-navbar-fixed;
  z-index: 4000;
  pointer-events: none;

  &:before {
    @include terminal-navbar-absolute;
    z-index: 4010;
    background: -webkit-linear-gradient(#444 50%, #000 50%);
    background: linear-gradient(#444 50%, #000 50%);
    background-size: 100% 4px;
    background-repeat: repeat-y;
    opacity: .14;
    box-shadow : inset 0px 0px 1px 1px rgba(0, 0, 0, .8);
    -webkit-animation: pulse 5s linear infinite;
    animation: pulse 5s linear infinite;
  }

  &:after {
    @include terminal-navbar-absolute;
    z-index : 4011;
    background-color : $rudy-accent-color;
    background: -webkit-radial-gradient(center, rgba(0,0,0,1) 0%,rgba(0,0,0,0.62) 45%,rgba(0,9,4,0.6) 47%,$rudy-accent-color 100%);
    background: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%,rgba(0,0,0,0.62) 45%,rgba(0,9,4,0.6) 47%,$rudy-accent-color 100%);
    box-shadow : inset 0px 0px 4px 4px rgba(100, 100, 100, .5);
    opacity : .1;
  }

  .layer {
    @include terminal-navbar-absolute;
    z-index : 4001;
    box-shadow : inset 0px 0px 1px 1px rgba(64, 64, 64, .1);
    background: -webkit-radial-gradient(center,darken($rudy-accent-color,1%) 0%,rgba(64,64,64,0) 50%);
    background: radial-gradient(ellipse at center,darken($rudy-accent-color,1%) 0%,rgba(64,64,64,0) 50%);
    -webkit-transform-origin : 50% 50%;
    -ms-transform-origin : 50% 50%;
    transform-origin : 50% 50%;
    -webkit-transform: perspective(20px) rotateX(.5deg) skewX(2deg) scale(1.03);
    transform: perspective(20px) rotateX(.5deg) skewX(2deg) scale(1.03);
    -webkit-animation: glitch 1s linear infinite;
    animation: glitch 1s linear infinite;
    opacity: .9;

    &:after {
      @include terminal-navbar-absolute;
      background: -web-kit-radial-gradient(center, rgba(0,0,0,0.5) 0%,rgba(64,64,64,0) 100%);
      background: radial-gradient(ellipse at center, rgba(0,0,0,0.5) 0%,rgba(64,64,64,0) 100%);
      
      opacity: .1;
    }
  }

  .overlay {
    @include terminal-navbar-fixed;
    z-index: 4100;

    &:before {
      content : '';
      position : absolute;
      top : 0px;
      width : 100%;
      height : 5px;
      background : #fff;
      background: -webkit-linear-gradient(to bottom, rgba(255,0,0,0) 0%,rgba(255,250,250,1) 50%,rgba(255,255,255,0.98) 51%,rgba(255,0,0,0) 100%);
      background: linear-gradient(to bottom, rgba(255,0,0,0) 0%,rgba(255,250,250,1) 50%,rgba(255,255,255,0.98) 51%,rgba(255,0,0,0) 100%);
      opacity : .1;
      -webkit-animation: vline 1.25s linear infinite;
      animation: vline 1.25s linear infinite;
    }

    &:after {
      @include terminal-navbar-absolute;
      box-shadow: 0 2px 6px rgba(25,25,25,0.2),
                  inset 0 1px rgba(50,50,50,0.1),
                  inset 0 3px rgba(50,50,50,0.05),
                  inset 0 3px 8px rgba(64,64,64,0.05),
                  inset 0 -5px 10px rgba(25,25,25,0.1);
    }
  }
}


@-webkit-keyframes vline {
  0%   { top: 0px;}
  100% { top: 100%;}
}

@-webkit-keyframes pulse {
  0%   {-webkit-transform: scale(1.001);  opacity: .14; }
  8%   {-webkit-transform: scale(1.000);  opacity: .13; }
  15%  {-webkit-transform: scale(1.004);  opacity: .14; }
  30%  {-webkit-transform: scale(1.002);  opacity: .11; }
  100% {-webkit-transform: scale(1.000);  opacity: .14; }
}

@-webkit-keyframes glitch {
  0%   {-webkit-transform: scale(1, 1.002); }
  50%  {-webkit-transform: scale(1, 1.0001); }
  100% {-webkit-transform: scale(1.001, 1); }
}

@-webkit-keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: $rudy-accent-color; }
}

@-webkit-keyframes typing {
  from { width: 100%; }
  to { width: 0; }
}

@keyframes vline {
  0%   { top: 0px;}
  100% { top: 100%;}
}

@keyframes pulse {
  0%   {transform: scale(1.001);  opacity: .14; }
  8%   {transform: scale(1.000);  opacity: .13; }
  15%  {transform: scale(1.004);  opacity: .14; }
  30%  {transform: scale(1.002);  opacity: .11; }
  100% {transform: scale(1.000);  opacity: .14; }
}

@keyframes glitch {
  0%   {transform: scale(1, 1.002); }
  50%   {transform: scale(1, 1.0001); }
  100% {transform: scale(1.001, 1); }
}

@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: $rudy-accent-color; }
}

@keyframes typing {
  from { width: 100%; }
  to { width: 0; }
}