VFX-JS - Visual Effects Framework for Web #VFXJS

WebGL effects for HTML.

TRY EFFECTS

VFX-JS applies WebGL effects to any HTML element. Not just <img> and <video>, but also plain text, links, , and more.

SCROLL TO EXPLORE ↓ @vfx-js/effects

How it looks

Write a line. See it run.

01 — One line

Pick a preset

vfx.add(logo, { shader: "glitch", overflow: 60 });

live · glitch

02 — Effects

Chain prebuilt effects

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

vfx.add(img, {
    effect: [
        new PixelateEffect({ size: 6 }),
        new BloomEffect({ threshold: 0.2, intensity: 4 }),
    ],
});

live · Pixelate → Bloom

03 — Your shader

Write GLSL

const shader = `
precision highp float;
uniform sampler2D src;
uniform vec2 resolution;
uniform vec2 offset;
uniform float time;
out vec4 outColor;

void main() {
    vec2 uv = (gl_FragCoord.xy - offset) / resolution;
    uv.x += sin(uv.y * 24.0 + time * 3.0) * 0.01;
    vec4 color = texture(src, uv);

    // Map brightness to two colors.
    float l = dot(color.rgb, vec3(0.299, 0.587, 0.114));
    vec3 duo = mix(vec3(0.15, 0.0, 0.35), vec3(1.0, 0.55, 0.95), l);
    outColor = vec4(duo, color.a);
}
`;

vfx.add(img, { shader });

live · custom shader

Why VFX-JS

Your real elements,
through a shader.

Images, videos, text, any element. VFX-JS copies them into WebGL and draws them on one canvas over the page. Your markup stays, so layout, links and screen readers work as usual.

How it works →