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

API Reference

Every class, function and type in @vfx-js/core and @vfx-js/effects, generated from the source. New to VFX-JS? Start with Getting Started.

@vfx-js/core

The VFX class, its options, and the types for custom effects and transitions.

Classes

Crossfade A transition made of one shader. frag defines vec4 transition(vec2 uv, float t) and reads the two sides with readFrom / readTo.
ShaderTransition A transition made of one shader. frag defines vec4 transition(vec2 uv, float t) and reads the two sides with readFrom / readTo.
VFX The main interface of VFX-JS.

Functions

isHicCanvas True if el is a canvas that captures its children with drawElementImage.
markHicCanvas Mark canvas as an html-in-canvas wrapper and child as drawable.
setupCapture Set up the paint handler + ResizeObservers on an html-in-canvas wrapper (<canvas layoutsubtree content="drawable">). Returns the initial OffscreenCanvas from the first paint.
supportsHtmlInCanvas
teardownCapture Tear down onpaint handler + ResizeObservers set up by setupCapture.

Interfaces

CaptureOpts
Effect Effect interface.
Transition A transition: one effect plus the defaults a spec can override. Write it as a class.
TransitionEffect An effect that takes part in a run. Outside a run it is skipped and the chain passes its input through. render also runs while the old content is held (ctx.holding); pass the input through then unless you need those frames. update runs only while the animation plays.
TransitionHandle Controls the transitions of one element.

Types

AddTransitionOpts
EffectAttributeDescriptor
EffectAttributeTypedArray
EffectBlendMode
EffectBlitOpts
EffectContext Context passed to each Effect lifecycle hook. Fields are updated each frame automatically.
EffectDims Per-stage layout snapshot. Same shape on EffectContext.dims (frame-fresh in update / render) and as the argument to Effect.outputRect.
EffectDrawOpts
EffectGeometry Custom geometry for ctx.draw({ geometry }).
EffectQuad Opaque handle for the default fullscreen quad. ctx.draw() uses it by default when geometry is omitted. See EffectContext.quad for details.
EffectRenderTarget A handle to an offscreen render target.
EffectRenderTargetOpts
EffectTexture A handle to a GPU texture.
EffectTextureFilter
EffectTextureSource Source types accepted by EffectContext.wrapTexture.
EffectTextureWrap
EffectUniforms
EffectUniformValue A value you can assign to a shader uniform. The upload variant (uniform1f etc) is picked automatically from the shader's declared uniform type.
EffectVFXProps Subset of VFXProps exposed to effects via ctx.vfxProps.
GlslVersion GLSL ES version of a shader. When omitted on a VFX prop, it is auto-detected from the fragment shader: GLSL 100 markers (gl_FragColor, texture2D, varying, attribute) pick "100", otherwise "300 es".
MarginOpts Values for margin, padding, overflow etc.
RunContext Passed to the run() callback.
RunOpts
ShaderPreset
ShowOpts
SlideRef A direct child of the container, its index, or a selector inside it.
TransitionClass A transition class. Core makes one instance per container with new Class(params).
TransitionEase How t follows linear progress. A function maps 0..1 progress to t.
TransitionEffectContext The effect context during a run.
TransitionProgress x is linear progress, t the eased one. Both go from 0 to 1 and ignore reverse.
TransitionRun One run of a transition, passed to TransitionEffect.start.
TransitionSpec
TransitionUniforms Numbers, vectors and arrays; no textures.
TransitionWaitFor What to wait for after the DOM changes, before the new content is captured. "media" waits for pending images, videos and fonts, up to about 300 ms.
VFXCapture An element captured as a texture by VFX.capture, without drawing it. Pass texture to any effect of the same VFX instance.
VFXCaptureOpts Options for VFX.capture.
VFXCaptureRect Where a captured element is. CSS px, relative to the viewport, like getBoundingClientRect().
VFXOpts Options to initialize VFX class.
VFXPass A single render pass in a multipass shader pipeline.
VFXPostEffect Configuration for post effects that are applied to the final canvas output.
VFXProps Properties for the element passed to VFX.add().
VFXUniforms
VFXUniformValue Type for the values of uniform variables. Scalars/tuples map to GLSL float/vec2/vec3/vec4. Flat numeric arrays (e.g. Float32Array) map to array uniforms — a Float32Array of length N*4 feeds uniform vec4 foo[N] (or uniform float foo[N*4]).
VFXWrap Texture wrapping mode. This corresponds to gl.CLAMP_TO_EDGE, gl.REPEAT and gl.MIRRORED_REPEAT in WebGL API.

Variables

shaders Shader code for presets. Shaders in shader can be looked up with keys in ShaderPreset.

@vfx-js/effects

Ready-made effects to pass to the effect option, and their parameters.

Classes

AsciiEffect ASCII / glyph-mosaic effect.
BadJpegEffect Simulates JPEG degradation: chroma subsampling, blocky DCT quantization, and generation loss from re-encoding the result iterations times. Mutate quality / iterations / downscale directly for runtime tweaks.
BloomEffect COD:AW-style bloom. Mutate params directly or via setParams — uniforms and outputRect read live each frame, so a reactive UI (e.g. Tweakpane) can bind directly to effect.params.
ChromaticEffect Effect interface.
ColoredEdgesEffect Effect interface.
DatamoshEffect Pseudo-datamosh via a faked H.264 block codec. Passes the input through until enable(), then holds a motion-compensated accumulator so motion smears stale texture around. Mutate params directly or via setParams; toggle the mosh with enable() / disable().
DitherEffect Effect interface.
DuotoneEffect Effect interface.
FluidEffect Stable Fluid as a single Effect. Mutate params directly for runtime tweaks; tracked sim state is owned by the effect and reset on dispose.
GlitchEffect Effect interface.
GradientMapEffect Effect interface.
HalftoneEffect Effect interface.
HueShiftEffect Effect interface.
JPEGGlitchEffect Real (codec-level) JPEG glitch. Reads the element back to the CPU, re-encodes it as a JPEG with the browser's native encoder, corrupts random bytes in the compressed scan stream, and draws the browser's decode of the broken file — so the artifacts are produced by an actual JPEG decoder rather than approximated in a shader.
LightStreakEffect Light-streak effect (anamorphic flare / aperture starburst) built from instanced streak sprites. Mutate params directly or via setParams; uniforms are read live each frame, so a reactive UI (e.g. Tweakpane) can bind straight to effect.params.
MatrixEffect "Digital rain" / Matrix-movie effect.
ParticleEffect Effect interface.
ParticleExplodeEffect Effect interface.
PatternRefractionEffect Effect interface.
PixelateEffect Effect interface.
PixelSortEffect Threshold-based pixel sort. Scans each row/column for runs whose key falls in the range band and reorders the run by key. Set angle to sort along an arbitrary direction. Mutate params directly or via setParams.
PixelStretchEffect Effect interface.
RainbowEffect Effect interface.
RgbGlitchEffect Effect interface.
RgbShiftEffect Effect interface.
ScanlineEffect Effect interface.
SinewaveEffect Effect interface.
SliceShiftEffect Effect interface.
TilePixelateEffect Effect interface.
TritoneEffect Effect interface.
VignetteEffect Effect interface.
VoronoiEffect Effect interface.
WarpEffect Effect interface.

Types

AsciiCharRamp A character ramp ordered dark → light: index 0 maps to the darkest input luminance, the last entry to the brightest. Pass a string (split per Unicode code point) or an array of single chars.
AsciiColor RGBA colour, each channel in [0, 1].
AsciiImageSource An image tile source. Strings are treated as URLs (loaded and decoded in init()); the rest are used directly.
AsciiParams
AsciiPresetName Name of a built-in ASCII_PRESETS ramp.
BadJpegEffectOptions
BloomParams
ChromaticParams
ColoredEdgesParams
DatamoshColorSpace
DatamoshParams
DatamoshView Stage routed to the canvas; non-output views are for debugging.
DitherParams
DitherStyle
DuotoneParams
FluidParams
GlitchParams
GradientMapMixSpace
GradientMapParams
GradientMapRepeat
HalftoneInk
HalftoneInkPalette
HalftoneInkPresetName
HalftoneMode
HalftoneParams
HueShiftParams
JPEGGlitchParams
LightStreakParams
MatrixColor RGBA colour, each channel in [0, 1].
MatrixGlyphs The pool of glyphs rained down the columns. Pass a string (split per Unicode code point) or an array of single chars. The order is irrelevant — a random glyph is picked for every cell.
MatrixParams
MatrixTrailColor Trail colour: a single MatrixColor, or an array of two or more colour stops forming a gradient along each drop's trail (first stop at the head, last at the tail end). Stops are interpolated in OKLCH.
ParticleExplodeParams
ParticleParams
PatternRefractionParams
PixelateParams
PixelSortDirection
PixelSortKey
PixelSortParams
PixelStretchParams
RainbowParams
RefractionEdgeWrap
RefractionPattern
Rgba RGBA colour, each channel in [0, 1].
RgbGlitchParams
RgbShiftParams
ScanlineParams
SinewaveParams
SliceShiftParams
TilePixelateParams
TilePixelateShape
TritoneParams
VignetteParams
VoronoiParams
WarpParams
WarpType

Variables

ASCII_PRESETS Built-in character ramps, ordered dark → light. Suited for light-on-dark output (more "ink" = brighter); flip with invert: true for dark-on-light.
MATRIX_GLYPHS Default glyph pool: half-width katakana (the look the film used) plus digits and a few symbols. Mirrored katakana isn't reproducible from a normal font, so these render upright.