BlueNoise

High-frequency blue noise — even, grainy speckle ideal for dithering

Props

colorAstring

Default:#ffffff

First color

colorA

stringDefault: #ffffff

First color

colorBstring

Default:#000000

Second color

colorB

stringDefault: #000000

Second color

stopsobject

Default:null

Multi-stop gradient colors (overrides Color A / Color B when set)

stops

objectDefault: null

Multi-stop gradient colors (overrides Color A / Color B when set)

colorSpace"linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch"

Default:linear

Color space for color interpolation

colorSpace

Color space for color interpolation

grainnumber

Default:1

Grain size in pixels (1 = per-pixel, higher = chunkier speckle)

grain

numberDefault: 1

Grain size in pixels (1 = per-pixel, higher = chunkier speckle)

contrastnumber

Default:0

Pattern contrast (higher = sharper transitions)

contrast

numberDefault: 0

Pattern contrast (higher = sharper transitions)

balancenumber

Default:0

Balance between colors (negative = more colorB, positive = more colorA)

balance

numberDefault: 0

Balance between colors (negative = more colorB, positive = more colorA)

seednumber

Default:0

Random seed for pattern variation

seed

numberDefault: 0

Random seed for pattern variation

Usage

<Shader>
  <BlueNoise />
</Shader>

<Shader>
  <BlueNoise />
</Shader>

<Shader>
  <BlueNoise />
</Shader>

<Shader>
  <BlueNoise />
</Shader>

import { createShader } from 'shaders/js'

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

BlockNoise

Blur