Distortion and lifecycle

SurfaceGlitch shifts strips of a live surface. It temporarily adds masks and geometry copies. The original Graphics must be in a container and have no mask of its own.

import { Graphics } from 'pixi.js';
import { CyberPreset, SurfaceGlitch } from '@gamedevland/cyber-ui';

const surface = app.stage.addChild(new Graphics()
  .rect(0, 0, 220, 56).fill(CyberPreset.palette.accent));
const glitch = new SurfaceGlitch(CyberPreset.glitch);
glitch.show('menu', [{ surface, x: 0, y: 0, w: 220, h: 56 }], 200);
glitch.update(0.2);

The last argument of show() is a delay in milliseconds; update() takes seconds. Calling show() again with the same key updates targets without restarting the schedule; a new key starts it over. The effect picks up changes to the original surface’s geometry and transform.

The shared UiEffect contract is update, setActive, setReducedMotion, and dispose. The last call is idempotent; the others throw after disposal. Reduced motion removes glitch distortion immediately. The application passes the preference, including when it changes.

We dispose of the effect before destroying surfaces. The target’s mask must remain unchanged while the glitch owns it. Text, neighboring objects, and snapshots of arbitrary containers are outside this effect’s scope.