Interface: DisplaceEffect

Defined in: attributes/shape/effects/implementations/displace.ts:35

Displacement map — the content is resampled at a position pushed around by a second image, rather than having its colours changed.

This is the general warp. wave and twirl are the two procedural cases worth spelling out; everything else — refraction, heat haze, water, cloth, dissolve — is this effect plus the right map. Point it at a normal map for glass, at a noise texture for haze, at a gradient for a directional smear.

In mode: 'backdrop' this is refraction. The displacement runs on what is painted beneath the node and is clipped to the node's silhouette, so the scene bends as it passes through the shape while the shape's own edges stay sharp — the frosted/liquid-glass panel, from one effect.

midpoint is what the map calls "no displacement". Signed data packed into unsigned bytes centres on 0.5 (the default, and what a normal map assumes); a mask-style map that should only ever push one way wants 0.

Extends

ModedEffect

Properties

amount

amount: Vector2

Defined in: attributes/shape/effects/implementations/displace.ts:40

Displacement at full deflection, in px per axis. {x: 0, y: n} warps vertically only.

angle

angle: number

Defined in: attributes/shape/effects/implementations/displace.ts:48

Map rotation in degrees.

channel

channel: DisplaceChannel

Defined in: attributes/shape/effects/implementations/displace.ts:42

Which channels of the map are read.

midpoint

midpoint: number

Defined in: attributes/shape/effects/implementations/displace.ts:44

The map value meaning "don't move" — 0.5 for signed data, 0 for a one-way mask.

mode?

optional mode?: EffectMode

Defined in: attributes/shape/effects/effect-data.ts:83

Inherited from

ModedEffect.mode

scale

scale: number

Defined in: attributes/shape/effects/implementations/displace.ts:46

Map scale — 1 covers the node once, 2 tiles it at half size.

src

src: string

Defined in: attributes/shape/effects/implementations/displace.ts:38

Map image path, resolved like an image fill's src.

type

type: "displace"

Defined in: attributes/shape/effects/implementations/displace.ts:36