wix-incubator
kampos
Tiny and fast effects compositor on WebGL
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!
Intro
Read the blog post introducing kampos on Wix Engineering Blog.
Posts
CSS-Tricks: Nailing That Cool Dissolve Transition
Demo
Check out the live demo.
Documentation
For API reference and examples, read the docs.
Features
- 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.
Usage
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();Getting started
Grab the source from here, or install via package manager.
npm example:
npm install kamposImport 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';Building locally
npm install
npm run buildRunning tests
npm run testContributing
Contributions are welcome! (:
License
kampos is distributed under the MIT license.