Shatter

Broken glass effect with tectonic plate displacement

Props

crackWidth
Thickness of crack lines
Type
number
Default
1
intensity
How much shards shift
Type
number
Default
4
radius
Cursor influence radius
Type
number
Default
0.4
decay
How fast shards return to rest
Type
number
Default
1
seed
Random seed for pattern
Type
number
Default
2
chromaticSplit
RGB separation for prismatic glass effect
Type
number
Default
1
refractionStrength
How much cracks bend/distort the underlying image
Type
number
Default
5
shardLighting
Subtle lighting on tilted shards for 3D depth
Type
number
Default
0.1
edges
How to handle edges when displacement pushes content out of bounds
Type
"stretch" | "transparent" | "mirror" | "wrap"
Default
mirror

Usage

<Shader>
  <Shatter
    :intensity="4"
    :radius="0.4"
  >
    <Circle />
  </Shatter>
</Shader>

<Shader>
  <Shatter
    intensity={4}
    radius={0.4}
  >
    <Circle />
  </Shatter>
</Shader>

<Shader>
  <Shatter
    intensity={4}
    radius={0.4}
  >
    <Circle />
  </Shatter>
</Shader>

<Shader>
  <Shatter
    intensity={4}
    radius={0.4}
  >
    <Circle />
  </Shatter>
</Shader>

import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'Shatter', props: { intensity: 4, radius: 0.4 }, children: [
      { type: 'Circle', props: {} }
    ]}
  ]
})