Skip to main content
Futuristic liquid metal material applied to uploaded logos or abstract shapes. Creates fluid motion with animated stripe patterns that distort along shape edges, perfect for sci-fi and modern aesthetics.

​
Features

  • Animated metallic stripe patterns
  • Chromatic aberration (RGB shift)
  • Edge-aware distortion
  • Multiple predefined shapes (when no image)
  • Customizable color tinting
  • Softness and blur controls
  • Image preprocessing for optimal results

​
Basic Usage

import { LiquidMetal } from '@paper-design/shaders-react';

function App() {
  return (
    <LiquidMetal
      image="/path/to/logo.png"
      colorBack="#AAAAAC"
      colorTint="#ffffff"
      repetition={2.0}
      shiftRed={0.3}
      shiftBlue={0.3}
      contour={0.4}
      softness={0.1}
      distortion={0.07}
      angle={70}
      speed={1}
    />
  );
}

​
Parameters

​
Visual Parameters

​
image
string | HTMLImageElement
default:"''"
Source image/logo to apply the liquid metal effect to. Leave empty to use predefined shapes. The image will be preprocessed automatically in React.
​
colorBack
string
default:"'#AAAAAC'"
Background color in hex, rgb, or rgba format
​
colorTint
string
default:"'#ffffff'"
Overlay color tint in hex, rgb, or rgba format (uses color burn blending)
​
repetition
number
default:"2.0"
Density of pattern stripes
​
shiftRed
number
default:"0.3"
Red channel chromatic aberration/dispersion
​
shiftBlue
number
default:"0.3"
Blue channel chromatic aberration/dispersion
​
contour
number
default:"0.4"
Strength of distortion on the shape edges
​
softness
number
default:"0.1"
Color transition sharpness (0 = hard edge, 1 = smooth gradient)
​
distortion
number
default:"0.07"
Noise distortion over the stripe pattern
​
angle
number
default:"70"
Direction of pattern animation in degrees
​
shape
'none' | 'circle' | 'daisy' | 'diamond' | 'metaballs'
default:"'diamond'"
Predefined shape when no image is provided:
  • none: Fill entire canvas
  • circle: Simple circle
  • daisy: Flower-like shape
  • diamond: Diamond/rhombus shape
  • metaballs: Animated organic blobs
​
suspendWhenProcessingImage
boolean
default:"false"
(React only) Suspends the component when the image is being processed. Useful with React Suspense.

​
Sizing Parameters

​
fit
'none' | 'contain' | 'cover'
default:"'contain'"
How to fit the shader into the canvas dimensions
​
scale
number
default:"0.6"
Overall zoom level of the graphics
​
rotation
number
default:"0"
Overall rotation angle in degrees
​
offsetX
number
default:"0"
Horizontal offset of the graphics center
​
offsetY
number
default:"0"
Vertical offset of the graphics center

​
Animation Parameters

​
speed
number
default:"1"
Animation speed multiplier
​
frame
number
default:"0"
Manual frame control for animation

​
Presets

The LiquidMetal shader comes with several built-in presets:
  • Default: Classic liquid metal with chromatic aberration
  • Noir: Black and white with high softness
  • Backdrop: Full-screen canvas fill effect
  • Stripes: High repetition with strong color shifts
import { LiquidMetal, liquidMetalPresets } from '@paper-design/shaders-react';

function App() {
  return <LiquidMetal {...liquidMetalPresets[0].params} image="/logo.png" />;
}

​
Examples

​
Classic Metal

<LiquidMetal
  image="/logo.png"
  colorBack="#AAAAAC"
  colorTint="#ffffff"
  repetition={2.0}
  shiftRed={0.3}
  shiftBlue={0.3}
  contour={0.4}
  softness={0.1}
  distortion={0.07}
  angle={70}
/>

​
Black and White

<LiquidMetal
  image="/logo.png"
  colorBack="#000000"
  colorTint="#606060"
  repetition={1.5}
  shiftRed={0}
  shiftBlue={0}
  softness={0.45}
  contour={0}
  distortion={0}
  angle={90}
/>

​
Rainbow Stripes

<LiquidMetal
  image="/logo.png"
  colorBack="#000000"
  colorTint="#2c5d72"
  repetition={6}
  shiftRed={1}
  shiftBlue={-1}
  softness={0.8}
  contour={0.4}
  distortion={0.4}
  shape="circle"
/>

​
Full Screen Background

<LiquidMetal
  shape="none"
  scale={1.5}
  colorBack="#AAAAAC"
  colorTint="#ffffff"
  repetition={1.5}
  shiftRed={0.3}
  shiftBlue={0.3}
  softness={0.05}
  distortion={0.1}
  contour={0.4}
  angle={90}
  worldWidth={0}
  worldHeight={0}
/>

​
Image Preprocessing

​
React (Automatic)

In React, image preprocessing happens automatically: 
<LiquidMetal image="/logo.png" suspendWhenProcessingImage={true} />
Set suspendWhenProcessingImage to true to use React Suspense during processing.

​
Vanilla JavaScript (Manual)

For vanilla JavaScript, you must preprocess images manually: 
import { toProcessedLiquidMetal } from '@paper-design/shaders';

const result = await toProcessedLiquidMetal('/logo.png');
const processedUrl = URL.createObjectURL(result.pngBlob);

// Use processedUrl as u_image uniform

​
What Preprocessing Does

The preprocessing function:
  1. Detects shape edges using Poisson equation
  2. Creates distance gradient from edges
  3. Optimizes for performance (512×512 working size)
  4. Stores gradient in red channel, alpha in green channel
This allows the shader to create edge-aware distortions efficiently.

​
Technical Details

​
Shader Uniforms (Vanilla JS)

When using the vanilla JavaScript API: 
import { LiquidMetalShapes } from '@paper-design/shaders';

{
  u_image: processedImageUrl, // Must be preprocessed if provided
  u_isImage: true, // Set to false when using predefined shapes
  u_shape: LiquidMetalShapes.diamond, // or 3
  u_colorBack: [r, g, b, a],
  u_colorTint: [r, g, b, a],
  u_repetition: 2.0,
  u_shiftRed: 0.3,
  u_shiftBlue: 0.3,
  u_contour: 0.4,
  u_softness: 0.1,
  u_distortion: 0.07,
  u_angle: 70,
}

​
Shape Types

  • none (0): Fill entire canvas
  • circle (1): Simple circle
  • daisy (2): Flower pattern (animated)
  • diamond (3): Rotated diamond
  • metaballs (4): Animated organic blobs

​
Animation

The shader animates:
  • Flowing stripe patterns
  • Metaballs movement (when using metaballs shape)
  • Daisy rotation (when using daisy shape)
  • Edge distortions

​
Chromatic Aberration

The shiftRed and shiftBlue parameters create:
  • RGB channel separation
  • Rainbow edge effects
  • Prism-like color dispersion
  • More visible at shape edges and with higher contour

​
Performance Notes

  • Animated shader with continuous rendering
  • Image preprocessing uses Poisson solver (~100-500ms)
  • Preprocessing optimized to 512×512 working resolution
  • Runtime performance is excellent after preprocessing
  • Predefined shapes have no preprocessing overhead
  • Best with logo/icon images rather than photos