JSFiddle - React, Tailwind, and code Playground

by LĂ©o Durand

HTML

<div class="glitch" data-text="instagram">instagram</div>

CSS

* {
      font-family: sans-serif;
    }
    body {
      background-color: black;  
    }
    
    .glitch {
      color: white;
      font-size: 15px;
      margin: 0 auto;
      width: 400px;
    }
    
    /* Real glitch effect */
    .glitch {
      position: relative;
    }
    
    .glitch:after {
      animation: glitch-animation 2s infinite linear alternate-reverse;
      background: black;
      clip: rect( 0, 900px, 0, 0 );
      color: white;
      content: attr( data-text );
      left: 2px;
      overflow: hidden;
      position: absolute;
      text-shadow: -1px 0 red;
      top: 0;
    }
    .glitch:before {
      animation: glitch-animation-2 3s infinite linear alternate-reverse;
      background: black;
      clip: rect( 0, 900px, 0, 0 );
      color: white;
      content: attr( data-text );
      left: -2px;
      overflow: hidden;
      position: absolute;
      text-shadow: 1px 0 blue;
      top: 0;
    }
    /* Expanded Animations */
    @keyframes glitch-animation {
      0% {
        clip: rect(50%, 9999px, 44px, 0);
      }
      5% {
        clip: rect(10%, 9999px, 59px, 0);
      }
      10% {
        clip: rect(50%, 9999px, 29px, 0);
      }
      15.0% {
        clip: rect(42px, 9999px, 73px, 0);
      }
      20% {
        clip: rect(63px, 9999px, 27px, 0);
      }
      25% {
        clip: rect(34px, 9999px, 55px, 0);
      }
      30.0% {
        clip: rect(86px, 9999px, 73px, 0);
      }
      35% {
        clip: rect(20px, 9999px, 20px, 0);
      }
      40% {
        clip: rect(26px, 9999px, 60px, 0);
      }
      45% {
        clip: rect(25px, 9999px, 66px, 0);
      }
      50% {
        clip: rect(57px, 9999px, 98px, 0);
      }
      55.0% {
        clip: rect(5px, 9999px, 46px, 0);
      }
      60.0% {
        clip: rect(82px, 9999px, 31px, 0);
      }
      65% {
        clip: rect(54px, 9999px, 27px, 0);
      }
      70% {
        clip: rect(28px, 9999px, 99px, 0);
      }
      75% {
        clip: rect(45px, 9999px,...