JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="index.js" defer></script>
    <link rel="stylesheet" href="index.css" />
    <title>Document</title>
  </head>
  <body>
    <video autoplay muted loop id="myVideo">
      <source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4" />
    </video>
    <svg
      id="Layer_1"
      data-name="Layer 1"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 314.41 79.8"
    >
      <defs>
        <style>
          .cls-1 {
            font-size: 76px;
            font-family: BebasNeue-Regular, Bebas Neue;
          }
          .cls-2 {
            letter-spacing: 0em;
          }
          .cls-3 {
            letter-spacing: 0em;
          }
        </style>
      </defs>
      <text class="cls-1" transform="translate(0 64.6)">
        Hel
        <tspan class="cls-2" x="85.65" y="0">l</tspan>
        <tspan class="cls-3" x="111.49" y="0">o World</tspan>
      </text>
    </svg>
  </body>
</html>

CSS

#myVideo {
  position: absolute;
  inset: 0;
  z-index: -1;
  min-height: 100vh;
  min-width: 100vw;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%) brightness(50%);
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: black;
  position: relative;
}
html,
body {
  overflow: hidden;
  margin: 0;
}
svg {
  stroke-dasharray: 1800;
  fill: #fff;
  stroke: #fff;
  opacity: 10;
  animation: reveal 10s cubic-bezier(0, 0.23, 1, 0.1);
  animation-delay: 0;
  max-width: min(calc(100vw - 10rem), 40rem);
}
@keyframes reveal {
  0% {
    fill: none;
    stroke-dashoffset: 1800;
  }
  80% {
    fill: rgba(255, 255, 255, 0);
  }
  100% {
    fill: rgba(255, 255, 255, 1);
    stroke-dashoffset: 0;
  }
}

JavaScript

let video = document.getElementById("myVideo");
video.playbackRate = 3;