MeshGradient

Flowing mesh gradient of soft drifting color swaths whose seams wrap through the palette

Props

  • colorA

    First gradient color (two-color fallback when stops are cleared)

    Type
    string
    Default
    #1a0533

  • colorB

    Second gradient color (two-color fallback when stops are cleared)

    Type
    string
    Default
    #ffdf8e

  • stops

    Multi-stop gradient colors (overrides Color A / Color B when set)

    Type
    object
    Default
    [{"color":"#1a0533","position":0},{"color":"#6d2fd1","position":0.26},{"color":"#e04b9e","position":0.52},{"color":"#ff8c42","position":0.76},{"color":"#ffdf8e","position":1}]

  • colorSpace

    Color space for color interpolation

    Type
    "linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch"
    Default
    oklab

  • count

    Number of color points scattered across the canvas

    Type
    number
    Default
    5

  • smoothness

    How smoothly the color points blend into each other

    Type
    number
    Default
    2

  • variation

    Varies edge softness across the canvas — some color boundaries crisp, others diffuse

    Type
    number
    Default
    0.35

  • swirl

    Vortex rotation that spirals the field around the frame centre — negative values spin the other way

    Type
    number
    Default
    0.3

  • drift

    How far the color points wander from their home positions

    Type
    number
    Default
    0.5

  • wrapping

    Wraps the palette back through itself where colors meet — banded seams where the field pinches, smooth elsewhere

    Type
    number
    Default
    0

  • speed

    Animation speed

    Type
    number
    Default
    1

  • seed

    Random seed for the point layout and palette assignment

    Type
    number
    Default
    0

Usage

<Shader>
  <MeshGradient />
</Shader>