Your system asks for reduced motion, so VFX-JS draws nothing. Demos on this site show plain HTML.

Interface

Effect

import type { Effect } from "@vfx-js/core";

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).

Extended by: TransitionEffect

Properties

enabled

enabled?: boolean

Whether this effect renders. (Default: true)

Set to false to skip this effect's render(): the chain passes its input straight through to the next stage (or to the canvas if it is the last stage), with no draw. Re-checked every frame, so it is a cheap runtime toggle — the effect stays attached and keeps its buffers, paying no re-init cost.

init and update still run while disabled, so stateful effects stay warm and re-enable seamlessly. Omitting the field (or undefined) means enabled.

Methods

dispose

dispose?(): void

init

init?(ctx: EffectContext): void | Promise<void>

outputRect

outputRect?(dims: EffectDims): ElementRect | undefined

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.

render

render?(ctx: EffectContext): void

Render phase. Omit to make this effect transparent in the chain.

update

update?(ctx: EffectContext): void

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.