@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 |

See the Storybook demos for live examples.

License

MIT