Liquid Background

Description:This code creates an interactive liquid-style 3D background using the Three.js Components library. The LiquidBackground function initializes a dynamic canvas that simulates fluid motion, producing an elegant and futuristic visual. The setup includes:

• A full-screen <canvas> element that fills the viewport.

• A background image texture (liquid.webp) applied to a 3D plane.

• Material properties adjusted for a metallic sheen (metalness = 0.75) and smooth surface reflections (roughness = 0.25).

• Controlled displacement for subtle fluid motion (displacementScale = 5).

• Optional rain effect turned off for a cleaner visual style.

Ideal for creating immersive web landing pages, hero sections, or portfolio backgrounds with a modern and fluid design aesthetic.