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>

    <p>
      Pursued by the Empire's sinister agents, Princess Leia races home aboard her
      starship, custodian of the stolen plan that can save her people and restore
      freedom to the galaxy....
    </p>
  </div>
</div>

:root {
    --perspective: 600px;
    --track-width: 100dvw;
    --track-height: 140dvh;
    --track-rotation: 45deg;
  }

  .text-wrapper {
    position: absolute;
    bottom: 0%;

    color: yellow;
    font-size: 2.1rem;

    text-align: justify;
    letter-spacing: 0;
    line-height: 1.3;

    animation: move 10s;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-iteration-count: infinite;

    translate: 0 100%;

    p {
      margin-block-start: 0;
    }

    p:last-of-type {
      margin-block-end: 0;
    }
  }

  .track {
    position: absolute;
    bottom: 0;

    width: var(--track-width);
    height: var(--track-height);

    rotate: x var(--track-rotation);
    transform-origin: center bottom;
  }

  @media only screen and (min-width: 640px) {
    .track {
      --track-height: 160dvh;
      --track-rotation: 50deg;
    }

    .text-wrapper {
      font-size: 3.4rem;
      letter-spacing: 0.1rem;
    }
  }

  @media only screen and (min-width: 768px) {
    .track {
      --track-height: 180dvh;
    }

    .text-wrapper {
      font-size: 4.1rem;
    }
  }

  @media only screen and (min-width: 1024px) {
    .track {
      --track-height: 200dvh;
    }

    .text-wrapper {
      font-size: 5.6rem;
    }
  }

  @media only screen and (min-width: 1280px) {
    .text-wrapper {
      font-size: 7.1rem;
    }
  }

  @media only screen and (min-width: 1600px) {
    .text-wrapper {
      font-size: 8.9rem;
    }
  }

  @media only screen and (min-width: 1900px) {
    .text-wrapper {
      font-size: 10.6rem;
    }
  }

  @keyframes move {
    to {
      translate: 0 calc(var(--track-height) * -1);
    }
  }

  * {
    box-sizing: border-box;
  }

  html,
  body {
    overflow: hidden;
  }

  body {
    position: relative;

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

    display: grid;
    justify-items: center;

    perspective: var(--perspective);

    background-color: black;
  }

  .track {
    position: absolute;
    bottom: 0;

    width: var(--track-width);
    height: var(--track-height);

    rotate: x var(--track-rotation);
    transform-origin: center bottom;

    border: 0.5rem dashed yellow;
  }