WebGL effects made easy.
animationanimationscreative-codingfrontendfrontend-webglslimage-effectimage-effectsjavascriptpost-processingreactshader
主要指標
スター成長
スター
1.1k
フォーク
37
週間成長
+5
Issue
7
5001k
25年9月25年11月26年1月26年3月26年5月26年7月26年9月
成果物npm
README
VFX-JS: Visual Effects Framework for Web
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.
Author
LICENSE
MIT
関連リポジトリ