videoglow
videoglow

Ambient light for the web's moving pictures.

Ambilight style glow for video, canvas and YouTube. Framework-agnostic core with React integrations.

See it runGitHubnpm

Install

pnpm add @videoglow/react-video    # native <video>
pnpm add @videoglow/react-youtube  # YouTube
pnpm add @videoglow/core           # engine only, no React

Core first

A framework-agnostic engine samples frames into a small canvas. React, video, canvas and YouTube plug into it.

Blur on the compositor

The glow is a CSS filter on a 160 px buffer. No pixels are read back, so cross-origin media just works.

Frame-aware sampling

requestVideoFrameCallback drives the glow; a 30 fps cap and visibility gating keep the main thread idle.

Honest about YouTube

Iframe pixels cannot be read. A muted second player follows the visible one through an explicit drift policy.

Sources

Native video

A <video> element with the glow behind it, driven by requestVideoFrameCallback.

@videoglow/react-video

Canvas source

Any canvas you draw into becomes a frame source, continuous or on demand.

@videoglow/react

YouTube

Two synchronized IFrame players with an observable drift policy.

@videoglow/react-youtube

Integration

React hooks

Compose useFrameSource and useAmbilight when you own the markup.

@videoglow/react

Core without React

The engine driven from plain DOM code.

@videoglow/core

Configuration

Live controls for blur, opacity, saturation, scale, fps and buffer resolution.

@videoglow/react-video

Validation

Performance

Measure render cost per frame across buffer resolutions and sampling rates.

@videoglow/core

Baseline comparison

The original full-resolution pipeline compared with the new small-buffer pipeline.

@videoglow/react-video

react-ambilight 1.x API

The compatibility package running on the new implementation.

react-ambilight