JIT
Grid - Untitled
Log in
Claude Sonnet 4
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Liquid Matrix Rain</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } 
    body {
        overflow: hidden;
        background: #000;
        font-family: 'Courier New', monospace;
        height: 100vh;
        width: 100vw;
    }

    .matrix-container {
        position: relative;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, #000 0%, #001100 50%, #002200 100%);
    }

    .liquid-stream {
        position: absolute;
        width: 2px;
        opacity: 0;
        transform-origin: top;
        filter: blur(0.5px);
    }

    .liquid-drop {
        position: absolute;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: radial-gradient(circle, #00ff41 0%, #00cc33 50%, #008822 100%);
        box-shadow: 0 0 15px #00ff41, 0 0 25px #00ff41, 0 0 35px #00aa22;
        animation: ripple 0.8s ease-out forwards;
    }

    .chrome-trail {
        background: linear-gradient(180deg, 
            transparent 0%,
            rgba(192, 192, 192, 0.3) 10%,
            rgba(255, 255, 255, 0.8) 30%,
            rgba(0, 255, 65, 0.9) 50%,
            rgba(0, 255, 65, 1) 80%,
            rgba(0, 200, 50, 1) 100%);
        filter: blur(1px);
        box-shadow: 0 0 10px rgba(0, 255, 65, 0.5);
    }

    .mercury-trail {
        background: linear-gradient(180deg,
            transparent 0%,
            rgba(128, 128, 128, 0.4) 20%,
            rgba(0, 255, 65, 0.6) 40%,
            rgba(0, 255, 65, 0.8) 60%,
            rgba(0, 255, 65, 1) 100%);
        filter: blur(0.8px);
        box-shadow: 0 0 15px rgba(0, 255, 65, 0.7), inset 0 0 5px rgba(255, 255, 255, 0.3);
    }

    .viscous-trail {
        background: linear-gradient(180deg,
            transparent 0%,
            rgba(0, 255, 65, 0.2) 30%,
            rgba(0, 255, 65, 0.6) 60%,
            rgba(0, 255, 65, 0.9) 85%,
            rgba(0, 255, 65, 1) 100%);
        width: 4px;
        filter: blur(1.2px);
        border-radius: 2px;
        animation: viscous-drip 3s ease-in-out infinite;
    }

    @keyframes viscous-drip {
        0%, 100% { transform: scaleY(1) scaleX(1); }
        50% { transform: scaleY(1.2) scaleX(1.5); }
    }

    @keyframes ripple {
        0% {
            transform: scale(1);
            opacity: 1;
        }
        100% {
            transform: scale(8);
            opacity: 0;
        }
    }

    .glow-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(ellipse at center, 
            transparent 60%, 
            rgba(0, 255, 65, 0.1) 80%, 
            rgba(0, 255, 65, 0.2) 100%);
        pointer-events: none;
        mix-blend-mode: screen;
    }

    .distortion-field {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: 
            radial-gradient(circle at 20% 30%, rgba(0, 255, 65, 0.1) 0%, transparent 50%),
            radial-gradient(circle at 80% 70%, rgba(0, 255, 65, 0.1) 0%, transparent 50%),
            radial-gradient(circle at 50% 50%, rgba(0, 255, 65, 0.05) 0%, transparent 70%);
        filter: blur(2px);
        animation: distort 4s ease-in-out infinite alternate;
        pointer-events: none;
    }

    @keyframes distort {
        0% { filter: blur(2px) hue-rotate(0deg); }
        100% { filter: blur(3px) hue-rotate(10deg); }
    }

    .character {
        color: #00ff41;
        text-shadow: 0 0 5px #00ff41, 0 0 10px #00ff41;
        font-size: 12px;
        line-height: 1;
        opacity: 0;
        position: absolute;
    }

    .splash-pool {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 20px;
        background: linear-gradient(180deg, 
            transparent 0%, 
            rgba(0, 255, 65, 0.3) 50%, 
            rgba(0, 255, 65, 0.6) 100%);
        filter: blur(2px);
        box-shadow: 0 -5px 15px rgba(0, 255, 65, 0.4);
    }
</style>
</head> <body> <div class="matrix-container"> <canvas id="liquidCanvas"></canvas> <div class="distortion-field"></div> <div class="glow-overlay"></div> <div class="splash-pool"></div> </div> 
<script>
    const canvas = document.getElementById('liquidCanvas');
    const ctx = canvas.getContext('2d');
    const container = document.querySelector('.matrix-container');

    function resizeCanvas() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    }
    resizeCanvas();
    window.addEventListener('resize', resizeCanvas);

    const streams = [];
    const drops = [];
    const characters = '01アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン';

    class LiquidStream {
        constructor(x) {
            this.x = x;
            this.y = -Math.random() * canvas.height;
            this.speed = Math.random() * 3 + 2;
            this.length = Math.random() * 100 + 50;
            this.opacity = Math.random() * 0.8 + 0.2;
            this.type = Math.random() < 0.3 ? 'chrome' : Math.random() < 0.6 ? 'mercury' : 'viscous';
            this.width = this.type === 'viscous' ? Math.random() * 4 + 2 : Math.random() * 2 + 1;
            this.chars = [];
            this.viscosity = Math.random() * 0.5 + 0.5;
            
            for (let i = 0; i < this.length / 15; i++) {
                this.chars.push({
                    char: characters[Math.floor(Math.random() * characters.length)],
                    offset: i * 15,
                    opacity: Math.random()
                });
            }
        }

        update() {
            this.y += this.speed;
            
            if (this.type === 'viscous') {
                this.speed *= this.viscosity;
                this.width += Math.sin(Date.now() * 0.01 + this.x * 0.1) * 0.1;
            }
            
            // Create splash when hitting bottom
            if (this.y > canvas.height - 20 && Math.random() < 0.3) {
                this.createSplash();
            }
            
            return this.y < canvas.height + this.length;
        }

        createSplash() {
            for (let i = 0; i < 3; i++) {
                drops.push(new SplashDrop(
                    this.x + (Math.random() - 0.5) * 20,
                    canvas.height - 10
                ));
            }
        }

        draw() {
            // Draw liquid trail
            const gradient = ctx.createLinearGradient(0, this.y - this.length, 0, this.y);
            
            if (this.type === 'chrome') {
                gradient.addColorStop(0, 'rgba(192, 192, 192, 0)');
                gradient.addColorStop(0.3, 'rgba(255, 255, 255, 0.8)');
                gradient.addColorStop(0.7, 'rgba(0, 255, 65, 0.9)');
                gradient.addColorStop(1, 'rgba(0, 255, 65, 1)');
            } else if (this.type === 'mercury') {
                gradient.addColorStop(0, 'rgba(128, 128, 128, 0)');
                gradient.addColorStop(0.4, 'rgba(0, 255, 65, 0.6)');
                gradient.addColorStop(1, 'rgba(0, 255, 65, 1)');
            } else {
                gradient.addColorStop(0, 'rgba(0, 255, 65, 0)');
                gradient.addColorStop(0.6, 'rgba(0, 255, 65, 0.6)');
                gradient.addColorStop(1, 'rgba(0, 255, 65, 1)');
            }

            ctx.save();
            ctx.globalAlpha = this.opacity;
            ctx.fillStyle = gradient;
            ctx.filter = 'blur(1px)';
            
            if (this.type === 'viscous') {
                // Draw viscous drip shape
                ctx.beginPath();
                ctx.ellipse(this.x, this.y - this.length / 2, this.width / 2, this.length / 2, 0, 0, Math.PI * 2);
                ctx.fill();
            } else {
                ctx.fillRect(this.x - this.width / 2, this.y - this.length, this.width, this.length);
            }
            
            ctx.restore();

            // Draw characters
            ctx.save();
            ctx.font = '12px Courier New';
            ctx.textAlign = 'center';
            
            this.chars.forEach((charObj, i) => {
                const charY = this.y - charObj.offset;
                if (charY > 0 && charY < canvas.height) {
                    ctx.globalAlpha = charObj.opacity * this.opacity;
                    ctx.fillStyle = '#00ff41';
                    ctx.shadowColor = '#00ff41';
                    ctx.shadowBlur = 5;
                    ctx.fillText(charObj.char, this.x, charY);
                }
            });
            
            ctx.restore();
        }
    }

    class SplashDrop {
        constructor(x, y) {
            this.x = x;
            this.y = y;
            this.scale = 0;
            this.maxScale = Math.random() * 6 + 2;
            this.opacity = 1;
            this.life = 0;
            this.maxLife = 60;
        }

        update() {
            this.life++;
            this.scale = (this.life / this.maxLife) * this.maxScale;
            this.opacity = 1 - (this.life / this.maxLife);
            return this.life < this.maxLife;
        }

        draw() {
            ctx.save();
            ctx.globalAlpha = this.opacity;
            ctx.strokeStyle = '#00ff41';
            ctx.lineWidth = 2;
            ctx.shadowColor = '#00ff41';
            ctx.shadowBlur = 10;
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.scale, 0, Math.PI * 2);
            ctx.stroke();
            ctx.restore();
        }
    }

    function animate() {
        ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // Create new streams
        if (Math.random() < 0.3) {
            streams.push(new LiquidStream(Math.random() * canvas.width));
        }

        // Update and draw streams
        for (let i = streams.length - 1; i >= 0; i--) {
            if (!streams[i].update()) {
                streams.splice(i, 1);
            } else {
                streams[i].draw();
            }
        }

        // Update and draw drops
        for (let i = drops.length - 1; i >= 0; i--) {
            if (!drops[i].update()) {
                drops.splice(i, 1);
            } else {
                drops[i].draw();
            }
        }

        requestAnimationFrame(animate);
    }

    animate();
</script>
</body> </html>*
Updated files
v1
@andronov04
Matrix digital rain reimagined as viscous liquid chrome and glowing green mercury. The data streams are melting and dripping like heavy syrup, splashing upon contact with the bottom frame. Ripples of neon code distorting the reality behind it. Fluid simulation, metallic texture, reflective surfaces, ray tracing, hypnotic flow, cinematic lighting.