MotionScript

Scatter

Randomly displaces each pixel of the node by up to strength pixels, producing a static-noise smear. Mirrors After Effects' Scatter effect.

Scatter effect demo

Usage

import { Effects } from '@motion-script/core';

// Default: 10px displacement in both directions
<Rect effects={Effects.scatter()} />

// Horizontal only
<Rect effects={Effects.scatter({ strength: 20, axis: 'x' })} />

// Raw object
<Rect effects={[{ type: 'scatter', strength: 10, direction: 'both' }]} />

Props

PropTypeDefaultDescription
type'scatter'–Effect identifier
strengthnumber10Maximum random pixel displacement. 0 = off
axis'x' | 'y' | 'both' | { x: number; y: number }'both'Axis along which pixels are displaced. { x, y } scales the jitter per axis
mode'foreground' | 'backdrop''foreground''backdrop' scatters the content beneath the node, clipped to its silhouette, leaving the node's own content untouched

Animating

import { createScene, Rect, Effects, tween, lerpNumber, easeOut } from '@motion-script/core';

export default createScene(function* (stage) {
  const img = new Rect({
    width: 600,
    height: 400,
    fill: { type: 'image', src: './photo.jpg', fit: 'fill' },
  });
  img.set({ effects: Effects.scatter(0) });
  stage.add(img);

  // Disintegrate
  yield* tween(1.2, (t) => {
    img.set({ effects: Effects.scatter(lerpNumber(0, 40, easeOut(t))) });
  });
});

Stacking with other effects

// Signal-loss look: scatter + chromatic aberration
<Rect effects={Effects.scatter({ strength: 8, axis: 'x' }).chromaticAberration(4, 0)} />