Shader Atlas
한국어
⇥ Transitions

Checker Wipe

체커 와이프

Checkerboard squares fade in sequence to wipe the input away.

Also known as: CheckerWipecheckerboard wipe

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

React
// Renders only in browsers with WebGPU.
// /samples/… are this site’s sample files — point them at your own image or video.
import { Shader, CheckerWipe, ImageTexture } from 'shaders/react'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <ImageTexture
        objectFit="cover"
        url="/samples/still.jpg" />
      <CheckerWipe
        progress={{
          type: "auto-animate",
          mode: "ping-pong",
          outputMin: 0,
          outputMax: 1,
          speed: 0.5
        }}>
        <ImageTexture
          objectFit="cover"
          url="/samples/photo.jpg" />
      </CheckerWipe>
    </Shader>
  )
}
Vue
<!-- Renders only in browsers with WebGPU. -->
<!-- /samples/… are this site’s sample files — point them at your own image or video. -->
<script setup lang="ts">
import { Shader, CheckerWipe, ImageTexture } from 'shaders/vue'
</script>

<template>
  <Shader style="width: 100%; height: 320px" :disable-telemetry="true">
    <ImageTexture
      object-fit="cover"
      url="/samples/still.jpg"/>
    <CheckerWipe
      :progress="{
        type: 'auto-animate',
        mode: 'ping-pong',
        outputMin: 0,
        outputMax: 1,
        speed: 0.5
      }">
      <ImageTexture
        object-fit="cover"
        url="/samples/photo.jpg"/>
    </CheckerWipe>
  </Shader>
</template>
Svelte
<!-- Renders only in browsers with WebGPU. -->
<!-- /samples/… are this site’s sample files — point them at your own image or video. -->
<script>
  import { Shader, CheckerWipe, ImageTexture } from 'shaders/svelte'
</script>

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <ImageTexture
    objectFit="cover"
    url="/samples/still.jpg" />
  <CheckerWipe
    progress={{
      type: "auto-animate",
      mode: "ping-pong",
      outputMin: 0,
      outputMax: 1,
      speed: 0.5
    }}>
    <ImageTexture
      objectFit="cover"
      url="/samples/photo.jpg" />
  </CheckerWipe>
</Shader>
Solid
// Renders only in browsers with WebGPU.
// /samples/… are this site’s sample files — point them at your own image or video.
import { Shader, CheckerWipe, ImageTexture } from 'shaders/solid'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <ImageTexture
        objectFit="cover"
        url="/samples/still.jpg" />
      <CheckerWipe
        progress={{
          type: "auto-animate",
          mode: "ping-pong",
          outputMin: 0,
          outputMax: 1,
          speed: 0.5
        }}>
        <ImageTexture
          objectFit="cover"
          url="/samples/photo.jpg" />
      </CheckerWipe>
    </Shader>
  )
}
JavaScript
// Renders only in browsers with WebGPU.
// /samples/… are this site’s sample files — point them at your own image or video.
// 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: 'ImageTexture',
      props: {
        objectFit: 'cover',
        url: '/samples/still.jpg',
      },
    },
    {
      type: 'CheckerWipe',
      props: {
        progress: {
          type: 'auto-animate',
          mode: 'ping-pong',
          outputMin: 0,
          outputMax: 1,
          speed: 0.5
        },
      },
      children: [
        {
          type: 'ImageTexture',
          props: {
            objectFit: 'cover',
            url: '/samples/photo.jpg',
          },
        },
      ],
    }
  ]
}, { disableTelemetry: true })

Props · CheckerWipe

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

NameValueDefaultRange / optionsDescription
progressProgressAuto-animated in the demo — moving it pins the value0.50 – 1 (step 0.01)How far the wipe has progressed (0 = fully visible, 1 = fully wiped away)
blockSizeBlock Size0.10.02 – 0.5 (step 0.01)Size of each square as a fraction of the frame width
softnessSoftness0.150 – 1 (step 0.01)How softly each square fades out (0 = hard-edged squares)
invertInvertfalse—Reverse the order the squares wipe in

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

Diamond Wipe다이아몬드 와이프

Growing diamond cells form a lattice that wipes the image away.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Block Dissolve블록 디졸브

A grid of blocks fades away in a varying order to dissolve the image.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Random Bars랜덤 바 와이프

Parallel bars disappear in a varying order as progress advances.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Noise Dissolve노이즈 디졸브

An organic noise pattern erodes the input as the dissolve progresses.

Checkerboard cells fade in sequence until the scene disappears in grid pieces. The regular pattern creates a noticeable beat.

`progress` defaults to 0.5 and ranges from 0 to 1. `blockSize` defaults to 0.1 and ranges from 0.02 to 0.5 to change the square size. `softness` defaults to 0.15 and ranges from 0 to 1 to soften each fade; `invert` defaults to false and reverses the cell order.

Place an image or video beneath the effect. Put the incoming scene on a lower layer and animate progress to use it as a transition. A large block size can look coarse, while low softness creates crisp edges that make text appear fragmented.

When to use

Use it for scene changes with a grid rhythm, graphic titles, or a pixel-like transition. Avoid it when copy and tables need to remain fully readable.

Open as page ↗