> For the complete documentation index, see [llms.txt](https://codalin.gitbook.io/nodalin-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://codalin.gitbook.io/nodalin-docs/nodes-reference/effects/displace.md).

# Displace

## Displace

<table><thead><tr><th width="117.02911376953125"></th><th></th></tr></thead><tbody><tr><td><div><figure><img src="https://937151318-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F44MuVIHBk5o5yfcGn64w%2Fuploads%2FzuNQaxWh6rqjkvGVtPx8%2Fimage.png?alt=media&amp;token=dbe44784-e902-4afa-a408-c196433c4afc" alt="" width="76"><figcaption></figcaption></figure></div></td><td>Displaces background pixels using the map shape's luminance as a displacement map. Create bulge, warp, and distortion effects by pushing pixels outward, inward, or in specific directions.</td></tr></tbody></table>

When only `map` is connected, Displace behaves like a lens — it warps whatever is already rendered behind it. The map shape's z-index controls where in the scene the distortion appears.

When a figure is also connected to `background`, the map displaces that figure directly. This is useful for displacing a specific image or video without worrying about layer order.

<table><thead><tr><th width="154.813232421875">Property name</th><th width="405.44952392578125">Description</th><th>Compatible datatype</th></tr></thead><tbody><tr><td>map</td><td>Input figure used as displacement map</td><td>figure</td></tr><tr><td>background</td><td>Optional figure to displace directly. When connected, the map displaces this figure instead of the scene background</td><td>figure</td></tr><tr><td>mode</td><td>Displacement mode (bulge, polar, linear, red-green) </td><td>text</td></tr><tr><td>strength</td><td>Displacement intensity. Positive values push outward, negative values pull inward</td><td>number</td></tr><tr><td>soft</td><td>Edge softening in pixels. Higher values create smoother transitions at shape edges</td><td>number</td></tr><tr><td>angle</td><td>Direction in degrees. Available for linear and polar modes</td><td>number</td></tr></tbody></table>

#### Displacement Modes

* **Bulge** — Pushes pixels radially outward from the center of bright areas, creating a magnifying glass or bubble effect
* **Polar** — Displaces pixels in a circular/spiral pattern around bright areas, controlled by the angle property
* **Linear** — Pushes pixels in a single direction based on the angle property
* **Red-green** — Uses the red and green color channels separately to control horizontal and vertical displacement

<div data-with-frame="true"><figure><img src="https://937151318-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F44MuVIHBk5o5yfcGn64w%2Fuploads%2Fc77dlhoJsJnOeO7rE36C%2Fdispl-ezgif.com-optimize.gif?alt=media&amp;token=269a7866-bc0e-476a-8369-573a0e8407d6" alt=""><figcaption><p>From the example project "<a href="https://app.nodalin.xyz/project/30d3b08b-3440-4658-8d5b-1ecf22e2ad13">Disco Displace</a>"</p></figcaption></figure></div>

This makes Displace ideal for:

* Creating magnifying glass or water droplet effects
* Warping backgrounds through moving shapes
* Building heat haze or underwater distortion
* Combining with other effects for complex visual treatments

{% hint style="info" %}
Quick tip #1: Displace works wonders if combined with a Post node\
Quick tip #2: Use a Signal node as map for the Displace, to create ripples and screen-like distortions
{% endhint %}

#### Example Projects

[Displace Modes Demo](https://app.nodalin.xyz/project/c58ce63e-2b67-4e5b-b71a-1789c7229f22)

[Funky Down](https://app.nodalin.xyz/project/174f8894-e90a-4c1d-9d58-64b186289230)\
Displace used on a Post-chain.

[Glitchgain](https://app.nodalin.xyz/project/9cac8f87-51c2-4ccf-afe7-01ab207bc6ac)\
Double the Post, double the Displace.

[Mirage Majeure II](https://app.nodalin.xyz/project/84b391ae-1e7a-4155-8b0c-c668fab944c9)

[Mirage Majeure III](https://app.nodalin.xyz/project/842f1032-b5af-4288-85e1-8c0ab533ecc8)

[Around The World](https://app.nodalin.xyz/project/b33e914a-463c-41d4-b268-9532dfa4131e)