fish-speech/fish_speech/webui/js/animate.js

function createGradioAnimation() {
    const params = new URLSearchParams(window.location.search);
    if (!params.has('__theme')) {
        params.set('__theme', 'light');
        window.location.search = params.toString();
    }

    var gradioApp = document.querySelector('gradio-app');
    if (gradioApp) {

        document.documentElement.style.setProperty('--my-200', '#80eeee');
        document.documentElement.style.setProperty('--my-50', '#ecfdf5');

        // gradioApp.style.position = 'relative';
        // gradioApp.style.backgroundSize = '200% 200%';
        // gradioApp.style.animation = 'moveJellyBackground 10s ease infinite';
        // gradioApp.style.backgroundImage = 'radial-gradient(circle at 0% 50%, var(--my-200), var(--my-50) 50%)';
        // gradioApp.style.display = 'flex';
        // gradioApp.style.justifyContent = 'flex-start';
        // gradioApp.style.flexWrap = 'nowrap';
        // gradioApp.style.overflowX = 'auto';

        // for (let i = 0; i < 6; i++) {
        //     var quan = document.createElement('div');
        //     quan.className = 'quan';
        //     gradioApp.insertBefore(quan, gradioApp.firstChild);
        //     quan.id = 'quan' + i.toString();
        //     quan.style.left = 'calc(var(--water-width) * ' + i.toString() + ')';
        //     var quanContainer = document.querySelector('.quan');
        //     if (quanContainer) {
        //         var shui = document.createElement('div');
        //         shui.className = 'shui';
        //         quanContainer.insertBefore(shui, quanContainer.firstChild)
        //     }
        // }
    }

    var container = document.createElement('div');
    container.id = 'gradio-animation';
    container.style.fontSize = '2em';
    container.style.fontFamily = 'Maiandra GD, ui-monospace, monospace';
    container.style.fontWeight = 'bold';
    container.style.textAlign = 'center';
    container.style.marginBottom = '20px';

    var text = 'Welcome to Fish-Speech!';
    for (var i = 0; i < text.length; i++) {
        (function(i){
            setTimeout(function(){
                var letter = document.createElement('span');
                letter.style.opacity = '0';
                letter.style.transition = 'opacity 0.5s';
                letter.innerText = text[i];

                container.appendChild(letter);

                setTimeout(function() {
                    letter.style.opacity = '1';
                }, 50);
            }, i * 200);
        })(i);
    }

    var gradioContainer = document.querySelector('.gradio-container');
    gradioContainer.insertBefore(container, gradioContainer.firstChild);

    return 'Animation created';
}