Revise paste trippyripple.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <title>Ripples on Grid</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
        #key-help {
            position: absolute;
            top: 10px;
            left: 10px;
            background-color: white;
            padding: 10px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.2);
            width: 300px;
        }
        #key-help footer {
            font-size: 12px;
            font-style: italic;
            margin-top: 10px;
        }
        #key-help ul {
            list-style: none;
            padding: 0;
        }
        #key-help li {
            margin-bottom: 5px;
        }
    </style>
</head>
<body>
<div id="key-help">
    <h2>Key Controls</h2>
    <ul>
        <li><strong>[ . ]</strong>   Increase Grid Resolution</li>
        <li><strong>[ , ]</strong>   Decrease Grid Resolution</li>
        <li><strong>[ ] ]</strong>   Increase Raindrop Frequency</li>
        <li><strong>[ [ ]</strong>   Decrease Raindrop Frequency</li>
        <li><strong>[ = ]</strong>   Increase Wave Frequency</li>
        <li><strong>[ - ]</strong>   Decrease Wave Frequency</li>
        <li><strong>[ / ]</strong>   Show/Hide Key Controls</li>
        <li><strong>[ ' ]</strong>   Increase Rotation Speed</li>
        <li><strong>[ ; ]</strong>   Decrease Rotation Speed</li>
        <li><strong>[ d ]</strong>   Reset to Defaults</li>
    </ul>
    <footer>Trippy Ripple by Peanutfiends 2025</footer>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
    let scene = new THREE.Scene();
    let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    let renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

// Create grid
    let gridResolution = 150; 
    let grid = new THREE.GridHelper(10, 10);
    grid.material.opacity = 0;
    grid.material.transparent = true;
    scene.add(grid);

// Create ripple effect
    let geometry = new THREE.PlaneGeometry(10, 10, gridResolution, gridResolution);
    let material = new THREE.MeshBasicMaterial({
        vertexColors: true,
        wireframe: true
    });
    let plane = new THREE.Mesh(geometry, material);
    scene.add(plane);

// Store initial positions and random phases
    let initialPositions = geometry.attributes.position.clone();
    let phases = [];
    let colors = [];
    for (let i = 0; i < geometry.attributes.position.count; i++) {
        phases.push(Math.random() * Math.PI * 2);
        colors.push(new THREE.Color());
    }
    geometry.setAttribute('color', new THREE.Float32BufferAttribute(new Float32Array(colors.length * 3), 3));

// Create water drops
    let waterDrops = [];
    let raindropInterval = 100; 
    let waveFrequency = 5; 
    let rotationSpeed = 0.001;
    let defaultRaindropInterval = raindropInterval;
    let defaultWaveFrequency = waveFrequency;
    let defaultRotationSpeed = rotationSpeed;
    function createWaterDrop() {
        let x = Math.random() * 10 - 5;
        let y = Math.random() * 10 - 5;
        let force = Math.random() * 0.1 + 0.05; 
        let drop = { x, y, time: 0, force };
        waterDrops.push(drop);
    }
    let intervalId = setInterval(createWaterDrop, raindropInterval);

camera.position.z = 1.675;

let time = 0;
    function animate() {
        requestAnimationFrame(animate);

// Ripple effect with random variance and height-based color
        for (let i = 0; i < geometry.attributes.position.count; i++) {
            let x = initialPositions.getX(i);
            let y = initialPositions.getY(i);
            let z = 0;
            for (let j = 0; j < waterDrops.length; j++) {
                let drop = waterDrops[j];
                let dx = x - drop.x;
                let dy = y - drop.y;
                let distance = Math.sqrt(dx * dx + dy * dy);
                z += Math.sin((distance - drop.time) * waveFrequency) * Math.exp(-distance / 0.5) * drop.force;
            }
            z += Math.sin((x + time) * 10 + phases[i]) * Math.sin((y + time) * 10 + phases[i]) * 0.05;
            geometry.attributes.position.setZ(i, z);

// Height-based color with cycling hue
            let height = z; 
            height = Math.max(-0.2, Math.min(0.2, height)); 
            height = (height + 0.2) / 0.4; 
            let hue = (time + i / geometry.attributes.position.count) % 1; 
            let color = new THREE.Color();
            color.setHSL(hue, 1 - height * 0.7, height * 0.5 + 0.3); 
            colors[i].copy(color);
            geometry.attributes.color.setXYZ(i, colors[i].r, colors[i].g, colors[i].b);
        }
        geometry.attributes.position.needsUpdate = true;
        geometry.attributes.color.needsUpdate = true;

// Update water drops
        for (let i = waterDrops.length - 1; i >= 0; i--) {
            let drop = waterDrops[i];
            drop.time += 0.05; 
            if (drop.time > 4) { 
                waterDrops.splice(i, 1);
            }
        }

// Twist, pull, and rotate effect
        plane.rotation.x = Math.sin(time) * 0.1;
        plane.rotation.y = Math.cos(time) * 0.1;
        plane.rotation.z += rotationSpeed;
        camera.position.z = 1.675 + Math.sin(time * 2) * 0.675;

time += 0.01;

renderer.render(scene, camera);
    }
    animate();

window.addEventListener('resize', () => {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    });

let keyHelp = document.getElementById('key-help');
    setTimeout(() => {
        keyHelp.style.display = 'none';
    }, 10000);