Skip to content
Tiny and fast effects compositor on WebGL
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
docs Bump docs version Oct 22, 2019
src Change mediump to highp Nov 9, 2019
test Implemented turbulence effect, luminance-to-alpha mask, sourceless re… Sep 24, 2019
.babelrc Publish a babelfied index.js Aug 7, 2019
.editorconfig
.gitignore Add everything we have Jun 24, 2019
.travis.yml
LICENSE Add everything we have Jun 24, 2019
README.md Add intro post to README Sep 27, 2019
documentation.yml Implemented turbulence effect, luminance-to-alpha mask, sourceless re… Sep 24, 2019
index.html
index.js
kampos.svg
package.json 0.3.5 Nov 9, 2019
rollup.config.js

README.md

kampos Build Status

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.

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 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';

Building locally

npm install
npm run build

Running tests

npm run test

Contributing

Contributions are welcome! (:

License

kampos is distributed under the MIT license.

You can’t perform that action at this time.