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

Type

VFXPostEffect

vfx-js/src/types.ts:516 ↗
import type { VFXPostEffect } from "@vfx-js/core";

Configuration for post effects that are applied to the final canvas output.

Properties

effect

effect?: Effect | readonly Effect[]

Effect (or pipeline of effects) to apply in this post-effect slot.

float

float?: boolean

Use 32-bit floating point render target. (Default: false)

glslVersion

glslVersion?: GlslVersion

persistent

persistent?: boolean

Whether the post effect should persist across frames. If enabled, the previous output is available as sampler2D backbuffer.

shader

shader?: ShaderPreset | string

Fragment shader code or preset name to be applied as a post effect. You can pass a preset name from ShaderPreset (e.g., "invert", "grayscale") or provide custom shader code.

The shader will receive the whole canvas as sampler2D src.

Standard uniforms available:

  • sampler2D src: The input texture (rendered canvas)
  • vec2 resolution: Canvas resolution in pixels
  • vec2 offset: Element origin inside the render target in physical pixels (0 for post effects)
  • vec4 viewport: Render target rect (x, y, w, h) in physical pixels
  • float time: Time in seconds since VFX started
  • vec2 mouse: Mouse position in pixels
  • sampler2D backbuffer: Previous frame texture (if persistent is enabled)

Optional: shader and effect are mutually exclusive. If both are present, effect takes precedence.

uniforms

uniforms?: VFXUniforms

Custom uniform values to be passed to the post effect shader. Works the same way as element uniforms.