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.
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 })],
});You can find basic examples on the VFX-JS website.
Or visit VFX-JS Examples for more advanced use cases.
MIT