{"version":3,"file":"TextHoverEffect.DHYMhHyl.mjs","names":["useRef","useState","useMemo","_Fragment"],"sources":["https:/framerusercontent.com/modules/neq8pommCmGZjqbZw9Qx/IvEyFBgkl2xWYyUgqLms/TextHoverEffect.js"],"sourcesContent":["// Text Hover Effect - Bản sửa lỗi lệch khung Left/Center/Right và không gian ViewBox (Bản Chuẩn 100%)\nimport{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from\"react/jsx-runtime\";import{useState,useRef,useEffect,useMemo}from\"react\";import{addPropertyControls,ControlType}from\"framer\";import{motion}from\"framer-motion\";export default function TextHoverEffect(props){const{text=\"SUNNY LAB\",duration=0,maskRadius=20,strokeWidth=.5,fontSize=70,textAlign=\"center\",tickerFont,backgroundStroke=\"#757171\",gradientColor1=\"#eab308\",gradientColor2=\"#ef4444\",gradientColor3=\"#3b82f6\",gradientColor4=\"#06b6d4\",gradientColor5=\"#8b5cf6\",strokeAnimationDuration=3,linkUrl=\"\",openInNewTab=false,style}=props;const svgRef=useRef(null);const textMeasureRef=useRef(null);const[cursor,setCursor]=useState({x:0,y:0});const[hovered,setHovered]=useState(false);const[maskPosition,setMaskPosition]=useState({cx:\"50%\",cy:\"50%\"});// Khởi tạo một viewBox mặc định đủ rộng\nconst[viewBox,setViewBox]=useState(\"0 0 600 150\");useEffect(()=>{if(textMeasureRef.current){// ĐO ĐẠC TUYỆT ĐỐI: Đo chuỗi ký tự dựa trên một text-anchor cố định (\"start\")\n// để lấy được kích thước thực tế tuyệt đối, không bị nhảy BBox theo TextAlign.\nconst bbox=textMeasureRef.current.getBBox();// Tạo khoảng đệm an toàn bao quanh để ôm trọn nét Stroke, đặc biệt chiều dọc cho chữ G\nconst paddingX=fontSize*.8;const paddingY=fontSize*1;// Tinh chỉnh ViewBox bao khít cái hộp văn bản tuyệt đối đó\nconst x=bbox.x-paddingX/2;const y=bbox.y-paddingY/2;const width=bbox.width+paddingX;const height=bbox.height+paddingY;setViewBox(`${x} ${y} ${width} ${height}`);}},[text,fontSize,tickerFont]);useEffect(()=>{if(svgRef.current&&cursor.x!==0&&cursor.y!==0){const svgRect=svgRef.current.getBoundingClientRect();const cxPercentage=(cursor.x-svgRect.left)/svgRect.width*100;const cyPercentage=(cursor.y-svgRect.top)/svgRect.height*100;setMaskPosition({cx:`${cxPercentage}%`,cy:`${cyPercentage}%`});}},[cursor]);const hasLink=linkUrl&&linkUrl.trim()!==\"\";const handleContainerClick=()=>{if(hasLink){if(openInNewTab){window.open(linkUrl,\"_blank\",\"noopener,noreferrer\");}else{window.location.href=linkUrl;}}};// Xác định bộ CSS Flexbox bọc ngoài để ép lề component tuân thủ lề thiết kế\nconst justifyParent=textAlign===\"left\"?\"flex-start\":textAlign===\"right\"?\"flex-end\":\"center\";// Gộp style font\nconst svgTextStyle=useMemo(()=>{return{...tickerFont,fontSize:`${fontSize}px`,userSelect:\"none\"};},[tickerFont,fontSize]);return /*#__PURE__*/_jsx(\"div\",{style:{...style,width:style?.width||\"100%\",height:style?.height||\"auto\",backgroundColor:\"transparent\",display:\"flex\",justifyContent:justifyParent,alignItems:\"center\",cursor:hasLink?\"pointer\":\"default\",overflow:\"visible\"},onClick:handleContainerClick,children:/*#__PURE__*/_jsxs(\"svg\",{ref:svgRef,width:\"100%\",height:\"100%\",viewBox:viewBox,xmlns:\"http://www.w3.org/2000/svg\",onMouseEnter:()=>setHovered(true),onMouseLeave:()=>setHovered(false),onMouseMove:e=>setCursor({x:e.clientX,y:e.clientY}),style:{display:\"block\",overflow:\"visible\",maxWidth:\"100%\"},children:[/*#__PURE__*/_jsxs(\"defs\",{children:[/*#__PURE__*/_jsx(\"text\",{ref:textMeasureRef,x:\"0\",y:\"0\",textAnchor:\"start\",dominantBaseline:\"alphabetic\",style:svgTextStyle,fill:\"none\",stroke:\"none\",children:text}),/*#__PURE__*/_jsx(\"linearGradient\",{id:\"textGradient\",gradientUnits:\"userSpaceOnUse\",x1:\"0%\",y1:\"0%\",x2:\"100%\",y2:\"0%\",children:hovered&&/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(\"stop\",{offset:\"0%\",stopColor:gradientColor1}),/*#__PURE__*/_jsx(\"stop\",{offset:\"25%\",stopColor:gradientColor2}),/*#__PURE__*/_jsx(\"stop\",{offset:\"50%\",stopColor:gradientColor3}),/*#__PURE__*/_jsx(\"stop\",{offset:\"75%\",stopColor:gradientColor4}),/*#__PURE__*/_jsx(\"stop\",{offset:\"100%\",stopColor:gradientColor5})]})}),/*#__PURE__*/_jsxs(motion.radialGradient,{id:\"revealMask\",gradientUnits:\"userSpaceOnUse\",r:`${maskRadius}%`,initial:{cx:\"50%\",cy:\"50%\"},animate:maskPosition,transition:{duration:duration,ease:\"easeOut\"},children:[/*#__PURE__*/_jsx(\"stop\",{offset:\"0%\",stopColor:\"white\"}),/*#__PURE__*/_jsx(\"stop\",{offset:\"100%\",stopColor:\"black\"})]}),/*#__PURE__*/_jsx(\"mask\",{id:\"textMask\",children:/*#__PURE__*/_jsx(\"rect\",{x:\"-50%\",y:\"-50%\",width:\"200%\",height:\"200%\",fill:\"url(#revealMask)\"})})]}),/*#__PURE__*/_jsx(\"text\",{x:\"0\",y:\"0\",textAnchor:\"start\",dominantBaseline:\"alphabetic\",strokeWidth:strokeWidth,fill:\"transparent\",stroke:backgroundStroke,style:{...svgTextStyle,opacity:hovered?.4:.15,transition:\"opacity 0.3s ease\"},children:text}),/*#__PURE__*/_jsx(motion.text,{x:\"0\",y:\"0\",textAnchor:\"start\",dominantBaseline:\"alphabetic\",strokeWidth:strokeWidth,fill:\"transparent\",stroke:backgroundStroke,style:svgTextStyle,initial:{strokeDashoffset:1e3,strokeDasharray:1e3},animate:{strokeDashoffset:0,strokeDasharray:1e3},transition:{duration:strokeAnimationDuration,ease:\"easeInOut\"},children:text}),/*#__PURE__*/_jsx(\"text\",{x:\"0\",y:\"0\",textAnchor:\"start\",dominantBaseline:\"alphabetic\",stroke:\"url(#textGradient)\",strokeWidth:strokeWidth*1.4,mask:\"url(#textMask)\",fill:\"transparent\",style:svgTextStyle,children:text})]})});}addPropertyControls(TextHoverEffect,{text:{type:ControlType.String,title:\"Text\",defaultValue:\"SUNNY LAB\"},linkUrl:{type:ControlType.String,title:\"Link URL\",placeholder:\"/portfolio hoặc https://...\",defaultValue:\"\"},openInNewTab:{type:ControlType.Boolean,title:\"New Tab\",defaultValue:false},tickerFont:{type:ControlType.Font,title:\"Font Family\",controls:\"display\",defaultFontType:\"sans-serif\"},fontSize:{type:ControlType.Number,title:\"Font Size\",defaultValue:70,min:20,max:200,step:1,unit:\"px\"},textAlign:{type:ControlType.Enum,title:\"Align\",defaultValue:\"center\",options:[\"left\",\"center\",\"right\"],optionTitles:[\"Left\",\"Center\",\"Right\"]},strokeWidth:{type:ControlType.Number,title:\"Stroke Width\",defaultValue:.5,min:.1,max:3,step:.1},backgroundStroke:{type:ControlType.Color,title:\"Background Stroke\",defaultValue:\"#757171\"},maskRadius:{type:ControlType.Number,title:\"Mask Radius\",defaultValue:20,min:5,max:50,step:1,unit:\"%\"},duration:{type:ControlType.Number,title:\"Mask Delay\",defaultValue:0,min:0,max:1,step:.1,unit:\"s\"},strokeAnimationDuration:{type:ControlType.Number,title:\"Intro Draw Speed\",defaultValue:3,min:.5,max:10,step:.5,unit:\"s\"},gradientColor1:{type:ControlType.Color,title:\"Color 1\",defaultValue:\"#eab308\"},gradientColor2:{type:ControlType.Color,title:\"Color 2\",defaultValue:\"#ef4444\"},gradientColor3:{type:ControlType.Color,title:\"Color 3\",defaultValue:\"#3b82f6\"},gradientColor4:{type:ControlType.Color,title:\"Color 4\",defaultValue:\"#06b6d4\"},gradientColor5:{type:ControlType.Color,title:\"Color 5\",defaultValue:\"#8b5cf6\"}});TextHoverEffect.displayName=\"Text Hover Effect\";\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"TextHoverEffect\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./TextHoverEffect.map"],"mappings":"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"}