Effects
Rect Depth
A smooth parallax style depth effect for UI elements
Overview
Rect Depth creates a subtle parallax effect by shifting a UI element based on pointer movement. The element smoothly follows the cursor with adjustable speed and distance, making it useful for stylized menus, floating panels, cards, and reactive UI surfaces.
The component computes pointer position in canvas space, applies a depth multiplier, and uses SmoothDamp to animate the movement.
Usage
Add Rect Depth component to any UI element with a RectTransform
Optionally assign a targetRect, targetCanvas, or targetCamera
Adjust:
- Follow Speed for the smoothness of motion
- Depth Multiplier for how far the element moves
The element will update every frame while enabled
Suitable Use Cases
- Floating UI panels
- Parallax enhanced main menus
- Decorative background UI layers
Properties
Settings
| Name | Type | Description |
|---|---|---|
followSpeed | float | Controls how quickly the element follows the pointer. Lower values make motion smoother and slower. |
depthMultiplier | float | Scales the pointer offset, controlling the amount of parallax movement. |
References
| Name | Type | Description |
|---|---|---|
targetRect | RectTransform | Element that receives the parallax movement. Defaults to the current object. |
targetCanvas | Canvas | Canvas used for converting pointer coordinates. Defaults to the nearest parent Canvas. |
targetCamera | Camera | Optional fallback camera used when the canvas requires one. |