Shader Atlas
한국어
⌖ Interactive

Shatter

유리 파편 효과

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

Also known as: Shattershattered glassglass fracture

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

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

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

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

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

Props · Shatter

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

NameValueDefaultRange / optionsDescription
crackWidthCrack Width10.5 – 5 (step 0.1)Thickness of crack lines
intensityIntensity40 – 20 (step 1)How much shards shift
radiusRadius0.40.1 – 1 (step 0.1)Cursor influence radius
decayDecay10.1 – 10 (step 0.1)How fast shards return to rest
seedSeed20 – 50 (step 1)Random seed for pattern
chromaticSplitChromatic Split10 – 5 (step 0.1)RGB separation for prismatic glass effect
refractionStrengthRefraction50 – 10 (step 0.1)How much cracks bend/distort the underlying image
shardLightingShard Lighting0.10 – 0.5 (step 0.1)Subtle lighting on tilted shards for 3D depth
edgesEdgesmirrorstretch · transparent · mirror · wrapHow to handle edges when displacement pushes content out of bounds

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

Glass Tiles유리 타일 왜곡

A grid of glass-like tiles refracts the input into a segmented mosaic.

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

Pixel Throw픽셀 던지기

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

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Grid Distortion그리드 왜곡

The grid bends around the pointer and locally shifts the image beneath it.

The image beneath breaks into glass-like facets that shift when the pointer passes. Picture a scored pane of glass whose shards move after a light touch.

`crackWidth` sets crack thickness (default 1, range 0.5–5), `intensity` sets how far shards move (default 4, range 0–20), and `radius` sets the pointer’s influence area (default 0.4, range 0.1–1). `decay` controls how quickly shards settle (default 1, range 0.1–10); `chromaticSplit` adds color separation along shard edges (default 1, range 0–5).

This effect needs an image or shape beneath it so the shards have content to show. A photo with clear contrast makes the cracks visible; avoid using text or buttons as input, since broken shapes can interfere with their meaning.

When to use

Use it for a pointer-responsive photo hero, a short scene transition, or a broken-glass decoration. Avoid it on buttons, logos, and copy people need to read.

Open as page ↗