VFX-JS
    Preparing search index...

    Interface Effect

    Effect interface.

    Lifecycle hooks:

    • init: called once on effect register
    • update: called every frame, before render
    • render: called every frame. Bypassed if omitted
    • dispose: called once on removal

    outputRect declares the rect this stage writes into, in
    element-local physical px. Defaults to the source rect (no growth).

    interface Effect {
        init?(ctx: EffectContext): void | Promise<void>;
        update?(ctx: EffectContext): void;
        render?(ctx: EffectContext): void;
        dispose?(): void;
        outputRect?(dims: EffectDims): ElementRect | undefined;
    }
    Index

    Methods

    • State-update phase. ctx.src / ctx.target may point to stale /
      previous-frame handles here, so ctx.draw() MUST NOT be called.
      If called, the orchestrator silently ignores it.

      Parameters

      Returns void

    • The rect this stage draws into, as [x, y, w, h].

      Coordinates are in physical pixels, relative to the element, with
      the origin at the bottom-left.

      Omit this method (or return undefined) when the effect does not
      change the size of the content, such as a grayscale or invert
      filter. The stage then draws into the same rect as its input.

      Some common rects to return:

      • dims.contentRect — just the element, with no extra space.
      • The element plus px extra pixels on every side, for effects
        like blur, glow, or drop shadow:
        [-px, -px, elementPixel[0] + 2 * px, elementPixel[1] + 2 * px].
      • dims.canvasRect — the whole canvas, including the
        scrollPadding area around the viewport.

      Each stage picks its own rect. If one stage returns 100×100 and
      the next returns 50×50, those are the sizes used; rects do not
      grow as the chain runs.

      Parameters

      Returns ElementRect | undefined