ColorWheel

A directional gradient that smoothly cycles through rainbow colors or a custom set of three colors

Props

mode"rainbow" | "custom"

Default:rainbow

Rainbow cycles through the full spectrum; Custom loops through your three chosen colors

mode

"rainbow" | "custom"Default: rainbow

Rainbow cycles through the full spectrum; Custom loops through your three chosen colors

colorAstring

Default:#ff0000

First color in the cycle

colorA

stringDefault: #ff0000

First color in the cycle

colorBstring

Default:#00ff88

Second color in the cycle

colorB

stringDefault: #00ff88

Second color in the cycle

colorCstring

Default:#0066ff

Third color in the cycle

colorC

stringDefault: #0066ff

Third color in the cycle

scalenumber

Default:1

Number of color cycles across the viewport

scale

numberDefault: 1

Number of color cycles across the viewport

anglenumber

Default:0

Direction the gradient flows

angle

numberDefault: 0

Direction the gradient flows

speednumber

Default:0.05

Speed at which the gradient cycles

speed

numberDefault: 0.05

Speed at which the gradient cycles

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

Default:oklch

Color space for blending between custom colors

colorSpace

Color space for blending between custom colors

Usage

<Shader>
  <ColorWheel />
</Shader>

<Shader>
  <ColorWheel />
</Shader>

<Shader>
  <ColorWheel />
</Shader>

<Shader>
  <ColorWheel />
</Shader>

import { createShader } from 'shaders/js'

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

Circle

ConcentricSpin

Documentation

ColorWheel

Props

Usage