GridDistortion
Interactive grid distortion controlled by mouse position
Interactive grid distortion controlled by mouse position
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| intensity | range | 1 | Strength of the distortion effect |
| decay | range | 3 | Rate of distortion decay (higher = faster) |
| radius | range | 1 | Radius of the distortion effect |
| gridSize | range | 20 | Resolution of the distortion grid (higher = more detailed) |
| edges | "stretch" | "transparent" | "mirror" | "wrap" | stretch | How to handle edges when distortion pushes content out of bounds |
Usage
vue
<Shader>
<GridDistortion
:intensity="1"
:radius="1"
>
<Circle />
</GridDistortion>
</Shader>