Skip to content

Ambilight effect for HTML video tag

License

Notifications You must be signed in to change notification settings

mir3z/ambilight.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ambilight.js

Ambilight effect for HTML.

Demos:

Quick Usage

import ambilight from "ambilight.js";

ambilight(document.querySelector("video"));

led and ambient are two possible strategies of performing the ambilight effect. They can be applied as the second argument to ambilight. The default one is led.

API

ambilight(video:HTMLVideoElement, [strategy:function])

strategy may be one of the following:

  • ambient(options:object)
    • options.strength:number, light strength, default: 1.1
    • options.spread:number, light spread, default: 60
  • led(options:object)
    • options.vertical:number - number vertical of light points, default: 6
    • options.horizontal:number - number horizontal of light points, default: 4

ambient duplicates input video, puts it behind the original video and applies blur CSS filter so that it looks like a glow.

led divides input video into options.horizontal × options.vertical areas aligned as a grid. Each area has assigned average color of the corresponsing video area. Each area glows with its own color via border-shadow CSS property. This gives more dynamic and smooth effect than ambient.

License

The MIT License (MIT). Copyright (c) 2018 mirz ([email protected])

Releases

No releases published

Packages

No packages published