JSFiddle - React, Tailwind, and code Playground
CSS
#binaryWrapper {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
word-wrap: break-word;
z-index: -1;
background-color: #000000;
}
.binaryDigit {
color: #222222;
transition: color 1s ease-in;
}
.binaryDigitColored {
color:lightgreen;
transition: color 1s ease-out;
}
JavaScript
document.write("<div id='binaryWrapper'>");
for (var i = 0; i < 25000; i++) {
var digit = Math.round(Math.random());
if (Math.random() > 0.03) {
document.write("<span class='digit binaryDigit'>" + digit + "</span>");
} else {
document.write("<span class='digit binaryDigitColored'>" + digit + "</span>");
}
}
document.write("</div>");
var elements = document.getElementsByClassName("binaryDigitColored");
var staticElements = [];
for (var i = 0; i < elements.length; i++) {
staticElements.push(elements[i]);
}
setInterval(function() {
for (var i = 0; i < staticElements.length; i++) {
if (Math.round(Math.random()) > 0.02) {
staticElements[i].setAttribute("class", "binaryDigit");
} else {
var index = Math.round(Math.random() * (staticElements.length - 1));
staticElements[index].removeAttribute("class", "binaryDigit");
staticElements[index].setAttribute("class", "binaryDigitColored");
}
}
}, 500);