JSFiddle - React, Tailwind, and code Playground

by dumptyd

HTML

<div class="app-container">
  <div class="pointer">
    <img src="https://img10.deviantart.net/8d1a/i/2017/061/0/d/bendy_by_dgaribalde-db0ydvv.png" alt="Bendy">
  </div>
  <div class="lyrics">
    <div class="line-container"></div>
  </div>
</div>
<div class="loading">Loading...</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Baloo+Da|Knewave');
body {
  background-color: #503D2F;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.app-container {
  position: relative;
  height: 100vh;
  width: 100vw;
  min-width: 500px;
}

.lyrics {
  font-family: 'Baloo Da', cursive;
  font-size: 2em;
  position: absolute;
  bottom: 20px;
  color: #888;
  text-transform: uppercase;
  text-align: center;
  width: 100%;
  text-shadow: 5px 3px 2px #000;
  height: 50px;
}

.lyrics span {
  margin: 0 5px;
}

.white {
  color: #fff;
}

.pointer > img {
  width: 40px;
}

.pointer {
  animation: swing .5s ease-in-out forwards infinite;
  display: inline-block;
  position: absolute;
  bottom: 60px;
}

.line-container {
  transition: .1s all ease-in-out;
}

.up {
  margin-top: 0; 
}
.down {
  margin-top: 100px;
}
.loading {
  position: absolute;
  height: 100%; width: 100%;
  display: flex; align-items: center;
  justify-content: center;
  font-size: 3em;
  background-color: #333;
  color: #bbb;
  top: 0;
  font-family: 'Baloo Da', cursive;
}

@keyframes swing {
  0%{transform: rotate(10deg);}
  50%{transform: rotate(-10deg)}
  100%{transform: rotate(10deg);}
}

JavaScript

let lyrics = [
'You joined the underground cabaret today',
'Oh hey there, tell me your name',
'You try to run and tell the world',
'But you\'re stranded in a darkened cave',
'Oh Henry we hate you the same',
'So listen up my friend',
'There\'s more that meets the eye',
'You power up the studio',
'And bring them to life',
'Now play the beat that trickles',
'Through the halls',
'Or else your life is nevermore',
'Don\'t worry chum',
'It\'s not the music that dies',
'Now listen up',
'Our life support machine',
'Was brought to life by remarkable hands',
'Forget about the hell we\'ve seen',
'The time has come to revive our band',
'So bang the drums to a rhythm',
'Captivating the beat',
'And press the keys on the piano',
'For the ritual please',
'The song\'s alive with the night',
'With your help we\'ll revive',
'The devil\'s advocate',
'Is staring right through your lies',
'You\'re just returning our old strings tonight',
'I hope you turn up the light now',
'Can I get an amen in here?',
'You see the magic of art',
'It would tear you apart if you knew',
'Can I get an amen in here?',
'This magic is fueled by your heart',
'But the dreams in his eyes were untrue He had bigger plans for the band',
'By demand',
'We came back to his darkened cell',
'You\'re going to break us out of this hell',
'We\'ve been stars since the rhythm days',
'But our instruments have all grown tired',
'And in the end our only dream was to dance',
'They took the dance away we got retired',
'But that was long ago',
'We have a new chance of face',
'We\'ve turned it up a couple notches with a brand new pace',
'You think that they all just erased us',
'Betrayed us, enslaved us',
'But the deed is done',
'And now we want to get out',
'Now listen up',
'Ain\'t it nice to be underground',
'With a good ol\' friend like me',
'So you notice that sign, we ain\'t lying',
'But sit down and take a seat',
'There\'s an exit for sure',
'But that\'s for shmucks',
'But a little bit of ink',
'And a couple of bucks',
'We...