https://github.com/wix-incubator/kampos
Tiny and fast effects compositor on WebGL
https://github.com/wix-incubator/kampos
filter-effects javascript transitions video webgl
Last synced: 3 months ago
JSON representation
Tiny and fast effects compositor on WebGL
- Host: GitHub
- URL: https://github.com/wix-incubator/kampos
- Owner: wix-incubator
- License: mit
- Created: 2019-06-19T07:39:49.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2025-03-13T13:02:38.000Z (4 months ago)
- Last Synced: 2025-03-24T22:34:35.976Z (3 months ago)
- Topics: filter-effects, javascript, transitions, video, webgl
- Language: JavaScript
- Homepage: https://wix-incubator.github.io/kampos
- Size: 9.53 MB
- Stars: 143
- Watchers: 55
- Forks: 11
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Filter_effects),
only using WebGL, which means it works everywhere!
## Intro
Read the [blog post](https://www.wix.engineering/post/introducing-kampos-a-tiny-and-fast-effects-compositor) introducing kampos on Wix Engineering Blog.
## Posts
CSS-Tricks: [Nailing That Cool Dissolve Transition](https://css-tricks.com/nailing-that-cool-dissolve-transition/)
## Demo
Check out the [live demo](https://wix-incubator.github.io/kampos/demo/).
## Documentation
For API reference and examples, read [the docs](https://wix-incubator.github.io/kampos/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:
```javascript
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:
```bash
npm install kampos
```
Import the default build:
```javascript
import { Kampos, Ticker, effects, transitions } from 'kampos';
```
Or take just what you need:
```javascript
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
```bash
npm install
npm run build
```
## Running tests
```bash
npm run test
```
## Contributing
Contributions are welcome! (:
## License
kampos is distributed under the MIT license.