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

intensitynumber

Default:0.7

How much of the image locks and smears — the fraction of corrupted macroblocks

intensity

numberDefault: 0.7

How much of the image locks and smears — the fraction of corrupted macroblocks

blockSizenumber

Default:48

Macroblock size — the granularity of the corruption

blockSize

numberDefault: 48

Macroblock size — the granularity of the corruption

driftnumber

Default:0.35

Motion vector strength — how fast corrupted areas drag their pixels away

drift

numberDefault: 0.35

Motion vector strength — how fast corrupted areas drag their pixels away

churnnumber

Default:0.4

How often each block re-rolls its fate — low values let corrupted regions melt for a long time before recovering

churn

numberDefault: 0.4

How often each block re-rolls its fate — low values let corrupted regions melt for a long time before recovering

blendnumber

Default:1

Blend between the live image and the moshed stream

blend

numberDefault: 1

Blend between the live image and the moshed stream

speednumber

Default:1

Simulation speed. 0 freezes the decay in place.

speed

numberDefault: 1

Simulation speed. 0 freezes the decay in place.

seednumber

Default:0

Random seed for the corruption layout

seed

numberDefault: 0

Random seed for the corruption layout

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: {} }
    ]}
  ]
})

DOMTexture

DiamondGradient