ti-dashboard/static/glitch.css

body {
  overflow: hidden;
}

.wrap {
  background-image: url(http://api.thumbr.it/whitenoise-361x370.png?background=000000ff&noise=ffffff&density=61&opacity=20);
  -moz-animation: noise 0.3s infinite;
  -webkit-animation: noise 0.3s infinite;
  animation: noise 0.3s infinite;
  background-size: contain;
  height: 100vh;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
}

.glitch {
  font-family: 'vt-323';
  font-weight: 600;
  color: white;
  font-size: 60px;
  position: relative;
  margin: 0 auto;
  text-shadow: 0px -5px 10px white, 0px 0px 5px rgba(255, 255, 255, 0), 0px 0px 10px rgba(255, 255, 255, 0), 0px 0px 15px rgba(255, 255, 255, 0), 0px 0px 20px rgba(255, 255, 255, 0);
  -webkit-animation: noise-anim-2 3s infinite linear alternate-reverse, shift 4s ease-in-out infinite alternate, blur 8s ease-in-out infinite alternate;
          animation: noise-anim-2 3s infinite linear alternate-reverse, shift 4s ease-in-out infinite alternate, blur 8s ease-in-out infinite alternate;
  -webkit-transform: skewX(0deg);
  transform: skewX(0deg);
}
.wrap:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  background: url(http://api.thumbr.it/whitenoise-361x370.png?background=000000ff&noise=ffffff&density=61&opacity=40);
  -moz-animation: bar 0.5s infinite;
  -webkit-animation: bar 0.5s infinite;
  animation: bar 0.5s infinite;
}
@-webkit-keyframes blur {
  0%,40%, 50%, 60%, 90%, 95%, 100% {
    text-shadow: 0px -5px 10px white, 0px 0px 5px rgba(255, 255, 255, 0), 0px 0px 10px rgba(255, 255, 255, 0), 2px 1px 15px rgba(100, 240, 255, 0), 0px 0px 20px rgba(255, 255, 255, 0);
  }
  45%, 75% {
    text-shadow: 0px -5px 10px white, 0px 0px 5px white, 0px 0px 10px white, 2px 1px 15px #64f0ff, 0px 0px 20px white;
  }
  97.5% {
    text-shadow: 0px -5px 10px rgba(255, 255, 255, 0), 0px 0px 5px rgba(255, 255, 255, 0), 0px 0px 10px rgba(255, 255, 255, 0), 2px 1px 4px #ff6464, 0px 0px 20px rgba(255, 255, 255, 0);
  }
}
@keyframes blur {
  0%,40%, 50%, 60%, 90%, 95%, 100% {
    text-shadow: 0px -5px 10px white, 0px 0px 5px rgba(255, 255, 255, 0), 0px 0px 10px rgba(255, 255, 255, 0), 2px 1px 15px rgba(100, 240, 255, 0), 0px 0px 20px rgba(255, 255, 255, 0);
  }
  45%, 75% {
    text-shadow: 0px -5px 10px white, 0px 0px 5px white, 0px 0px 10px white, 2px 1px 15px #64f0ff, 0px 0px 20px white;
  }
  97.5% {
    text-shadow: 0px -5px 10px rgba(255, 255, 255, 0), 0px 0px 5px rgba(255, 255, 255, 0), 0px 0px 10px rgba(255, 255, 255, 0), 2px 1px 4px #ff6464, 0px 0px 20px rgba(255, 255, 255, 0);
  }
}
.glitch:after {
  content: attr(data-text);
  position: absolute;
  left: 3px;
  text-shadow: -1px 0 red;
  top: 0;
  color: transparent;
  background: transparent;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  -webkit-animation: noise-anim-2 3s infinite linear alternate-reverse, shift 4s ease-in-out infinite alternate;
          animation: noise-anim-2 3s infinite linear alternate-reverse, shift 4s ease-in-out infinite alternate;
  -webkit-transform: skewX(0deg);
  transform: skewX(0deg);
  z-index: -2;
  opacity: .7;
}

.glitch:before {
  content: attr(data-text);
  position: absolute;
  left: 1px;
  text-shadow: -3px 0 cyan;
  top: 0;
  color: transparent;
  background: transparent;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  -webkit-animation: noise-anim-2 3s infinite linear alternate-reverse, shift 4s ease-in-out infinite alternate;
          animation: noise-anim-2 3s infinite linear alternate-reverse, shift 4s ease-in-out infinite alternate;
  -webkit-transform: skewX(0deg);
  transform: skewX(0deg);
  z-index: -1;
  opacity: .8;
}

@-webkit-keyframes noise-anim {
  0% {
    clip: rect(8px, 9999px, 66px, 0);
  }
  5% {
    clip: rect(27px, 9999px, 62px, 0);
  }
  10% {
    clip: rect(86px, 9999px, 14px, 0);
  }
  15% {
    clip: rect(25px, 9999px, 44px, 0);
  }
  20% {
    clip: rect(60px, 9999px, 59px, 0);
  }
  25% {
    clip: rect(29px, 9999px, 55px, 0);
  }
  30% {
    clip: rect(20px, 9999px, 96px, 0);
  }
  35% {
    clip: rect(98px, 9999px, 33px, 0);
  }
  40% {
    clip: rect(10px, 9999px, 44px, 0);
  }
  45% {
    clip: rect(49px, 9999px, 28px, 0);
  }
  50% {
    clip: rect(6px, 9999px, 35px, 0);
  }
  55% {
    clip: rect(18px, 9999px, 14px, 0);
  }
  60% {
    clip: rect(29px, 9999px, 22px, 0);
  }
  65% {
    clip: rect(86px, 9999px, 65px, 0);
  }
  70% {
    clip: rect(29px, 9999px, 81px, 0);
  }
  75% {
    clip: rect(1px, 9999px, 32px, 0);
  }
  80% {
    clip: rect(66px, 9999px, 37px, 0);
  }
  85% {
    clip: rect(16px, 9999px, 4px, 0);
  }
  90% {
    clip: rect(12px, 9999px, 54px, 0);
  }
  95% {
    clip: rect(14px, 9999px, 88px, 0);
  }
  100% {
    clip: rect(26px, 9999px, 26px, 0);
  }
}

@keyframes noise-anim {
  0% {
    clip: rect(8px, 9999px, 66px, 0);
  }
  5% {
    clip: rect(27px, 9999px, 62px, 0);
  }
  10% {
    clip: rect(86px, 9999px, 14px, 0);
  }
  15% {
    clip: rect(25px, 9999px, 44px, 0);
  }
  20% {
    clip: rect(60px, 9999px, 59px, 0);
  }
  25% {
    clip: rect(29px, 9999px, 55px, 0);
  }
  30% {
    clip: rect(20px, 9999px, 96px, 0);
  }
  35% {
    clip: rect(98px, 9999px, 33px, 0);
  }
  40% {
    clip: rect(10px, 9999px, 44px, 0);
  }
  45% {
    clip: rect(49px, 9999px, 28px, 0);
  }
  50% {
    clip: rect(6px, 9999px, 35px, 0);
  }
  55% {
    clip: rect(18px, 9999px, 14px, 0);
  }
  60% {
    clip: rect(29px, 9999px, 22px, 0);
  }
  65% {
    clip: rect(86px, 9999px, 65px, 0);
  }
  70% {
    clip: rect(29px, 9999px, 81px, 0);
  }
  75% {
    clip: rect(1px, 9999px, 32px, 0);
  }
  80% {
    clip: rect(66px, 9999px, 37px, 0);
  }
  85% {
    clip: rect(16px, 9999px, 4px, 0);
  }
  90% {
    clip: rect(12px, 9999px, 54px, 0);
  }
  95% {
    clip: rect(14px, 9999px, 88px, 0);
  }
  100% {
    clip: rect(26px, 9999px, 26px, 0);
  }
}
@-webkit-keyframes noise-anim-2 {
  0% {
    clip: rect(53px, 9999px, 81px, 0);
  }
  5% {
    clip: rect(40px, 9999px, 55px, 0);
  }
  10% {
    clip: rect(72px, 9999px, 65px, 0);
  }
  15% {
    clip: rect(68px, 9999px, 46px, 0);
  }
  20% {
    clip: rect(55px, 9999px, 36px, 0);
  }
  25% {
    clip: rect(96px, 9999px, 39px, 0);
  }
  30% {
    clip: rect(7px, 9999px, 6px, 0);
  }
  35% {
    clip: rect(37px, 9999px, 59px, 0);
  }
  40% {
    clip: rect(69px, 9999px, 58px, 0);
  }
  45% {
    clip: rect(98px, 9999px, 94px, 0);
  }
  50% {
    clip: rect(35px, 9999px, 41px, 0);
  }
  55% {
    clip: rect(76px, 9999px, 40px, 0);
  }
  60% {
    clip: rect(91px, 9999px, 74px, 0);
  }
  65% {
    clip: rect(75px, 9999px, 57px, 0);
  }
  70% {
    clip: rect(62px, 9999px, 45px, 0);
  }
  75% {
    clip: rect(100px, 9999px, 34px, 0);
  }
  80% {
    clip: rect(56px, 9999px, 9px, 0);
  }
  85% {
    clip: rect(27px, 9999px, 87px, 0);
  }
  90% {
    clip: rect(84px, 9999px, 27px, 0);
  }
  95% {
    clip: rect(27px, 9999px, 34px, 0);
  }
  100% {
    clip: rect(44px, 9999px, 79px, 0);
  }
}
@keyframes noise-anim-2 {
  0% {
    clip: rect(53px, 9999px, 81px, 0);
  }
  5% {
    clip: rect(40px, 9999px, 55px, 0);
  }
  10% {
    clip: rect(72px, 9999px, 65px, 0);
  }
  15% {
    clip: rect(68px, 9999px, 46px, 0);
  }
  20% {
    clip: rect(55px, 9999px, 36px, 0);
  }
  25% {
    clip: rect(96px, 9999px, 39px, 0);
  }
  30% {
    clip: rect(7px, 9999px, 6px, 0);
  }
  35% {
    clip: rect(37px, 9999px, 59px, 0);
  }
  40% {
    clip: rect(69px, 9999px, 58px, 0);
  }
  45% {
    clip: rect(98px, 9999px, 94px, 0);
  }
  50% {
    clip: rect(35px, 9999px, 41px, 0);
  }
  55% {
    clip: rect(76px, 9999px, 40px, 0);
  }
  60% {
    clip: rect(91px, 9999px, 74px, 0);
  }
  65% {
    clip: rect(75px, 9999px, 57px, 0);
  }
  70% {
    clip: rect(62px, 9999px, 45px, 0);
  }
  75% {
    clip: rect(100px, 9999px, 34px, 0);
  }
  80% {
    clip: rect(56px, 9999px, 9px, 0);
  }
  85% {
    clip: rect(27px, 9999px, 87px, 0);
  }
  90% {
    clip: rect(84px, 9999px, 27px, 0);
  }
  95% {
    clip: rect(27px, 9999px, 34px, 0);
  }
  100% {
    clip: rect(44px, 9999px, 79px, 0);
  }
}
@-webkit-keyframes shift {
  0%,40%, 44%, 58%, 61%, 65%,69%,73%,100% {
    -webkit-transform: skewX(0deg);
    transform: skewX(0deg);
  }
  41% {
    -webkit-transform: skewX(10deg);
    transform: skewX(10deg);
  }
  42% {
    -webkit-transform: skewX(-10deg);
    transform: skewX(-10deg);
  }
  59% {
    -webkit-transform: skewX(40deg) skewY(10deg);
    transform: skewX(40deg) skewY(10deg);
  }
  60% {
    -webkit-transform: skewX(-40deg) skewY(-10deg);
    transform: skewX(-40deg) skewY(-10deg);
  }
  63% {
    -webkit-transform: skewX(10deg) skewY(-5deg);
    transform: skewX(10deg) skewY(-5deg);
  }
  70% {
    -webkit-transform: skewX(-50deg) skewY(-20deg);
    transform: skewX(-50deg) skewY(-20deg);
  }
  71% {
    -webkit-transform: skewX(10deg) skewY(-10deg);
    transform: skewX(10deg) skewY(-10deg);
  }
}
@keyframes shift {
  0%,40%, 44%, 58%, 61%, 65%,69%,73%,100% {
    -webkit-transform: skewX(0deg);
    transform: skewX(0deg);
  }
  41% {
    -webkit-transform: skewX(10deg);
    transform: skewX(10deg);
  }
  42% {
    -webkit-transform: skewX(-10deg);
    transform: skewX(-10deg);
  }
  59% {
    -webkit-transform: skewX(40deg) skewY(10deg);
    transform: skewX(40deg) skewY(10deg);
  }
  60% {
    -webkit-transform: skewX(-40deg) skewY(-10deg);
    transform: skewX(-40deg) skewY(-10deg);
  }
  63% {
    -webkit-transform: skewX(10deg) skewY(-5deg);
    transform: skewX(10deg) skewY(-5deg);
  }
  70% {
    -webkit-transform: skewX(-50deg) skewY(-20deg);
    transform: skewX(-50deg) skewY(-20deg);
  }
  71% {
    -webkit-transform: skewX(10deg) skewY(-10deg);
    transform: skewX(10deg) skewY(-10deg);
  }
}

@-moz-keyframes noise {
  0% {
    background-position: 49px 45px;
  }
  10% {
    background-position: 12px 22px;
  }
  20% {
    background-position: -81px 32px;
  }
  30% {
    background-position: 52px -87px;
  }
  40% {
    background-position: 33px 46px;
  }
  50% {
    background-position: 6px -83px;
  }
  60% {
    background-position: 23px 26px;
  }
  70% {
    background-position: -97px -75px;
  }
  80% {
    background-position: -49px 89px;
  }
  90% {
    background-position: 69px -23px;
  }
}
@-webkit-keyframes noise {
  0% {
    background-position: -84px -42px;
  }
  10% {
    background-position: 91px -12px;
  }
  20% {
    background-position: -19px 24px;
  }
  30% {
    background-position: -62px 53px;
  }
  40% {
    background-position: 83px -50px;
  }
  50% {
    background-position: -80px 39px;
  }
  60% {
    background-position: 62px -67px;
  }
  70% {
    background-position: -30px 51px;
  }
  80% {
    background-position: 45px 8px;
  }
  90% {
    background-position: -11px -20px;
  }
}
@keyframes noise {
  0% {
    background-position: -50px -96px;
  }
  10% {
    background-position: -51px -33px;
  }
  20% {
    background-position: -81px 13px;
  }
  30% {
    background-position: -4px -79px;
  }
  40% {
    background-position: -7px -27px;
  }
  50% {
    background-position: -58px 21px;
  }
  60% {
    background-position: 86px -69px;
  }
  70% {
    background-position: 97px 35px;
  }
  80% {
    background-position: 5px -84px;
  }
  90% {
    background-position: 19px -24px;
  }
}
@-moz-keyframes bar {
  0% {
    height: 397px;
    top: 72%;
    opacity: 0.42;
  }
  10% {
    height: 498px;
    top: 60%;
    opacity: 0.49;
  }
  20% {
    height: 182px;
    top: 18%;
    opacity: 0.23;
  }
  30% {
    height: 543px;
    top: 18%;
    opacity: 0.41;
  }
  40% {
    height: 219px;
    top: 58%;
    opacity: 0.33;
  }
  50% {
    height: 288px;
    top: 6%;
    opacity: 0.34;
  }
  60% {
    height: 132px;
    top: 42%;
    opacity: 0.58;
  }
  70% {
    height: 389px;
    top: 77%;
    opacity: 0.26;
  }
  80% {
    height: 383px;
    top: 68%;
    opacity: 0.68;
  }
  90% {
    height: 346px;
    top: 86%;
    opacity: 0.06;
  }
}
@-webkit-keyframes bar {
  0% {
    height: 591px;
    top: 86%;
    opacity: 0.61;
  }
  10% {
    height: 420px;
    top: 54%;
    opacity: 0.15;
  }
  20% {
    height: 626px;
    top: 24%;
    opacity: 0.19;
  }
  30% {
    height: 595px;
    top: 87%;
    opacity: 0.1;
  }
  40% {
    height: 81px;
    top: 29%;
    opacity: 0.47;
  }
  50% {
    height: 621px;
    top: 23%;
    opacity: 0.22;
  }
  60% {
    height: 79px;
    top: 67%;
    opacity: 0.38;
  }
  70% {
    height: 119px;
    top: 37%;
    opacity: 0.39;
  }
  80% {
    height: 178px;
    top: 48%;
    opacity: 0.55;
  }
  90% {
    height: 415px;
    top: 72%;
    opacity: 0.3;
  }
}
@keyframes bar {
  0% {
    height: 578px;
    top: 100%;
    opacity: 0.48;
  }
  10% {
    height: 32px;
    top: 24%;
    opacity: 0.36;
  }
  20% {
    height: 359px;
    top: 15%;
    opacity: 0.03;
  }
  30% {
    height: 177px;
    top: 43%;
    opacity: 0.07;
  }
  40% {
    height: 124px;
    top: 52%;
    opacity: 0.42;
  }
  50% {
    height: 216px;
    top: 34%;
    opacity: 0.1;
  }
  60% {
    height: 315px;
    top: 30%;
    opacity: 0.02;
  }
  70% {
    height: 379px;
    top: 30%;
    opacity: 0.47;
  }
  80% {
    height: 475px;
    top: 100%;
    opacity: 0.48;
  }
  90% {
    height: 401px;
    top: 98%;
    opacity: 0.12;
  }
}