Liquid chrome
Create a React application using react-three-fiber and three.js that renders a full-screen, interactive liquid surface simulation. Core Simulation Logic: Implement a GPU-based 'Ping-Pong' FBO (Frame Buffer Object) simulation to solve the wave equation. Use a Simulation Shader that tracks height (Red channel) and velocity (Green channel). It should propagate waves using a neighbor-average (Laplacian) approach and apply viscosity damping. Mouse clicks or touch drag events should write to the simulation texture to create ripples. Rendering & Aesthetics: Use a Render Shader that calculates surface normals dynamically based on the simulation height map. Implement 11 distinct visual modes, switchable via Arrow Keys. The modes must include: 1. Dark Chrome: Cinematic metallic look with subtle film grain. 2. Holographic: Iridescent rainbow colors based on Fresnel angle with faint digital noise. 3. Molten Gold: High-contrast gold with sharp specular highlights. 4. Midnight Ocean: Deep blue/teal colors. 5. Vaporwave: Pink-to-cyan gradient, a retro grid reflection effect, heavy CRT static fuzz, and scanlines. 6. Radioactive Slime: Glowing toxic green. 7. Oil Slick: Dark surface with turbulent interference patterns and gritty texture. 8. Magma: Cracks of hot glowing lava cooling into dark rock. 9. Glacial: Icy white/blue with sharp refraction. 10. Deep Space: Dark nebula look with sparkling stars and high ISO sensor noise. 11. Thermal Burst: A specific grainy aesthetic featuring a deep blue background transitioning to electric blue, magma orange, and core white based on wave height, overlaid with heavy animated film grain. Technical Constraints: The simulation resolution should be around 512x512. Include a generic noise/grain function in the shader to apply retro 'fuzz' to specific modes (Vaporwave, Oil Slick, Deep Space, etc.). Ensure the canvas is full-screen and handles device pixel ratio correctly.