HTML CSS

<svg viewBox="0 0 800 800">
  <defs>
    <text id="title" font-size="60" font-weight="bold" letter-spacing="2" font-family="Familjen Grotesk">
      BLACK MIRROR
    </text>
    <filter id="blur" width="1.0112729" height="1.1185185" x="-0.0056364482" y="-0.059259259" color-interpolation-filters="sRGB">
      <feGaussianBlur id="feGaussianBlur119" stdDeviation="1 1" result="blur"></feGaussianBlur>
    </filter>
  </defs>
  <g id="title-text" filter="url(#blur)">
    <use id="title-left" fill="red" x="195.3" y="421.1" xlink:href="#title"></use>
    <use id="title-middle" fill="green" x="195.3" y="421.1" xlink:href="#title"></use>
    <use id="title-right" fill="blue" x="195.3" y="421.1" xlink:href="#title"></use>
  </g>
</svg>

:root {
    --crack-duration: 3s;
  }

  #title-left {
    --crack-clip: polygon(
      7.76% 9.16%,
      18.81% 39.67%,
      27.09% 45.26%,
      41.57% 66.95%,
      43.11% 84.74%,
      20.18% 84.74%,
      -2.07% 85.26%,
      -1.55% 11.69%
    );

    animation-name: crack-left;
    animation-iteration-count: infinite;
    animation-duration: var(--crack-duration);
    animation-fill-mode: forwards;
  }

  #title-right {
    --crack-clip: polygon(
      70% 24.4%,
      100.52% 23.9%,
      100.52% 88.3%,
      64.31% 87.8%,
      43.96% 42.04%,
      40.33% 27.3%
    );

    animation-name: crack-right;
    animation-iteration-count: infinite;
    animation-duration: var(--crack-duration);
    animation-fill-mode: forwards;
  }

  #title-middle {
    --crack-clip: polygon(
      41.73% 23.68%,
      48.4% 38.16%,
      55.62% 59.29%,
      65.64% 78.93%,
      65.44% 86.84%,
      43.28% 86.84%,
      43.88% 69.39%,
      38.63% 66.75%,
      26.69% 46.24%,
      21.12% 44.58%,
      18.23% 43.47%,
      14.06% 23.7%
    );

    animation-name: crack;
    animation-iteration-count: infinite;
    animation-duration: var(--crack-duration);
    animation-fill-mode: forwards;
  }

  #crack {
    animation-name: show;

    animation-duration: var(--crack-duration);
    animation-fill-mode: forwards;
  }

  @keyframes crack {
    to {
      clip-path: var(--crack-clip);
    }
  }

  @keyframes crack-right {
    to {
      clip-path: var(--crack-clip);
      translate: 1% -1%;
    }
  }

  @keyframes crack-left {
    to {
      clip-path: var(--crack-clip);
      translate: -0.45% 0.35%;
    }
  }

  /* general styles */

  body {
    height: 100dvh;
    margin: 0;

    display: grid;
    place-items: center;

    background-color: #000;

    overflow: hidden;
  }

  svg {
    width: 80%;
  }