Backlight

import { useEffect, useRef } from 'react';

// Blur erases detail, so a tiny frame carries all the color the glow needs.
const GLOW = { width: 64, height: 36 };
const UPDATE_MS = 250;

export function BacklitVideo({ src, poster }: { src: string; poster: string }) {
  const videoRef = useRef<HTMLVideoElement>(null);
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    const video = videoRef.current;
    const context = canvasRef.current?.getContext('2d');
    if (!video || !context) return;
    const reduceMotion = window.matchMedia(
      '(prefers-reduced-motion: reduce)'
    ).matches;
    let timer = 0;
    const paint = () => context.drawImage(video, 0, 0, GLOW.width, GLOW.height);
    const start = () => {
      paint();
      // Reduced motion keeps one still glow instead of a shifting one.
      if (!reduceMotion) timer = window.setInterval(paint, UPDATE_MS);
    };
    const stop = () => window.clearInterval(timer);

    video.addEventListener('loadeddata', paint);
    video.addEventListener('play', start);
    video.addEventListener('pause', stop);
    return () => {
      stop();
      video.removeEventListener('loadeddata', paint);
      video.removeEventListener('play', start);
      video.removeEventListener('pause', stop);
    };
  }, []);

  return (
    <div className='relative aspect-video w-full max-w-3xl'>
      <canvas
        ref={canvasRef}
        width={GLOW.width}
        height={GLOW.height}
        aria-hidden
        className='absolute inset-0 size-full scale-110 opacity-80 blur-3xl saturate-180'
      />
      <video
        ref={videoRef}
        src={src}
        poster={poster}
        controls
        playsInline
        className='relative size-full rounded-2xl bg-black object-cover'
      />
    </div>
  );
}