Liquid fill text hover effect animation | HTML, CSS & JavaScript

* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

body {
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background: radial-gradient(circle at center, #1a1a2e 0%, #0f0f1a 100%);
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        overflow: hidden;
    }

/* Container for 3D perspective */
    .perspective-container {
        perspective: 1000px;
        padding: 50px;
        animation: float 6s ease-in-out infinite; /* Gentle floating */
    }

.liquid-text {
        position: relative;
        font-size: clamp(80px, 15vw, 220px);
        font-weight: 900;
        letter-spacing: 10px;
        text-transform: uppercase;
        color: transparent;
        -webkit-text-stroke: 2px rgba(255, 255, 255, 0.15);
        cursor: pointer;
        
        /* 
         * Two SVG waves used as backgrounds. 
         * This ensures the liquid perfectly clips INSIDE the letters.
         */
        background-image: 
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M0,200 Q250,0 500,200 T1000,200 L1000,1000 L0,1000 Z' fill='%2300d9ff' opacity='0.5'/%3E%3C/svg%3E"),
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M0,200 Q250,400 500,200 T1000,200 L1000,1000 L0,1000 Z' fill='%2300a8cc' opacity='0.85'/%3E%3C/svg%3E");
        
        background-repeat: repeat-x, repeat-x;
        background-size: 400px 400px, 400px 400px;
        
        /* Clip background strictly to the text */
        -webkit-background-clip: text;
        background-clip: text;
        
        /* Pushes the waves entirely below the text initially */
        background-position-y: 400px, 400px;
        
        /* Smooth transitions for filling up and glowing */
        transition: 
            background-position-y 1.2s cubic-bezier(0.4, 0, 0.2, 1),
            -webkit-text-stroke 0.8s ease,
            text-shadow 0.8s ease,
            transform 0.1s ease-out; 
            
        animation: wave-flow 3s linear infinite;
        transform-style: preserve-3d;
    }

.perspective-container:hover .liquid-text {
        background-position-y: 0px, 0px;
        -webkit-text-stroke: 2px rgba(0, 217, 255, 0.8);
        text-shadow: 
            0 0 15px rgba(0, 217, 255, 0.3), 
            0 0 35px rgba(0, 217, 255, 0.2);
    }
    @keyframes wave-flow {
        0% {
            background-position-x: 0px, 0px;
        }
        100% {
            background-position-x: 400px, -400px; 
        }
    }

/* Gentle up and down float */
    @keyframes float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-15px); }
    }

- Liquid fill text hover effect animation

Live Preview