CRTScreen

Retro CRT monitor simulation with scanlines

Props

pixelSizenumber

Default:128

Size of individual TV pixels (lower = more pixels)

pixelSize

numberDefault: 128

Size of individual TV pixels (lower = more pixels)

colorShiftnumber

Default:1

Chromatic aberration amount

colorShift

numberDefault: 1

Chromatic aberration amount

scanlineIntensitynumber

Default:0.3

Strength of horizontal scanlines

scanlineIntensity

numberDefault: 0.3

Strength of horizontal scanlines

scanlineFrequencynumber

Default:200

Number of scanlines across screen

scanlineFrequency

numberDefault: 200

Number of scanlines across screen

brightnessnumber

Default:1

Screen brightness boost

brightness

numberDefault: 1

Screen brightness boost

contrastnumber

Default:1

Screen contrast enhancement

contrast

numberDefault: 1

Screen contrast enhancement

vignetteIntensitynumber

Default:1

Strength of corner darkening effect (0 = off)

vignetteIntensity

numberDefault: 1

Strength of corner darkening effect (0 = off)

vignetteRadiusnumber

Default:0.5

How far the vignette extends inward (0 = edges only, 1 = reaches center)

vignetteRadius

numberDefault: 0.5

How far the vignette extends inward (0 = edges only, 1 = reaches center)

Usage

<Shader>
  <CRTScreen>
    <Circle />
  </CRTScreen>
</Shader>

<Shader>
  <CRTScreen>
    <Circle />
  </CRTScreen>
</Shader>

<Shader>
  <CRTScreen>
    <Circle />
  </CRTScreen>
</Shader>

<Shader>
  <CRTScreen>
    <Circle />
  </CRTScreen>
</Shader>

import { createShader } from 'shaders/js'

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

Bulge

ChannelBlur

Documentation

CRTScreen

Props

Usage