Skip to content

Liquid Background

Liquid Background preview image 1

Summary

Description: This code creates an interactive liquid-style 3D background using the Three.js Components library.

Description

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.

Rank history How rankings work →

1500110001108228/149/49/2610/1811/9
  • All · #10543

Details

More like this