Shatter
Broken glass effect with tectonic plate displacement
Broken glass effect with tectonic plate displacement
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| crackWidth | range | 1 | Thickness of crack lines |
| intensity | range | 4 | How much shards shift |
| radius | range | 0.4 | Cursor influence radius |
| decay | range | 1 | How fast shards return to rest |
| seed | range | 2 | Random seed for pattern |
| chromaticSplit | range | 1 | RGB separation for prismatic glass effect |
| refractionStrength | range | 5 | How much cracks bend/distort the underlying image |
| shardLighting | range | 0.1 | Subtle lighting on tilted shards for 3D depth |
| edges | "stretch" | "transparent" | "mirror" | "wrap" | mirror | How to handle edges when displacement pushes content out of bounds |
Usage
vue
<Shader>
<Shatter
:intensity="4"
:radius="0.4"
>
<Circle />
</Shatter>
</Shader>