kampos lets you add filter effects and beautiful transitions to video and images (or any other media). Just like SVG filter effects, only using WebGL, which means it works everywhere!

Read the blog post introducing kampos on Wix Engineering Blog.

Check out the live demo.

For API reference and examples, read the docs.

• Filter effects for images and videos that you can mix and compose.
• As tiny as ~4KB (minified and gzipped).
• Core engine for creating and running effects.
• Plugins for effects and transitions - available for import.
• Custom plugins? Extremely easy by using the effects/transitions descriptors DSL.

Here's a simple example for using kampos:

import {Kampos, effects} from 'kampos';

const target = document.querySelector('canvas');
const media = document.querySelector('video');

const hueSaturation = effects.hueSaturation();
hueSaturation.hue = 90;

const kampos = new Kampos({target, effects: [hueSaturation]});

kampos.setSource(media);
kampos.play();

Grab the source from here, or install via package manager.

npm install kampos

Import the default build:

import {Kampos, Ticker, effects, transitions} from 'kampos';

Or take just what you need:

import Kampos from './node_modules/kampos/src/kampos';
import duotone from './node_modules/kampos/src/effects/duotone';
import displacement from './node_modules/kampos/src/effects/displacement';

npm install
npm run build

npm run test

Contributions are welcome! (:

kampos is distributed under the MIT license.