Liquid Background
Dynamic Liquid 3D Background Effect Using Three.js
Made with Workshop
Build your own component with AI
About this Component
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.
