ChromaFlow

Interactive liquid flow effect that follows your cursor

Props

baseColor
Base liquid color
Type
string
Default
#0066ff
upColor
Color for upward movement
Type
string
Default
#00ff00
downColor
Color for downward movement
Type
string
Default
#ff0000
leftColor
Color for leftward movement
Type
string
Default
#0000ff
rightColor
Color for rightward movement
Type
string
Default
#ffff00
intensity
Strength of the liquid effect
Type
number
Default
1
radius
Radius of the liquid effect
Type
number
Default
3
momentum
How much momentum colors retain in their flow direction
Type
number
Default
30

Usage

<Shader>
  <ChromaFlow
    :intensity="1"
    :radius="3"
  />
</Shader>

<Shader>
  <ChromaFlow
    intensity={1}
    radius={3}
  />
</Shader>

<Shader>
  <ChromaFlow
    intensity={1}
    radius={3}
  />
</Shader>

<Shader>
  <ChromaFlow
    intensity={1}
    radius={3}
  />
</Shader>

import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'ChromaFlow', props: { intensity: 1, radius: 3 } }
  ]
})