GradientMap

Maps source luminance through an animated color gradient (Photoshop-style gradient map)

Props

  • palette

    Built-in cosine palette, or Custom Colors to pick your own stops

    Type
    "rainbow" | "sunset" | "ocean" | "fire" | "pastel" | "neon" | "custom"
    Default
    rainbow

  • colorLow

    Color for the darkest tones

    Type
    string
    Default
    #1a0b2e

  • colorMid

    Color for the midtones

    Type
    string
    Default
    #e94560

  • colorHigh

    Color for the brightest tones

    Type
    string
    Default
    #f9ed69

  • speed

    Gradient animation speed (0 = static). The gradient cycles seamlessly.

    Type
    number
    Default
    0.15

  • contrast

    Steepness of the luminance-to-gradient mapping

    Type
    number
    Default
    1

  • blackPoint

    Input shadow clip — luminance at/below this maps to the start of the gradient

    Type
    number
    Default
    0

  • whitePoint

    Input highlight clip — luminance at/above this maps to the end of the gradient

    Type
    number
    Default
    1

  • strength

    Blend between the original image (0) and the gradient-mapped result (1)

    Type
    number
    Default
    1

  • colorSpace

    Color space for interpolating custom colors

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

Usage

<Shader>
  <GradientMap>
    <Circle />
  </GradientMap>
</Shader>