<div class="wrapper">
  <p class="blip-text" data-src="filmTitles" data-flicker="50" data-hold="1000"></p>
  <p class="blip-text" data-src="aphorisms" data-flicker="10" data-hold="1200" data-noise="-.*°"></p>
  <p class="blip-text" data-src="loveWords" data-flicker="30" data-hold="1000" data-noise="❤*_°❤"></p>
</div>

body{
  color: whitesmoke;
  background:#BB2528;
  font-family: courier;
  font-size: 62.5%;
  overflow: hidden;
}
p{
  font-size: 1.8rem;
  font-weight: bold;
  left: 25%;
  position: absolute;
  top: 33%;
  transform: translateY(-50%);
  width: 50%;
  &:nth-of-type(1){
    top: 50%;
  }
  &:last-of-type{
    top: 66%;
  }
  @media (max-width: 600px){
    left: 10%;
    width: 80%;
  }
}

let aphorisms = ['That which yields','is not always weak.','If you want something done,','do it yourself!','Never trust a computer you can\'t throw out a window.'];

let filmTitles = ['Annihilation','Arrival','Gattaca','Ex Machina','The Martian'];

let loveWords = [];
loveWords.push('Love');

loveWords.push('Έρωτας');
loveWords.push('Aγάπη');
loveWords.push('Φιλία');
loveWords.push('Στοργή');

loveWords.push('愛');
loveWords.push('恋');

loveWords.push('حب');
loveWords.push('عشق');
loveWords.push('شغف');
loveWords.push('حنان');

loveWords.push('Cion');
loveWords.push('Searc');
loveWords.push('Cumann');
loveWords.push('Grá');

loveWords.push('स्नेह');
loveWords.push('काम');
loveWords.push('अनुरक्ति');
loveWords.push('रति');
loveWords.push('प्रिय');

loveWords.push('Querer');
loveWords.push('Amar');
loveWords.push('Encantar');

loveWords.push('அன்பு');
loveWords.push('காதல்');
loveWords.push('ஆசை');
loveWords.push('பாசம்');
loveWords.push('கைக்கிளை');

let data = {
  'aphorisms': aphorisms,
  'filmTitles': filmTitles,
  'loveWords': loveWords
}

function BlipText(el, copyArray, flickerSpeed = 50, holdDelay = 2000, noise = '-*.°'){
  this.contentArray = copyArray;
  this.contentCount = 0;
  this.charCount = 0;
  this.domElement = el;
  this.flickerSpeed = flickerSpeed;
  this.holdDelay = holdDelay;
  this.noise = noise.split('');
  this.noiseCount = 0;
  this.compose(this.contentArray[this.contentCount++]);
}
BlipText.prototype.compose = function(txt){
  this.noiseCount = 0;
  this.charCount = 0;
  this.flickerUp(txt);
}
BlipText.prototype.decompose = function(){
  this.noiseCount = 0;
  this.charCount = 0;
  this.flickerDown();
}
BlipText.prototype.flickerUp = function(txt){
  let t = txt.substr(0, this.charCount);
  this.domElement.textContent = t + this.noise[this.noiseCount++];
  if(this.noiseCount < this.noise.length){
    setTimeout( () => this.flickerUp(txt), this.flickerSpeed);
  }
  else if(this.charCount++ < txt.length-1) {
    this.noiseCount = 0;
    setTimeout( () => this.flickerUp(txt), this.flickerSpeed);
  }
  else{
    this.domElement.textContent = txt;
    setTimeout( () => this.decompose(), this.holdDelay);
  }
}
BlipText.prototype.flickerDown = function(){
  let t = this.domElement.textContent.slice(0, -1);
  this.domElement.textContent = t + this.noise[this.noiseCount++];
  if(this.noiseCount < this.noise.length){
    setTimeout( () => this.flickerDown(), this.flickerSpeed);
  }
  else if(t.length > 0) {
    this.noiseCount = 0;
    this.domElement.textContent = this.domElement.textContent.slice(0, -1);
    setTimeout( () => this.flickerDown(), this.flickerSpeed);
  }
  else{
    this.domElement.textContent = '';
    this.compose(this.contentArray[this.contentCount++]);
    if(this.contentCount >= this.contentArray.length){
      this.contentCount = 0;
    }
  }
}

let blipTargets = [... document.querySelectorAll('.blip-text')];
for(let i=0; i<blipTargets.length; i++){
  let dataSet = blipTargets[i].dataset;
  let blipper = new BlipText(blipTargets[i], data[dataSet.src], Number(dataSet.flicker), Number(dataSet.hold), dataSet.noise);
}