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

  • origin

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

    Type
    string
    Default
    center

  • center

    Center position of the metal shape

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

  • scale

    Scale of the metal shape (1 = default size)

    Type
    number
    Default
    1

  • rotation

    Rotation of the metal shape in degrees

    Type
    number
    Default
    0

  • lightColor

    The bright tone of the chrome highlights

    Type
    string
    Default
    #eef0f6

  • darkColor

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

    Type
    string
    Default
    #141414

  • turbulence

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

    Type
    number
    Default
    1

  • ripple

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

    Type
    number
    Default
    4

  • warp

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

    Type
    number
    Default
    1.5

  • speed

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

    Type
    number
    Default
    0.5

  • environment

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

    Type
    number
    Default
    1.5

  • envRotation

    Rotates the reflected studio — spins where the bright reflections fall

    Type
    number
    Default
    0

  • sharpness

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

    Type
    number
    Default
    0.6

  • dispersion

    Prismatic color fringing along the reflection edges

    Type
    number
    Default
    0.25

  • lightAngle

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

    Type
    number
    Default
    265

  • bevelWidth

    Width of the edge bevel, relative to the shape — thin for machined jewellery edges, wide for soft pillowed metal

    Type
    number
    Default
    0.05

  • bevelShape

    Bevel profile — 0 = one smooth round fillet, 1 = machined: a steep outer fillet, a chamfer plateau and an inner knee, each catching its own line of light

    Type
    number
    Default
    0

  • edgeSoftness

    Softness of the shape boundary edge

    Type
    number
    Default
    0.05

  • shape

    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.

    Type
    ShapeConfig
    Default
    sphere3D

  • shapeSdfUrl

    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.

    Type
    string
    Default
    ""

Usage

<Shader>
  <LiquidMetal />
</Shader>