InkFlow

Drag to paint swirling ribbons of ink through a real fluid field — eddies keep evolving after you let go

Props

colorMode"rainbow" | "single" | "custom"

Default:rainbow

How the brush colour is chosen: an ever-cycling rainbow, a single fixed colour, or a custom three-colour cycle

colorMode

"rainbow" | "single" | "custom"Default: rainbow

How the brush colour is chosen: an ever-cycling rainbow, a single fixed colour, or a custom three-colour cycle

colorSpeednumber

Default:1

How quickly the brush cycles through the rainbow or the custom colours as you paint

colorSpeed

numberDefault: 1

How quickly the brush cycles through the rainbow or the custom colours as you paint

colorstring

Default:#ff2d7e

Brush colour used when Color Mode is Single

color

stringDefault: #ff2d7e

Brush colour used when Color Mode is Single

color1string

Default:#4338ff

First colour of the custom brush cycle

color1

stringDefault: #4338ff

First colour of the custom brush cycle

color2string

Default:#ff2d7e

Second colour of the custom brush cycle

color2

stringDefault: #ff2d7e

Second colour of the custom brush cycle

color3string

Default:#19e3ff

Third colour of the custom brush cycle

color3

stringDefault: #19e3ff

Third colour of the custom brush cycle

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

Default:oklab

Colour space the custom colours blend through as the brush cycles between them

colorSpace

Colour space the custom colours blend through as the brush cycles between them

radiusnumber

Default:0.3

Size of the ink splat painted under the cursor

radius

numberDefault: 0.3

Size of the ink splat painted under the cursor

forcenumber

Default:1

How hard the cursor's motion pushes the fluid — higher throws faster, more violent jets and curls

force

numberDefault: 1

How hard the cursor's motion pushes the fluid — higher throws faster, more violent jets and curls

curlnumber

Default:0

Vorticity confinement — swirl energy that spins the ink into persistent eddies and curls

curl

numberDefault: 0

Vorticity confinement — swirl energy that spins the ink into persistent eddies and curls

decaynumber

Default:0.5

How fast the ink fades away — low values leave long, lingering trails

decay

numberDefault: 0.5

How fast the ink fades away — low values leave long, lingering trails

momentumnumber

Default:0.6

How long the fluid keeps flowing after a stroke — high momentum lets the motion carry on and on

momentum

numberDefault: 0.6

How long the fluid keeps flowing after a stroke — high momentum lets the motion carry on and on

Usage

<Shader>
  <InkFlow
    color="#ff2d7e"
    :radius="0.3"
  />
</Shader>

<Shader>
  <InkFlow
    color="#ff2d7e"
    radius={0.3}
  />
</Shader>

<Shader>
  <InkFlow
    color="#ff2d7e"
    radius={0.3}
  />
</Shader>

<Shader>
  <InkFlow
    color="#ff2d7e"
    radius={0.3}
  />
</Shader>

import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'InkFlow', props: { color: '#ff2d7e', radius: 0.3 } }
  ]
})

ImageTexture

Invert