Demo

Configuration

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

Install

npm install @videoglow/react-video

Controls

blur (px): 80opacity: 0.5saturation: 3brightness: 1scale: 1.15fps cap (0 = uncapped): 30buffer resolution (px): 160

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

{
  "blur": 80,
  "opacity": 0.5,
  "saturation": 3,
  "brightness": 1,
  "scale": 1.15,
  "fps": 30,
  "resolution": 160
}

Notes

Style values (blur, opacity, saturation, brightness, scale) are CSS on the glow layer and cost nothing per frame. Buffer resolution is the long edge of the internal canvas; 160 px is visually indistinguishable from full resolution under an 80 px blur. The fps cap bounds sampling regardless of the video frame rate.