Shatter

Broken glass effect with tectonic plate displacement

Props

crackWidthnumber

Default:1

Thickness of crack lines

crackWidth

numberDefault: 1

Thickness of crack lines

intensitynumber

Default:4

How much shards shift

intensity

numberDefault: 4

How much shards shift

radiusnumber

Default:0.4

Cursor influence radius

radius

numberDefault: 0.4

Cursor influence radius

decaynumber

Default:1

How fast shards return to rest

decay

numberDefault: 1

How fast shards return to rest

seednumber

Default:2

Random seed for pattern

seed

numberDefault: 2

Random seed for pattern

chromaticSplitnumber

Default:1

RGB separation for prismatic glass effect

chromaticSplit

numberDefault: 1

RGB separation for prismatic glass effect

refractionStrengthnumber

Default:5

How much cracks bend/distort the underlying image

refractionStrength

numberDefault: 5

How much cracks bend/distort the underlying image

shardLightingnumber

Default:0.1

Subtle lighting on tilted shards for 3D depth

shardLighting

numberDefault: 0.1

Subtle lighting on tilted shards for 3D depth

edges"stretch" | "transparent" | "mirror" | "wrap"

Default:mirror

How to handle edges when displacement pushes content out of bounds

edges

"stretch" | "transparent" | "mirror" | "wrap"Default: mirror

How to handle edges when displacement pushes content out of bounds

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: {} }
    ]}
  ]
})

Sharpness

SimplexNoise

Documentation

Shatter

Props

Usage