Liquid Surface Background

An interactive liquid surface with metallic reflections, ripples, and iridescent highlights.

An animated liquid surface with metallic reflections, iridescent highlights, and pointer-driven ripples.

Installation

Add the liquid-surface-background component from Hangry UI to this project.

Use the project's package manager to run:
shadcn@latest add https://ui.razeev.com/r/liquid-surface-background.json

Integrate the component with the existing layout and styling.
Keep its interactions and reduced-motion support intact.

How to use

1import { LiquidSurfaceBackground } from "@/components/hangry-ui/shader/liquid-surface-background";
2
3<LiquidSurfaceBackground className="grid place-items-center p-12">
4  <h2 className="typography-section-title text-white">Liquid motion.</h2>
5</LiquidSurfaceBackground>;

Props

Prop	Type	Default	Description
`speed`	`number`	`0.35`	Ambient animation speed. Set to 0 to freeze the surface.
`distortion`	`number`	`0.8`	Pointer ripple distortion, clamped to 0–2.
`intensity`	`number`	`1`	Surface brightness, clamped to 0–2.
`interactive`	`boolean`	`true`	Enable pointer-driven ripples and highlights.

Dependencies

vgpu