VHS

Analog VHS tape with intermittent tape damage, chroma bleed, and per-scanline noise

Props

wobblenumber

Default:1

Overall amount of tape damage — waves, creases, and head-switching noise. Bursts on and off organically over time.

wobble

numberDefault: 1

Overall amount of tape damage — waves, creases, and head-switching noise. Bursts on and off organically over time.

scanlineNoisenumber

Default:0.6

Per-scanline fine chroma/luma jitter. Adds the classic horizontal-streak detail.

scanlineNoise

numberDefault: 0.6

Per-scanline fine chroma/luma jitter. Adds the classic horizontal-streak detail.

smearnumber

Default:0.2

Horizontal chroma smear (color bleed) amount. Positive trails colour to the right (classic VHS), negative trails it to the left.

smear

numberDefault: 0.2

Horizontal chroma smear (color bleed) amount. Positive trails colour to the right (classic VHS), negative trails it to the left.

speednumber

Default:1

Animation speed of the tape effects.

speed

numberDefault: 1

Animation speed of the tape effects.

Usage

<Shader>
  <VHS>
    <Circle />
  </VHS>
</Shader>

<Shader>
  <VHS>
    <Circle />
  </VHS>
</Shader>

<Shader>
  <VHS>
    <Circle />
  </VHS>
</Shader>

<Shader>
  <VHS>
    <Circle />
  </VHS>
</Shader>

import { createShader } from 'shaders/js'

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

Twirl

Vesica

Documentation

VHS

Props

Usage