Interface: WaveEffect

Defined in: attributes/shape/effects/implementations/wave.ts:26

Sine displacement — the procedural warp that needs no asset.

Pixels are resampled at a position offset by a sine of their own coordinate, so the content ripples without anything being generated or loaded. For an arbitrary warp driven by an image, see displace.

phase is in degrees and the sine wraps, so a linear tween of phase over 360 loops seamlessly — that is how you make the wave travel. Animating it is the whole point; a static wave reads as a distortion rather than as motion.

Extends

ModedEffect

Properties

amplitude

amplitude: Vector2

Defined in: attributes/shape/effects/implementations/wave.ts:29

Peak displacement in px per axis. { x: 0, y: 20 } ripples vertically only.

angle

angle: number

Defined in: attributes/shape/effects/implementations/wave.ts:37

Direction the crests advance along, in degrees. "linear" only.

center

center: Vector2

Defined in: attributes/shape/effects/implementations/wave.ts:39

Ring origin in 0–1 layer coords. "radial" only.

mode?

optional mode?: EffectMode

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

Inherited from

ModedEffect.mode

phase

phase: number

Defined in: attributes/shape/effects/implementations/wave.ts:33

Phase offset in degrees. Tween it over 360 for one seamless loop.

shape

shape: WaveShape

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

Crest layout — parallel bands or concentric rings.

type

type: "wave"

Defined in: attributes/shape/effects/implementations/wave.ts:27

wavelength

wavelength: number

Defined in: attributes/shape/effects/implementations/wave.ts:31

Distance between crests in px.