Liquid Metal - Paper Shaders

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:

Detects shape edges using Poisson equation
Creates distance gradient from edges
Optimizes for performance (512×512 working size)
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

Documentation Index

​Features

​Basic Usage

​Parameters

​Visual Parameters

​Sizing Parameters

​Animation Parameters

​Presets

​Examples

​Classic Metal

​Black and White

​Rainbow Stripes

​Full Screen Background

​Image Preprocessing

​React (Automatic)

​Vanilla JavaScript (Manual)

​What Preprocessing Does

​Technical Details

​Shader Uniforms (Vanilla JS)

​Shape Types

​Animation

​Chromatic Aberration

​Performance Notes

Features

Basic Usage

Parameters

Visual Parameters

Sizing Parameters

Animation Parameters

Presets

Examples

Classic Metal

Black and White

Rainbow Stripes

Full Screen Background

Image Preprocessing

React (Automatic)

Vanilla JavaScript (Manual)

What Preprocessing Does

Technical Details

Shader Uniforms (Vanilla JS)

Shape Types

Animation

Chromatic Aberration

Performance Notes