{"version":3,"file":"TextVideoMask.WCDbj5bG.mjs","names":["useId","useRef","useState"],"sources":["https:/framerusercontent.com/modules/JldTOFQ9BZ5cj2lWO5qM/WzQrgagZgwbeUlAKyxcH/TextVideoMask.js"],"sourcesContent":["// Video mask component that uses text to mask a video. The text scales\n// uniformly to fill 100% of the component width while keeping its natural\n// height ratio (no vertical stretching).\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import{useRef,useState,useLayoutEffect,useId}from\"react\";/**\n * @framerIntrinsicWidth 1080\n * @framerIntrinsicHeight 600\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n */export default function TextVideoMask(props){const{useVideoFile=true,videoFile=\"https://framerusercontent.com/assets/MLWPbW1dUQawJLhhun3dBwpgJak.mp4\",videoUrl=\"https://framerusercontent.com/assets/MLWPbW1dUQawJLhhun3dBwpgJak.mp4\",text=\"VIDEO\",font,textColor=\"#FFFFFF\",backgroundColor=\"#000000\",autoplay=true,loop=true,muted=true}=props;const uid=useId().replace(/:/g,\"\");const maskId=`video-mask-${uid}`;const videoSource=useVideoFile?videoFile:videoUrl;const fontFamily=font?.fontFamily||\"Inter\";const fontWeight=font?.fontWeight||700;const fontStyle=font?.fontStyle||\"normal\";const letterSpacing=font?.letterSpacing||\"-0.02em\";const measureRef=useRef(null);// viewBox tracks the natural size of the text. Because the SVG keeps this\n// aspect ratio and uses preserveAspectRatio=\"xMidYMid meet\", the text\n// scales UNIFORMLY to fill the width without vertical distortion.\nconst[box,setBox]=useState({width:1080,height:200});useLayoutEffect(()=>{const node=measureRef.current;if(!node)return;try{const bbox=node.getBBox();if(bbox.width>0&&bbox.height>0){setBox({width:bbox.width,height:bbox.height});}}catch(e){// getBBox can throw before first paint; it retries on the next pass\n}},[text,fontFamily,fontWeight,fontStyle,letterSpacing]);const aspect=box.width/box.height;return /*#__PURE__*/_jsxs(\"div\",{style:{position:\"relative\",width:\"100%\",height:\"100%\",backgroundColor,overflow:\"hidden\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\"},children:[/*#__PURE__*/_jsx(\"svg\",{\"aria-hidden\":true,style:{position:\"absolute\",width:0,height:0,overflow:\"hidden\",pointerEvents:\"none\"},children:/*#__PURE__*/_jsx(\"text\",{ref:measureRef,x:0,y:0,style:{fontSize:\"100px\",fontFamily,fontWeight,fontStyle,letterSpacing},children:text})}),/*#__PURE__*/_jsxs(\"svg\",{viewBox:`0 0 ${box.width} ${box.height}`,preserveAspectRatio:\"xMidYMid meet\",style:{display:\"block\",width:\"100%\",height:`calc(100% / ${aspect})`,maxHeight:\"100%\"},children:[/*#__PURE__*/_jsx(\"defs\",{children:/*#__PURE__*/_jsxs(\"mask\",{id:maskId,children:[/*#__PURE__*/_jsx(\"rect\",{x:0,y:0,width:box.width,height:box.height,fill:\"black\"}),/*#__PURE__*/_jsx(\"text\",{x:box.width/2,y:box.height/2,textAnchor:\"middle\",dominantBaseline:\"central\",fill:\"white\",style:{fontSize:\"100px\",fontFamily,fontWeight,fontStyle,letterSpacing},children:text})]})}),/*#__PURE__*/_jsx(\"foreignObject\",{x:0,y:0,width:box.width,height:box.height,mask:`url(#${maskId})`,children:/*#__PURE__*/_jsx(\"video\",{src:videoSource,autoPlay:autoplay,loop:loop,muted:muted,playsInline:true,// @ts-ignore - xmlns required for HTML inside foreignObject\nxmlns:\"http://www.w3.org/1999/xhtml\",style:{width:\"100%\",height:\"100%\",objectFit:\"cover\",display:\"block\",backgroundColor:textColor}})})]})]});}addPropertyControls(TextVideoMask,{useVideoFile:{type:ControlType.Boolean,title:\"Video\",defaultValue:true,enabledTitle:\"Upload\",disabledTitle:\"URL\"},videoFile:{type:ControlType.File,allowedFileTypes:[\"mp4\",\"webm\",\"mov\"],title:\"Upload\",hidden:({useVideoFile})=>!useVideoFile},videoUrl:{type:ControlType.String,title:\"Video URL\",defaultValue:\"https://framerusercontent.com/assets/MLWPbW1dUQawJLhhun3dBwpgJak.mp4\",placeholder:\"Enter video URL...\",hidden:({useVideoFile})=>useVideoFile},text:{type:ControlType.String,title:\"Mask Text\",defaultValue:\"VIDEO\"},font:{type:ControlType.Font,title:\"Text Font\",defaultValue:{fontSize:\"200px\",variant:\"Bold\",letterSpacing:\"-0.02em\",lineHeight:\"1em\",textAlign:\"center\"},controls:\"extended\",defaultFontType:\"sans-serif\"},textColor:{type:ControlType.Color,title:\"Text Color\",defaultValue:\"#FFFFFF\"},backgroundColor:{type:ControlType.Color,title:\"Background Color\",defaultValue:\"#000000\"},autoplay:{type:ControlType.Boolean,title:\"Autoplay\",defaultValue:true,enabledTitle:\"On\",disabledTitle:\"Off\"},loop:{type:ControlType.Boolean,title:\"Loop\",defaultValue:true,enabledTitle:\"On\",disabledTitle:\"Off\"},muted:{type:ControlType.Boolean,title:\"Muted\",defaultValue:true,enabledTitle:\"On\",disabledTitle:\"Off\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"TextVideoMask\",\"slots\":[],\"annotations\":{\"framerIntrinsicWidth\":\"1080\",\"framerSupportedLayoutHeight\":\"any\",\"framerSupportedLayoutWidth\":\"any\",\"framerIntrinsicHeight\":\"600\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./TextVideoMask.map"],"mappings":"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"}