GradientMap

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

Props

Default:rainbow

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

palette

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

colorLowstring

Default:#1a0b2e

Color for the darkest tones

colorLow

stringDefault: #1a0b2e

Color for the darkest tones

colorMidstring

Default:#e94560

Color for the midtones

colorMid

stringDefault: #e94560

Color for the midtones

colorHighstring

Default:#f9ed69

Color for the brightest tones

colorHigh

stringDefault: #f9ed69

Color for the brightest tones

speednumber

Default:0.15

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

speed

numberDefault: 0.15

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

contrastnumber

Default:1

Steepness of the luminance-to-gradient mapping

contrast

numberDefault: 1

Steepness of the luminance-to-gradient mapping

blackPointnumber

Default:0

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

blackPoint

numberDefault: 0

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

whitePointnumber

Default:1

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

whitePoint

numberDefault: 1

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

strengthnumber

Default:1

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

strength

numberDefault: 1

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

colorSpace"linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch"

Default:oklch

Color space for interpolating custom colors

colorSpace

Color space for interpolating custom colors

Usage

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

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

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

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

import { createShader } from 'shaders/js'

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

Goo

Grayscale