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

Class

JPEGGlitchEffect

import { JPEGGlitchEffect } from "@vfx-js/effects";

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.

Mutate params directly or via setParams. With speed: 0 the effect settles on a single stable glitched frame and only re-glitches when params change; with speed > 0 it keeps re-corrupting for a live, animated glitch.

Note: the encode/decode round trip is asynchronous and runs off the render loop. The source passes through until the first result lands.

Implements: Effect
Interface members: enableddisposeinitrenderupdate

Constructors

new JPEGGlitchEffect()

new JPEGGlitchEffect(initial?: Partial<JPEGGlitchParams> = {}): JPEGGlitchEffect

Properties

params

params: JPEGGlitchParams

Accessors

producedFrames

get producedFrames(): number

Count of decoded glitch results produced so far.

Methods

setParams

setParams(updates: Partial<JPEGGlitchParams>): void