MeshGradient

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

Props

colorAstring

Default:#1a0533

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

colorA

stringDefault: #1a0533

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

colorBstring

Default:#ffdf8e

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

colorB

stringDefault: #ffdf8e

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

stopsobject

Default:

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

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

stops

objectDefault:

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

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

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

Default:oklab

Color space for color interpolation

colorSpace

Color space for color interpolation

countnumber

Default:5

Number of color points scattered across the canvas

count

numberDefault: 5

Number of color points scattered across the canvas

smoothnessnumber

Default:2

How smoothly the color points blend into each other

smoothness

numberDefault: 2

How smoothly the color points blend into each other

variationnumber

Default:0.35

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

variation

numberDefault: 0.35

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

swirlnumber

Default:0.3

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

swirl

numberDefault: 0.3

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

driftnumber

Default:0.5

How far the color points wander from their home positions

drift

numberDefault: 0.5

How far the color points wander from their home positions

wrappingnumber

Default:0

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

wrapping

numberDefault: 0

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

speednumber

Default:1

Animation speed

speed

numberDefault: 1

Animation speed

seednumber

Default:0

Random seed for the point layout and palette assignment

seed

numberDefault: 0

Random seed for the point layout and palette assignment

Usage

<Shader>
  <MeshGradient />
</Shader>

<Shader>
  <MeshGradient />
</Shader>

<Shader>
  <MeshGradient />
</Shader>

<Shader>
  <MeshGradient />
</Shader>

import { createShader } from 'shaders/js'

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

Marble

Mirror