FlowingGradient

Liquid silk gradient with organic flowing color bands

Props

colorAstring

Default:#0a0015

Deep background color

colorA

stringDefault: #0a0015

Deep background color

colorBstring

Default:#6b17e6

Primary accent color

colorB

stringDefault: #6b17e6

Primary accent color

colorCstring

Default:#ff4d6a

Secondary accent color

colorC

stringDefault: #ff4d6a

Secondary accent color

colorDstring

Default:#ff6b35

Tertiary accent color

colorD

stringDefault: #ff6b35

Tertiary accent color

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

Default:oklch

Color space for color interpolation

colorSpace

Color space for color interpolation

speednumber

Default:1

Animation speed

speed

numberDefault: 1

Animation speed

distortionnumber

Default:0.5

Organic distortion intensity

distortion

numberDefault: 0.5

Organic distortion intensity

seednumber

Default:0

Random seed for variation

seed

numberDefault: 0

Random seed for variation

Usage

<Shader>
  <FlowingGradient />
</Shader>

<Shader>
  <FlowingGradient />
</Shader>

<Shader>
  <FlowingGradient />
</Shader>

<Shader>
  <FlowingGradient />
</Shader>

import { createShader } from 'shaders/js'

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

Flower

Form3D

Documentation

FlowingGradient

Props

Usage