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.
Installation
Usage
The component fills its parent container (
w-full h-full). Always wrap it in a sized container.Props
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.
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.
number
default:"0.3"
Animation speed multiplier applied to the time uniform driving the stripe pattern movement. Higher values animate faster.
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.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.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.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.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
High-dispersion, fast animation
Image liquification
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.