Shader Atlas
한국어
⌖ Interactive

Pixel Throw

픽셀 던지기

Pixels fly along the pointer’s path according to brightness or color, then settle back.

Also known as: PixelThrowpixel displacementpixel scatter

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, ImageTexture, PixelThrow } from 'shaders/react'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <ImageTexture
        objectFit="cover"
        url="/samples/still.jpg" />
      <PixelThrow />
    </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, ImageTexture, PixelThrow } from 'shaders/vue'
</script>

<template>
  <Shader style="width: 100%; height: 320px" :disable-telemetry="true">
    <ImageTexture
      object-fit="cover"
      url="/samples/still.jpg"/>
    <PixelThrow/>
  </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, ImageTexture, PixelThrow } from 'shaders/svelte'
</script>

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <ImageTexture
    objectFit="cover"
    url="/samples/still.jpg" />
  <PixelThrow />
</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, ImageTexture, PixelThrow } from 'shaders/solid'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <ImageTexture
        objectFit="cover"
        url="/samples/still.jpg" />
      <PixelThrow />
    </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: 'PixelThrow',
    }
  ]
}, { disableTelemetry: true })

Props · PixelThrow

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

NameValueDefaultRange / optionsDescription
throwKeyThrow Byluminanceluminance · darkness · red · green · blueWhich pixel value decides how far a pixel is thrown
strengthStrength0.250 – 1 (step 0.01)Maximum distance pixels can be thrown
keyInfluenceKey Influence0.80 – 1 (step 0.01)How much the chosen value modulates throw distance (0 = all pixels thrown equally, 1 = only high-value pixels move)
radiusRadius0.20.02 – 0.6 (step 0.01)Size of the cursor's throw brush
frictionFriction0.30 – 1 (step 0.01)How quickly thrown pixels settle back to their origin (0 = float almost forever, 1 = snap back fast)
momentumMomentum0.50 – 1 (step 0.01)How much the thrown flow keeps drifting and swirling after the cursor passes (fluidity)
edgesEdgesstretchstretch · transparent · mirror · wrapHow to handle pixels thrown beyond the canvas edges

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

Pixel Sort픽셀 정렬

The pointer brush sorts pixels by brightness and leaves the rearrangement behind.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Displacement Map변위 맵

A source layer's pixel values push the input image around in different places.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Cursor Ripples커서 잔물결

Ripples spread from the pointer and warp the image beneath them.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Shatter유리 파편 효과

The image beneath breaks into glass-like shards that shift around the pointer.

Pixels move away along the pointer’s path, travel different distances by brightness or color, and then return. Like sweeping a hand across water, image fragments follow the motion.

`throwKey` chooses the value that drives distance (default `luminance`), `strength` sets maximum displacement (default 0.25, range 0–1), and `radius` sets brush size (default 0.2, range 0.02–0.6). `friction` controls how quickly pixels return (default 0.3, range 0–1); `momentum` controls how much flow continues after the pointer passes (default 0.5, range 0–1).

This effect needs an image whose pixels can move. A photo with light and dark areas makes scattering visible; small text and thin lines may become hard to recognize.

When to use

Use it for pointer-responsive scattering on a photo, a short interactive transition, or a textured hero image. Avoid it when copy or thin lines must remain readable.

Open as page ↗