DataMosh

Corrupted-codec motion smearing — macroblocks lock in place and drag their pixels across the frame in liquid trails, each recovering on its own clock, like a video stream that lost its keyframes

Props

intensity
How much of the image locks and smears — the fraction of corrupted macroblocks
Type
number
Default
0.7
blockSize
Macroblock size — the granularity of the corruption
Type
number
Default
48
drift
Motion vector strength — how fast corrupted areas drag their pixels away
Type
number
Default
0.35
churn
How often each block re-rolls its fate — low values let corrupted regions melt for a long time before recovering
Type
number
Default
0.4
blend
Blend between the live image and the moshed stream
Type
number
Default
1
speed
Simulation speed. 0 freezes the decay in place.
Type
number
Default
1
seed
Random seed for the corruption layout
Type
number
Default
0

Usage

<Shader>
  <DataMosh
    :intensity="0.7"
  >
    <Circle />
  </DataMosh>
</Shader>

<Shader>
  <DataMosh
    intensity={0.7}
  >
    <Circle />
  </DataMosh>
</Shader>

<Shader>
  <DataMosh
    intensity={0.7}
  >
    <Circle />
  </DataMosh>
</Shader>

<Shader>
  <DataMosh
    intensity={0.7}
  >
    <Circle />
  </DataMosh>
</Shader>

import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'DataMosh', props: { intensity: 0.7 }, children: [
      { type: 'Circle', props: {} }
    ]}
  ]
})