Module @vfx-js/effects

@vfx-js/effects

Prebuilt WebGL effects for @vfx-js/core.

Install

npm install @vfx-js/core @vfx-js/effects

Usage

import { VFX } from "@vfx-js/core";
import { BloomEffect } from "@vfx-js/effects";

const vfx = new VFX();
const img = document.querySelector("img");
const effect = new BloomEffect({ threshold: 0.2, intensity: 5 });
await vfx.add(img, { effect });

Chain multiple effects:

import {
    BloomEffect,
    PixelateEffect,
    ScanlineEffect,
} from "@vfx-js/effects";

await vfx.add(img, {
    effect: [
        new PixelateEffect({ size: 10 }),
        new ScanlineEffect({ spacing: 5 }),
        new BloomEffect({ intensity: 10 }),
    ],
});

Effects

Effect	Description
`AsciiEffect`	ASCII / glyph mosaic from a dark→light character ramp
`BloomEffect`	COD:AW-style bloom pyramid with soft-knee threshold
`FluidEffect`	Stable-Fluids advection driven by pointer events
`HalftoneEffect`	RGB / CMYK halftone screen with configurable ink presets
`JPEGGlitchEffect`	Real codec-level JPEG glitch — corrupts the encoded byte stream
`MatrixEffect`	Matrix-movie digital rain — random glyphs over the source grayscale
`ParticleEffect`	Mouse-emitter GPU particles, skips transparent source regions
`ParticleExplodeEffect`	One-shot curl-noise burst that shatters the source element
`VoronoiEffect`	Voronoi cells shrunken in a halo around the cursor
`PixelateEffect`	Nearest-neighbour pixelation
`PixelSortEffect`	Threshold pixel sort, with optional arbitrary sort angle
`ScanlineEffect`	CRT scanline overlay