HTML CSS

<div class="track">
  <div class="text-wrapper">
    <p>
      It is a period of civil war. Rebel spaceships, striking from a hidden base,
      have won their first victory against the evil Galactic Empire.
    </p>
    <p>
      During the battle, rebel spies managed to steal secret plans to the Empire's
      ultimate weapon, the DEATH STAR, an armored space station with enough power
      to destroy an entire planet.
    </p>
  </div>
</div>

.track {
    mask-image: linear-gradient(to top, black 80%, transparent);
    border: 0.25rem solid red;
  }

  .text-wrapper {
    max-width: 20ch;
    animation: move 10s infinite;

    color: yellow;
    font-family: Arial, Helvetica, sans-serif;
  }

  @keyframes move {
    to {
      translate: 0 -90%;
    }
  }

  * {
    box-sizing: border-box;
  }

  body {
    width: 100dvw;
    height: 100dvh;
    margin: 0;

    display: grid;
    place-items: center;

    background: black;
  }