Shader Atlas
한국어
⌖ Interactive

Ink Flow

잉크 플로

Colorful ink spreads under a drag and keeps swirling after the pointer lifts.

Also known as: InkFlowfluid inkink simulation

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

React
// Renders only in browsers with WebGPU.
import { Shader, InkFlow } from 'shaders/react'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <InkFlow />
    </Shader>
  )
}
Vue
<!-- Renders only in browsers with WebGPU. -->
<script setup lang="ts">
import { Shader, InkFlow } from 'shaders/vue'
</script>

<template>
  <Shader style="width: 100%; height: 320px" :disable-telemetry="true">
    <InkFlow/>
  </Shader>
</template>
Svelte
<!-- Renders only in browsers with WebGPU. -->
<script>
  import { Shader, InkFlow } from 'shaders/svelte'
</script>

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <InkFlow />
</Shader>
Solid
// Renders only in browsers with WebGPU.
import { Shader, InkFlow } from 'shaders/solid'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <InkFlow />
    </Shader>
  )
}
JavaScript
// Renders only in browsers with WebGPU.
// expects <canvas id="canvas" style="width:100%;height:320px"></canvas> on the page
import { createShader } from 'shaders/js'

const shader = await createShader(document.getElementById("canvas"), {
  components: [
    {
      type: 'InkFlow',
    }
  ]
}, { disableTelemetry: true })

Props · InkFlow

Changes apply to the demo above and to the code tabs. Descriptions come from the library registry (MIT).

NameValueDefaultRange / optionsDescription
colorModeColor Moderainbowrainbow · single · customHow the brush color is chosen: an ever-cycling rainbow, a single fixed color, or a custom three-color cycle
colorSpeedColor Speed10 – 4 (step 0.05)How quickly the brush cycles through the rainbow or the custom colors as you paint
colorBrush Color#ff2d7e—Brush color used when Color Mode is Single
color1Color 1#4338ff—First color of the custom brush cycle
color2Color 2#ff2d7e—Second color of the custom brush cycle
color3Color 3#19e3ff—Third color of the custom brush cycle
colorSpaceColor Spaceoklablinear · oklch · oklab · hsl · hsv · lchcolor space the custom colors blend through as the brush cycles between them
radiusRadius0.30.1 – 5 (step 0.05)Size of the ink splat painted under the cursor
forceForce10 – 3 (step 0.05)How hard the cursor's motion pushes the fluid — higher throws faster, more violent jets and curls
curlSwirl00 – 60 (step 1)Vorticity confinement — swirl energy that spins the ink into persistent eddies and curls
decayDecay0.50.05 – 4 (step 0.05)How fast the ink fades away — low values leave long, lingering trails
momentumMomentum0.60 – 1 (step 0.01)How long the fluid keeps flowing after a stroke — high momentum lets the motion carry on and on

Every component also takes blendMode · opacity · visible · maskSource/maskType · boundingBox · id

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Smoke Flow연기 흐름

Moving the pointer emits smoke that swirls along its path and fades.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Chroma Flow크로마 플로

Liquid color follows the pointer and shifts with its direction.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Particle Flow파티클 플로

Small particles drift like dust, following cursor-stirred currents and eddies.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Reaction Diffusion반응-확산

Coral-like patterns grow across the layer and bloom where the pointer drags.

Dragging paints ribbons of ink that curl and keep flowing. Like a drop of dye spreading into thin tails in water, pointer movement draws color directly onto the screen.

`colorMode` chooses rainbow, single-color, or a three-color cycle. `radius` sets the ink dab size (default 0.3, range 0.1–5), `force` sets how strongly a drag pushes the flow (default 1, range 0–3), `curl` adds swirling motion (default 0, range 0–60), and `decay` controls how quickly ink fades (default 0.5, range 0.05–4).

This generator fills the screen and needs no input image. A dark, plain background makes the colors clear; because the ink keeps moving, avoid placing it behind long passages of text.

When to use

Use it for a user-painted hero background, a short interactive artwork, or a color-responsive empty state. Avoid it on reading screens where a moving background competes for attention.

Open as page ↗