Creates a stunning liquid metallic effect on background images using Three.js with advanced material shaders. Features realistic metallic reflections, surface displacement, and optional rain effects. The liquid surface responds to interactions with smooth ripples and distortions. Uses WebGL rendering with physically-based materials for photorealistic metal and liquid simulations. Perfect for luxury brands, tech products, or creating high-end visual experiences.

Liquid

Metallic liquid effect on background images.

Image

Background Image URL

URL of the background image to apply the liquid effect to. The image will be rendered with metallic liquid distortions. High contrast images work best.

Required

Material

Metalness 0.0-1.0

How metallic the liquid surface appears. Higher values create chrome-like reflections, lower values create more matte finishes.

Default: 0.75

Roughness 0.0-1.0

Surface roughness of the liquid. Lower values create smooth, mirror-like reflections. Higher values create diffused, softer surfaces.

Default: 0.25

Distortion

Displacement Scale 0-20

Intensity of surface displacement and ripple effects. Higher values create more dramatic waves and distortions in the liquid surface.

Default: 5

Effects

Rain on/off

Enable rain droplet effects on the liquid surface. Creates realistic water droplets that create ripples and distortions as they hit the surface.

Default: Off

Performance

This element uses Three.js with threejs-components library loaded from CDN. Implements physically-based rendering (PBR) with metalness and roughness workflows for realistic materials. Features real-time vertex displacement for liquid surface simulation with dynamic ripples and waves. Uses custom shaders for advanced visual effects and smooth surface interactions. Very resource intensive - limit to 1 instance per page. Not recommended for mobile devices or low-end hardware due to GPU requirements. Requires modern browser with WebGL support.