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

Interface

Transition

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

A transition: one effect plus the defaults a spec can override. Write it as a class.

Extends: TransitionEffect
Implemented by: ShaderTransition

Properties

ease

ease?: TransitionEase

The t this transition expects. A spec's ease wins. Defaults to "smoothstep".

enabled from TransitionEffect

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.

name

readonly name?: string

overflow

overflow?: number | true

Draw outside the element: true for the whole canvas, a number for CSS px on every side. A spec's overflow wins.

Methods

dispose from TransitionEffect

dispose?(): void

end from TransitionEffect

end?(): void

Called once when the run ends, is dropped or is cancelled.

init from TransitionEffect

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

outputRect from TransitionEffect

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 from TransitionEffect

render?(ctx: TransitionEffectContext): void

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

start from TransitionEffect

start?(run: TransitionRun): void

Called once per run while the old content is held, before the first frame.

update from TransitionEffect

update?(ctx: TransitionEffectContext): 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.