Shader Atlas
한국어
▒ Noise

Block Noise

블록 노이즈

Blocky value noise with soft cells that morph over time.

Also known as: BlockNoiseblocky value noisesoft-cell noise

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

React
// Renders only in browsers with WebGPU.
import { Shader, BlockNoise } from 'shaders/react'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <BlockNoise />
    </Shader>
  )
}
Vue
<!-- Renders only in browsers with WebGPU. -->
<script setup lang="ts">
import { Shader, BlockNoise } from 'shaders/vue'
</script>

<template>
  <Shader style="width: 100%; height: 320px" :disable-telemetry="true">
    <BlockNoise/>
  </Shader>
</template>
Svelte
<!-- Renders only in browsers with WebGPU. -->
<script>
  import { Shader, BlockNoise } from 'shaders/svelte'
</script>

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <BlockNoise />
</Shader>
Solid
// Renders only in browsers with WebGPU.
import { Shader, BlockNoise } from 'shaders/solid'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <BlockNoise />
    </Shader>
  )
}
JavaScript
// Renders only in browsers with WebGPU.
// expects <canvas id="canvas" style="width:100%;height:320px"></canvas> on the page
import { createShader } from 'shaders/js'

const shader = await createShader(document.getElementById("canvas"), {
  components: [
    {
      type: 'BlockNoise',
    }
  ]
}, { disableTelemetry: true })

Props · BlockNoise

Changes apply to the demo above and to the code tabs. Descriptions come from the library registry (MIT).

NameValueDefaultRange / optionsDescription
colorAColor A#ffffff—First color
colorBColor B#000000—Second color
stopsColorsSet in codenull—Multi-stop gradient colors (overrides Color A / Color B when set)
colorSpaceColor Spacelinearlinear · oklch · oklab · hsl · hsv · lchColor space for color interpolation
scaleScale2-2 – 5 (step 0.1)Pattern scale (higher = larger patterns)
contrastContrast0-1 – 5 (step 0.1)Pattern contrast (higher = sharper transitions)
balanceBalance0-1 – 1 (step 0.05)Balance between colors (negative = more colorB, positive = more colorA)
seedSeed00 – 100 (step 1)Random seed for pattern variation
speedSpeed10 – 5 (step 0.1)Animation speed

Every component also takes blendMode · opacity · visible · maskSource/maskType · boundingBox · id

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Worley Noise워리 노이즈

A cellular field that maps distance from scattered points to color, with selectable cell and edge patterns.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Blue Noise블루 노이즈

Even, high-frequency speckle that works well as a grain or dithering pattern.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Pixelate픽셀화

Groups an image into large pixel cells for a low-resolution pixel-art look.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Grid그리드

Evenly spaced lines cross to divide the canvas into a regular grid.

Its square regions meet through soft edges, like mosaic tiles melting into one another. The result shows blurred blocks and color patches rather than a hard pixel grid.

`scale` defaults to 2 and ranges from -2 to 5; higher values make the blocks larger. `contrast` defaults to 0 and ranges from -1 to 5; higher values make brightness differences between blocks clearer. `balance` defaults to 0 and ranges from -1 to 1, shifting the mix toward the second color below zero and the first above zero. `speed` defaults to 1 and ranges from 0 to 5; it controls how quickly the pattern changes. `seed` defaults to 0 and ranges from 0 to 100, changing the layout.

This generator fills the canvas without a separate input. Layer it with `BlueNoise` to add finer grain over the larger blocks. Its edges are soft, so it does not look like crisp pixel art; use `Grid` or `Pixelate` when you need a sharp square grid.

When to use

Use it for blurred mosaic backgrounds, broad color blocks, and moving block textures. Avoid it when you need crisp pixel grids or soft cloudlike patterns.

Open as page ↗