replaces text nodes with spans

wind letters

d = document.body;
r = n => ((1 - Math.random() * n)).toFixed(2);
mx = 100;
mxwh = 1000;
transfact = 2000;
rotfact = 10000;
anl = 1;
persp = 400;
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.moomoo { position:relative;top:0px; }';
document.getElementsByTagName('head')[0].appendChild(style);

function ri(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function rf(min, max) {
    return (Math.random() * (max - min + 1) + min).toString()
}
af = (x, f) => Array.from(x.childNodes, f);
arf = (x, f) => Array.from({
    length: x
}, f);
q = (l, ss, n = 1) => arf(l, x => r(n)).join(ss);
qcl = (...x) => console.log(q(...x))
tot = [];
tot2 = [];
tns = [];
ftextnodes = (x) => {
    x.nodeType == 3 ? doSwap(x) : 0;
    if (!(x.offsetHeight * x.offsetWidth)) return;
    if (tns.length > 4000) return;
    a = af(x);
    !a.length ? tot.push(x) : (x.offsetWidth < d.offsetWidth * 0.7 ? tot.push(x) : 0)
    a.length ? a.flatMap(ftextnodes) : 0;
};
doSwap = n => {
    if (!n.nodeValue.trim().length || !n.textContent.trim().length) {
        return;
    }
    // tns.push(n);
    // window.tn = n;
    words = n.nodeValue.trim().split(" ")
    if (words.length < 4) {

        var replacementNode = document.createElement('span');

        replacementNode.innerHTML = n.textContent

        n.parentNode.insertBefore(replacementNode, n);

        n.parentNode.removeChild(n);
        tot.push(replacementNode);
    } else {
        words.forEach(x => {
            var replacementNode = document.createElement('span');
            replacementNode.innerHTML = x + " ";
            n.parentNode.insertBefore(replacementNode, n);
            tot.push(replacementNode);
        })
        n.parentNode.removeChild(n);
    }
}
wow = x => {

    hasChildren = x.children && x.children.length;
    isBig = x.offsetHeight * x.offsetWidth > mxwh;

    if (hasChildren && isBig) return;
    h = (x.offsetHeight * x.offsetWidth) + 1;
    h = h / 100;
    xs = x.style;
    // if (h > 0.5 * d.offsetHeight) return;
    xs.zIndex = '10';
    xs.display = "inline-block";
    // xs.transformOrigin = "center";
    //    xs.transition = "transform " + anl + "s cubic-bezier(" + [rf(0, 1), rf(-5, -1), rf(0, 1), rf(1, 5)].join() + ")"; //0.5,-5, 0.34, 5
    xs.transition = "transform " + anl + "s ease-in";
    xs.transform = "perspective(" + persp + "px) translate3d(" +
        q(3, "px,", transfact / h) + "px) rotate3d(" + q(4, ",", rotfact / h) + "deg)";
    xs.transform = "perspective(" + persp + "px) translate3d(" + [ri(0, 1), ri(0, 1), ri(-400, 400)].join("px,") + "px) rotate3d(" + q(4, ",", 2 * rotfact / h) + "deg)";
    tot2.push(x);
    x.classList.add("moomoo")
    tot = tot.filter(function (item) {
        return item !== x;
    })
}
doMess = () => {
    setTimeout(II => {
        tot.forEach(x => {
            x.onmouseenter = x.ontouchstart = (bubu) => {
                wow(x);
            }
        });
        setInterval(x => {
            for (i = 0; i < mx; i++) {
                wow(tot[ri(0, tot.length - 1)])
            }
        }, 250)
    }, 30);
}
console.log(1);
ftextnodes(d);
tot = tot.filter(x => x.textContent.trim().length)
doMess()