Class VFX

Creates VFX instance and start playing immediately.

Current virtual animation time in seconds (the value behind the
time uniform).

Playback rate of the animation clock.

1 is realtime, 0 pauses (frames still render), and negative
values run time backwards. Can be changed at any time.

Note: deltaTime follows this rate, so it goes negative while
rewinding. Time-only effects handle that fine; effects that integrate
motion over deltaTime (particles, fluid, datamosh) are not designed
to run backwards and may behave unexpectedly.

Register an element to track the position and render visual effects in the area.

Register an element using html-in-canvas API.
Wraps the element in a <canvas layoutsubtree> and captures via drawElementImage.
Falls back to add() if html-in-canvas is not supported.

Destroy VFX and stop rendering.

Start rendering VFX.

Remove the element from VFX and stop rendering the shader.

Render the whole scene once, manually.
This is useful when you want to control the rendering timings manually by combining with autoplay: false.

Pin the animation clock to an absolute time in seconds.

The next render() uses the value verbatim, so setTime(t); render()
produces a deterministic frame — handy for scrubbing a timeline or
capturing stable snapshots (e.g. visual regression tests):

const vfx = new VFX({ autoplay: false });
await vfx.add(img, { effect });
vfx.setTime(1.5);
vfx.render();
Copy

Note: this drives deltaTime too, so a jump produces one large
deltaTime on the next frame. Time-only effects are unaffected, but
effects that integrate motion over deltaTime (particles, fluid,
datamosh) may jump — pause first (timeScale = 0) when scrubbing them.

Stop rendering VFX.
You can restart rendering by calling VFX.play() later.

Update the texture for the given element.

For an HTMLImageElement, reloads its current src — call this
after changing img.src. Videos refresh automatically (no-op).
Otherwise re-snapshots the element's DOM subtree.

Useful for elements whose contents change (input, textarea, or an
<img> whose src swaps).

Replace the effect chain on an already-registered effect-path
element in-place. Effects whose reference is unchanged keep their
init state and GPU resources; only added/removed effects run
init / dispose. The element's source texture is preserved.

Useful for live UIs that reorder or toggle effects without paying
the cost of vfx.remove + vfx.add (which reloads the source).

Create a VFX instance if WebGL is available, or return null.