<html>
<head>
<style>
body {
background-color: black;
}
#word {
font-size: 80px;
font-family: sans-serif;
font-weight: bold;
width: 100%;
text-align: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>
</head>
<body>
<div id="word"></div>
<script type="text/javascript">
var colorWords = ["red", "orange", "yellow", "green", "blue", "purple", "white"];
var hypnoWords = ["sleep", "relax", "fall", "deeper", "trance"];
var colors = ["red", "orange", "yellow", "green", "blue", "purple", "white"];
var wordEl = document.getElementById("word");
function randomChoice(a) {
return a[Math.floor(Math.random()*a.length)];
}
var hypnoFrequency = 0;
var hypnoIncrements = 10;
function changeWord() {
var wordList = (Math.random()*hypnoIncrements < hypnoFrequency) ? hypnoWords : colorWords;
var newWord;
do {
newWord = randomChoice(wordList);
} while (newWord === wordEl.innerText);
var newColor;
do {
newColor = randomChoice(colors);
} while (newColor === wordEl.style.color);
wordEl.innerText = newWord;
wordEl.style.color = newColor;
}
setInterval(changeWord, 1000);
setInterval(function() { if (hypnoFrequency < hypnoIncrements) { hypnoFrequency++; } }, 5000);
</script>
</body>
</html>