VFX-JS is a JavaScript library to add WebGL-powered effects to your website. You can easily attach it to normal <img>, <video> elements etc.

See also @vfx-js/react for React bindings.

Usage

Install via npm:

npm i @vfx-js/core

Then create VFX object in your script:

import { VFX } from '@vfx-js/core';

const img = document.querySelector('#img');

const vfx = new VFX();
vfx.add(img, { shader: "glitch", overflow: 100 });

Or compose prebuilt effects from @vfx-js/effects:

import { VFX } from '@vfx-js/core';
import { BloomEffect, PixelateEffect } from '@vfx-js/effects';

const vfx = new VFX();
vfx.add(img, {
    effect: [new PixelateEffect({ size: 10 }), new BloomEffect({ intensity: 5 })],
});

Examples

You can find basic examples on the VFX-JS website. Or visit VFX-JS Examples for more advanced use cases.

• https://amagi.dev/vfx-js/
• https://amagi.dev/vfx-js/examples

Author

AMAGI

LICENSE

MIT