Video text

import { useRef, useState } from 'react';
import { useReducedMotion } from 'motion/react';

type VideoTextProps = { src: string; poster: string; word?: string };

export function VideoTextHero({ src, poster, word = 'Explore' }: VideoTextProps) {
  const reduceMotion = useReducedMotion();
  const video = useRef<HTMLVideoElement>(null);
  const [playing, setPlaying] = useState(true);

  function toggle() {
    if (playing) video.current?.pause();
    else void video.current?.play();
    setPlaying(!playing);
  }

  return (
    <section className='relative isolate h-72 overflow-hidden rounded-2xl'>
      {reduceMotion ? (
        <img src={poster} alt='' className='absolute inset-0 size-full object-cover' />
      ) : (
        <video
          ref={video}
          src={src}
          poster={poster}
          autoPlay
          muted
          loop
          playsInline
          className='absolute inset-0 size-full object-cover'
        />
      )}
      {/* The page color with dark letters on top. Screen blending keeps the
          light parts and lets the footage through the dark letters. Dark mode
          flips both colors and multiplies instead. */}
      <h2 className='relative grid size-full place-items-center bg-white text-[120px] leading-none font-black tracking-tighter text-black uppercase mix-blend-screen dark:bg-black dark:text-white dark:mix-blend-multiply'>
        {word}
      </h2>
      {!reduceMotion && (
        <button
          type='button'
          onClick={toggle}
          className='absolute right-3 bottom-3 rounded-full bg-black/60 px-3 py-1 text-xs font-medium text-white'
        >
          {playing ? 'Pause' : 'Play'}
        </button>
      )}
    </section>
  );
}