"use client" import React, { ElementType, ReactNode, useEffect, useState } from "react" import { cn } from "@/lib/utils" export interface VideoTextProps { /** * The video source URL */ src: string /** * Additional className for the container */ className?: string /** * Whether to autoplay the video */ autoPlay?: boolean /** * Whether to mute the video */ muted?: boolean /** * Whether to loop the video */ loop?: boolean /** * Whether to preload the video */ preload?: "auto" | "metadata" | "none" /** * The content to display (will have the video "inside" it) */ children: ReactNode /** * Font size for the text mask (in viewport width units) * @default 10 */ fontSize?: string | number /** * Font weight for the text mask * @default "bold" */ fontWeight?: string | number /** * Text anchor for the text mask * @default "middle" */ textAnchor?: string /** * Dominant baseline for the text mask * @default "middle" */ dominantBaseline?: string /** * Font family for the text mask * @default "sans-serif" */ fontFamily?: string /** * The element type to render for the text * @default "div" */ as?: ElementType } export function VideoText({ src, children, className = "", autoPlay = true, muted = true, loop = true, preload = "auto", fontSize = 20, fontWeight = "bold", textAnchor = "middle", dominantBaseline = "middle", fontFamily = "sans-serif", as: Component = "div", }: VideoTextProps) { const [svgMask, setSvgMask] = useState("") const content = React.Children.toArray(children).join("") useEffect(() => { const updateSvgMask = () => { const responsiveFontSize = typeof fontSize === "number" ? `${fontSize}vw` : fontSize const newSvgMask = `` setSvgMask(newSvgMask) } updateSvgMask() window.addEventListener("resize", updateSvgMask) return () => window.removeEventListener("resize", updateSvgMask) }, [content, fontSize, fontWeight, textAnchor, dominantBaseline, fontFamily]) const dataUrlMask = `url("data:image/svg+xml,${encodeURIComponent(svgMask)}")` return ( {/* Create a container that masks the video to only show within text */}

{/* Add a backup text element for SEO/accessibility */} {content} ) }

Video Text

Instalação