JSFiddle - React, Tailwind, and code Playground

by Joshua Dwire

HTML

<iframe width="1280" height="715" frameborder="0" allowfullscreen="" src="https://player.vimeo.com/video/219282264?autoplay=1&amp;loop=1&amp;color=315f0d&amp;title=0&amp;byline=0&amp;portrait=0"></iframe>
<br> Please proceed to the check-in window if your number is
<span id="container">96<span id="bignumber">96</span></span>
or below.

CSS

#bignumber {
  position: absolute;
  left: 0;
  animation-duration: 3s;
  animation-name: grow;
  animation-delay: 5s;
  transform-origin: bottom;
  animation-iteration-count: 3;
  text-shadow: 0 0 1px #000, 0 0 2px #000;
}

#container {
  position: relative;
  font-size: 150%;
}

@keyframes grow {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(10);
    opacity: 0.8;
  }
  100% {
    transform: scale(10);
    opacity: 0;
  }
}

body {
  background: #000;
  color: #fff;
  font-size: 30px;
}

JavaScript

var done = false;
window.speechSynthesis.onvoiceschanged = function() {
  setTimeout(function() {
    if (done) return;
    done = true;
    var msg = new SpeechSynthesisUtterance('Now Serving Number 96');

    msg.voice = speechSynthesis.getVoices().filter(function(voice) {
      return voice.name == 'Google UK English Female';
    })[0];
    console.log(msg.voice);
    console.log(speechSynthesis.getVoices());
    window.speechSynthesis.speak(msg)
  }, 5000)
}