Bulge Pinch Filter
The Bulge Pinch filter creates a localized distortion effect on the rendered element, which adds a bulging outward or pinching inward effect. It allows you to simulate lens-like distortions, create playful UI effects, or highlight specific regions. By adjusting parameters such as strength, radius, and position, you can precisely control how and where the bulge or pinch occurs.
When to Use a Bulge Pinch Filter
- Interactive Emphasis
Draw attention to a particular portion of an image or UI element by bulging it on hover. - Interactive Feedback
Create fun effects such as wavy or “fisheye” distortions on elements. - Visual Feedback Provide subtle pinch/bulge feedback when a user interacts to simulate a “squeezing” or “pressing” sensation.
Bulge Pinch Filter Properties
| Property | Details |
|---|---|
| Radius | The radius of the circle of effect |
| Strength | A value between -1 and 1 (-1 is strong pinch, 0 is no effect, 1 is strong bulge) |
| Center | Sets the center of the effect in normalized screen coords. { x: 0, y: 0 } means top-left and { x: 1, y: 1 } mean bottom-right |