'use client' import React, { ElementType, ReactNode, useEffect, useState, useRef, useMemo, useCallback } from "react"; // Improved type-safe class name utility const cn = (...inputs: (string | undefined | null | false)[]) => { return inputs.filter(Boolean).join(" "); }; export interface VideoTextProps { src: string; className?: string; autoPlay?: boolean; muted?: boolean; loop?: boolean; preload?: "auto" | "metadata" | "none"; children: ReactNode; fontSize?: string | number; fontWeight?: string | number; textAnchor?: "start" | "middle" | "end"; dominantBaseline?: "auto" | "middle" | "hanging" | "alphabetic" | "ideographic" | "text-bottom" | "text-top"; fontFamily?: string; as?: ElementType; letterSpacing?: string | number; lineHeight?: string | number; textTransform?: "none" | "uppercase" | "lowercase" | "capitalize"; onVideoLoad?: () => void; onVideoError?: (error: Event) => void; sources?: Array<{ src: string; type: string }>; poster?: string; } export function VideoText({ src, children, className = "", autoPlay = true, muted = true, loop = true, preload = "auto", fontSize = 18, fontWeight = "bold", textAnchor = "middle", dominantBaseline = "middle", fontFamily = "sans-serif", as: Component = "div", letterSpacing, textTransform = "none", onVideoLoad, onVideoError, sources = [], poster, }: VideoTextProps) { const [isVideoLoaded, setIsVideoLoaded] = useState(false); const videoRef = useRef(null); // Memoize content conversion to avoid unnecessary recalculations const content = useMemo(() => { return React.Children.toArray(children) .map(child => { if (typeof child === 'string' || typeof child === 'number') { return child; } return ''; }) .join(''); }, [children]); // Memoize SVG generation const svgMask = useMemo(() => { const responsiveFontSize = typeof fontSize === "number" ? `${fontSize}vw` : fontSize; // Escape special characters in content for SVG const escapedContent = content .replace(/&/g, '&') .replace(//g, '>') .replace(/"/g, '"') .replace(/'/g, '''); const svgString = ` `; return `url("data:image/svg+xml,${encodeURIComponent(svgString.trim())}")`; }, [content, fontSize, fontWeight, textAnchor, dominantBaseline, fontFamily, letterSpacing, textTransform]); // Handle video load const handleVideoLoad = useCallback(() => { setIsVideoLoaded(true); onVideoLoad?.(); }, [onVideoLoad]); // Handle video error const handleVideoError = useCallback((event: React.SyntheticEvent) => { console.error('Video failed to load:', event); onVideoError?.(event.nativeEvent); }, [onVideoError]); // Attempt to play video on mount (for browsers that block autoplay) useEffect(() => { if (videoRef.current && autoPlay) { videoRef.current.play().catch(error => { console.warn('Autoplay was prevented:', error); }); } }, [autoPlay]); return ( {/* Video container with mask */}

{/* Loading state (optional) */} {!isVideoLoaded && (

)} {/* Screen reader text */} {content} ); } // ----------------------------------------------------------------------------- // Enhanced Example App // ----------------------------------------------------------------------------- export default function Videotext() { return (

console.log('Video loaded successfully')} onVideoError={(error) => console.error('Video error:', error)} > Sera UI

); }

React Video Text Copy Page

Usage

React Video Text