Demo

React hooks

Compose useFrameSource and useAmbilight when you own the markup.

Install

npm install @videoglow/react

The glow canvas is the first child of this figure; the video and caption stay in normal flow.

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

'use client'
import { useState } from 'react'
import { useAmbilight, useFrameSource } from '@videoglow/react'
import { createVideoSource } from '@videoglow/video'

export const metadata = {
  title: 'React hooks',
  alternates: { canonical: '/react' },
}

export function Figure() {
  const [figure, setFigure] = useState<HTMLElement | null>(null)
  const [source, videoRef] = useFrameSource((video: HTMLVideoElement) => createVideoSource(video))
  useAmbilight({ container: figure, source, blur: 60 })
  return (
    <figure ref={setFigure}>
      <video ref={videoRef} src="/media/clip.webm" controls muted loop />
      <figcaption>Your caption</figcaption>
    </figure>
  )
}

Lifecycle

useFrameSource creates the source after the element mounts and disposes it on unmount. useAmbilight owns the engine and recreates it only when the container or source changes; option changes go through update(). Both behave under Strict Mode: the double effect run leaves one live instance.