"use client"; import { useEffect, useId, useRef, useState, useSyncExternalStore, type ReactNode } from "react"; const reducedMotionQuery = "(prefers-reduced-motion: reduce)"; function subscribeToReducedMotion(callback: () => void) { const query = window.matchMedia(reducedMotionQuery); query.addEventListener("change", callback); return () => query.removeEventListener("change", callback); } function usePrefersReducedMotion(force?: boolean) { const prefersReducedMotion = useSyncExternalStore( subscribeToReducedMotion, () => window.matchMedia(reducedMotionQuery).matches, () => false ); return Boolean(force) || prefersReducedMotion; } type VideoMaskWordmarkProps = { /** Word cut out of the surface. The video only shows through its letters. */ word?: string; /** Muted, looping video shown inside the letters. */ videoSrc?: string; /** Still frame shown before playback and under reduced motion. */ poster?: string; /** Optional supporting line under the wordmark. */ description?: ReactNode; /** Fill of the surface around the letters. Defaults to stone-100 in light and stone-950 in dark. */ surfaceColor?: string; className?: string; /** Disables autoplay and the fallback drift, even when the OS allows motion. */ reducedMotion?: boolean; }; export function VideoMaskWordmark({ word = "Tidal", videoSrc, poster, description, surfaceColor, className = "", reducedMotion, }: VideoMaskWordmarkProps) { const shouldReduceMotion = usePrefersReducedMotion(reducedMotion); const maskId = "wordmark-mask-" + useId().replace(/[^a-zA-Z0-9_-]/g, ""); const videoRef = useRef(null); const fallbackRef = useRef(null); const [userPaused, setUserPaused] = useState(null); const paused = userPaused ?? shouldReduceMotion; const fontSize = Math.min(460, Math.round(2400 / Math.max(Array.from(word).length, 1))); useEffect(() => { const video = videoRef.current; if (!video) return; try { if (paused) { video.pause(); return; } const playback = video.play(); if (playback) playback.catch(() => undefined); } catch { // Media playback is unavailable in this environment. } }, [paused, videoSrc]); useEffect(() => { const layer = fallbackRef.current; if (!layer || paused || typeof layer.animate !== "function") return; const animation = layer.animate( [ { transform: "translate3d(-10%, 0, 0) scale(1.2)" }, { transform: "translate3d(10%, -4%, 0) scale(1.3)" }, ], { duration: 9000, direction: "alternate", easing: "ease-in-out", iterations: Infinity } ); return () => animation.cancel(); }, [paused, videoSrc]); return (

{word}

{videoSrc ? (

); }