<!-- Police Unbounded -->
<link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@400;600;800&display=swap" rel="stylesheet">

<div class="glitch" data-text="Wreizh Glitch">Wreizh Glitch</div>

<style>
  .glitch {
    position: relative;
    color: white;
    font-family: 'Unbounded', sans-serif;
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: 2px;
    display: inline-block;
    --after-duration: 1s;
    --before-duration: 1s;
    --after-shadow: -5px 0 red;
    --before-shadow: 5px 0 cyan;
  }

  .glitch::before,
  .glitch::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    overflow: hidden;
    color: white;
    clip: rect(0, 900px, 0, 0);
  }

  .glitch::before {
    animation: glitchTop var(--before-duration) infinite linear alternate-reverse;
    text-shadow: var(--before-shadow);
  }

  .glitch::after {
    animation: glitchBottom var(--after-duration) infinite linear alternate-reverse;
    text-shadow: var(--after-shadow);
  }

  @keyframes glitchTop {
    0%   { clip: rect(0, 9999px, 0, 0); transform: translate(0px, 0px); }
    20%  { clip: rect(0, 9999px, 20px, 0); transform: translate(-2px, -2px); }
    40%  { clip: rect(0, 9999px, 10px, 0); transform: translate(2px, 0px); }
    60%  { clip: rect(0, 9999px, 30px, 0); transform: translate(-1px, 2px); }
    80%  { clip: rect(0, 9999px, 15px, 0); transform: translate(1px, -1px); }
    100% { clip: rect(0, 9999px, 0, 0); transform: translate(0px, 0px); }
  }

  @keyframes glitchBottom {
    0%   { clip: rect(0, 9999px, 0, 0); transform: translate(0px, 0px); }
    20%  { clip: rect(20px, 9999px, 40px, 0); transform: translate(1px, 1px); }
    40%  { clip: rect(10px, 9999px, 30px, 0); transform: translate(-1px, -2px); }
    60%  { clip: rect(30px, 9999px, 60px, 0); transform: translate(2px, 1px); }
    80%  { clip: rect(15px, 9999px, 45px, 0); transform: translate(-2px, 2px); }
    100% { clip: rect(0, 9999px, 0, 0); transform: translate(0px, 0px); }
  }
</style>