videoglow

Demo

Core without React

The engine driven from plain DOM code.

@videoglow/core@videoglow/video

Install

npm install @videoglow/core
npm install @videoglow/video

Engine state

running
false
sampling
false
visible
false
source
none / -
frames rendered
0
frames skipped (fps cap)
0
buffer
0x0
last render
0.000 ms
average render
0.000 ms
render errors
0

Usage

import { createAmbilight } from '@videoglow/core'
import { createVideoSource } from '@videoglow/video'

export const metadata = {
  title: 'Core without React',
  alternates: { canonical: '/core' },
}

const video = document.querySelector('video')
const container = video.parentElement // positioned box around the video

const source = createVideoSource(video)
const ambilight = createAmbilight({ container, source, blur: 90 })

// later
ambilight.update({ blur: 40 })
ambilight.dispose()
source.dispose()

Contract

The engine mounts a canvas as the first child of the container, makes the container a positioned, isolated stacking context, and draws frames from any FrameSource. It never reads pixels back, so cross-origin video without CORS headers works. Dispose the engine and the source explicitly.