Skip to main content

​
Overview

LiquidMetal compiles custom GLSL fragment shaders on a WebGL2 canvas to produce a chromatic, metallic fluid animation. It processes your text or image through a Poisson-based edge detection pipeline, then drives a real-time animated stripe pattern with chromatic dispersion, noise-based liquification, and bulge distortion.
Requires WebGL2 support. Verify browser compatibility before deploying to production. All modern browsers (Chrome 56+, Firefox 51+, Safari 15+) support WebGL2.

​
Installation

npx rareui@latest add liquid-metal

​
Usage

import LiquidMetal from "@/components/rareui/LiquidMetal";

export default function Hero() {
  return (
    <div className="w-full h-[600px]">
      <LiquidMetal text="RareUI" />
    </div>
  );
}
The component fills its parent container (w-full h-full). Always wrap it in a sized container.

​
Props

​
text
string
default:"RareUI"
Text to render with the liquid metal effect. The text is rasterized into an SVG, converted to a grayscale edge map via Poisson solving, and uploaded as a WebGL texture.
​
imageSource
string
Optional URL of an image to liquefy instead of text. The image is fetched, processed through the same edge-detection pipeline as text, and used as the shader input texture.
​
speed
number
default:"0.3"
Animation speed multiplier applied to the time uniform driving the stripe pattern movement. Higher values animate faster.
​
dispersion
number
default:"0.005"
Chromatic aberration/refraction amount. Controls how much the red and blue channels separate from green, creating a prismatic fringe effect. Mapped to the u_refraction shader uniform.
​
edge
number
default:"0.5"
Edge sharpness of the shape mask. Higher values produce crisper, more defined edges; lower values create a softer bleed. Mapped to the u_edge shader uniform.
​
patternBlur
number
default:"0.005"
Blur amount for the metallic stripe pattern transitions. Increase for a softer, more diffuse metallic look. Mapped to the u_patternBlur shader uniform.
​
liquify
number
default:"0.08"
Intensity of the Simplex noise-based liquid distortion applied to the edges. Higher values make the shape boundary appear to flow and ripple. Mapped to the u_liquid shader uniform.
​
patternScale
number
default:"2"
Scale of the repeating metallic stripe cycle. Lower values produce narrower, more detailed stripes; higher values produce broader bands. Mapped to the u_patternScale shader uniform.

​
Examples

​
Basic text effect

<div className="w-full h-[600px]">
  <LiquidMetal text="Chrome" />
</div>

​
High-dispersion, fast animation

<div className="w-full h-[600px]">
  <LiquidMetal
    text="Metal"
    speed={0.8}
    dispersion={0.02}
    edge={0.3}
    patternScale={3}
  />
</div>

​
Image liquification

<div className="w-full h-[400px]">
  <LiquidMetal
    imageSource="/logo.png"
    speed={0.4}
    liquify={0.15}
    edge={0.45}
  />
</div>

​
Features

WebGL2 Shaders

Custom GLSL300 fragment shaders run entirely on the GPU, enabling smooth 60fps animation with no JavaScript per-frame work.

Poisson Edge Detection

Text and images are processed through a 300-iteration Poisson solver to generate a precise distance-field edge map for the shader.

Chromatic Dispersion

Separate displacement is applied to the red and blue color channels to create realistic chromatic aberration.

Simplex Noise Liquification

A GLSL Simplex noise function drives the u_liquid uniform, animating the boundary of shapes with organic, fluid motion.

Build docs developers (and LLMs) love

Get started for freeTalk to us