yLVvKwy

index.pug

.container

script.js

let posts = [
  "DIRECTED BY",
  "Jon Bullen",
  "",
  "",
  "PRODUCED BY",
  "Jon Bullen",
  "",
  "",
  "POWERED BY",
  "Coffee",
  "",
  "",
  "THANKS TO",
  "The Azure Usage Billing Group",
  "Digby and Mo",
  "",
  "",
  "",
  "The cake is a lie"
];

(() => {
  posts.map((p) => {
    document.querySelector('.container').innerHTML += `<div>${p}</div>`
  })
})()

style.css

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap');

body {
  background: limegreen;
  color: white;
  font-size: 3.5em;
  font-family: 'Montserrat', sans-serif;
}

div {
  text-align: center;
  padding-bottom: 50px;
}

.container {
  animation: scoot 40s linear infinite;
}

@keyframes scoot {
  from {
    transform: translateY(30%);
  }

  to {
    transform: translateY(-100%);
  }
}

ylvvkwy.markdown

yLVvKwy

A Pen by Sytone on CodePen.

License.