JSPM

Cinematic - Add cinematic effects to your videos!

Features 🤘

• 🌟 Modern bundle.
• 🔩 Ultra tiny (less than 1kb compressed)
• 👌 Minimalistic and straight-forward API.
• ⚡ Performant - uses only native browser features to achieve the affect!
• ✔ Zero dependencies.

Usage

Install it using your preferred package manager (taking npm as example):

npm install cinematic-effect

Your HTML:

<div id="container">
  <canvas id="background"></canvas>
  <video id="video" src="..."></video>
</div>

Your TypeScript:

import { createCinematicEffect } from 'cinematic-effect';

const destroy = createCinematicEffect({
  target: '#background', // Canvas to project effect onto
  src: '#video' // Source video element or selector
});

Your CSS:

This library is mainly taking care of creating a smooth effect and syncing the frames, the final effect is applied by you using css properties!

#container {
    display: flex;
    position: relative;
}

#background {
    position: absolute;
    z-index: -1;
    opacity: 0.75;
    transform: scale(1.05);
    filter: blur(45px);
    width: 100%;
    height: 100%;
}

Check out the demo for a full-fledged demo!