LiquidMetal

Flowing liquid chrome — a molten reflective surface that wraps the shape, sweeping a procedural studio reflection across animated folds with crisp speculars and prismatic edges

Props

originstring

Default:center

Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.

origin

stringDefault: center

Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.

center{x: number, y: number}

Default:{"x":0.5,"y":0.5}

Center position of the metal shape

center

{x: number, y: number}Default: {"x":0.5,"y":0.5}

Center position of the metal shape

scalenumber

Default:1

Scale of the metal shape (1 = default size)

scale

numberDefault: 1

Scale of the metal shape (1 = default size)

rotationnumber

Default:0

Rotation of the metal shape in degrees

rotation

numberDefault: 0

Rotation of the metal shape in degrees

lightColorstring

Default:#eef0f6

The bright tone of the chrome highlights

lightColor

stringDefault: #eef0f6

The bright tone of the chrome highlights

darkColorstring

Default:#141414

The dark tone the reflection falls to in shadow — recolor for tinted metal (gold, steel, copper…)

darkColor

stringDefault: #141414

The dark tone the reflection falls to in shadow — recolor for tinted metal (gold, steel, copper…)

turbulencenumber

Default:1

How molten the surface is — the depth of the flowing folds that bend the reflection

turbulence

numberDefault: 1

How molten the surface is — the depth of the flowing folds that bend the reflection

ripplenumber

Default:4

Scale of the molten folds — higher = smaller, busier ripples

ripple

numberDefault: 4

Scale of the molten folds — higher = smaller, busier ripples

warpnumber

Default:1.5

Swirl of the flow — domain-warps the folds into liquid curls

warp

numberDefault: 1.5

Swirl of the flow — domain-warps the folds into liquid curls

speednumber

Default:0.5

Speed of the molten flow and the slowly drifting reflection. 0 pauses.

speed

numberDefault: 0.5

Speed of the molten flow and the slowly drifting reflection. 0 pauses.

environmentnumber

Default:1.5

Strength of the reflected studio lighting — the softboxes seen across the metal

environment

numberDefault: 1.5

Strength of the reflected studio lighting — the softboxes seen across the metal

envRotationnumber

Default:0

Rotates the whole reflected studio — spins where the bright reflections fall

envRotation

numberDefault: 0

Rotates the whole reflected studio — spins where the bright reflections fall

sharpnessnumber

Default:0.6

Tightness of the specular highlights — 1 = razor chrome glints, 0 = soft satin

sharpness

numberDefault: 0.6

Tightness of the specular highlights — 1 = razor chrome glints, 0 = soft satin

dispersionnumber

Default:0.25

Prismatic color fringing along the reflection edges

dispersion

numberDefault: 0.25

Prismatic color fringing along the reflection edges

lightAnglenumber

Default:265

Direction of the key light for the specular glints, in degrees

lightAngle

numberDefault: 265

Direction of the key light for the specular glints, in degrees

edgeSoftnessnumber

Default:0.05

Softness of the shape boundary edge

edgeSoftness

numberDefault: 0.05

Softness of the shape boundary edge

shapeShapeConfig

Default:circleSDF

Shape to render — choose from 11 built-in analytical shapes or supply a custom SDF. See the Shape Effects guide for all available shapes and their options.

shape

ShapeConfigDefault: circleSDF

Shape to render — choose from 11 built-in analytical shapes or supply a custom SDF. See the Shape Effects guide for all available shapes and their options.

shapeSdfUrlstring

Default:""

URL to a pre-generated SDF `.bin` file — when non-empty, activates SVG mode and triggers a shader recompile. See the Shape Effects guide for how to generate an SDF from an SVG.

shapeSdfUrl

stringDefault: ""

URL to a pre-generated SDF `.bin` file — when non-empty, activates SVG mode and triggers a shader recompile. See the Shape Effects guide for how to generate an SDF from an SVG.

Usage

<Shader>
  <LiquidMetal />
</Shader>

<Shader>
  <LiquidMetal />
</Shader>

<Shader>
  <LiquidMetal />
</Shader>

<Shader>
  <LiquidMetal />
</Shader>

import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'LiquidMetal', props: {} }
  ]
})

LinearGradient

Liquify