{"version":3,"file":"HighlightReveal.CC2AwO2t.mjs","names":["useRef","useState"],"sources":["https:/framerusercontent.com/modules/ylJeir7ExYuTuKXFmlor/ZzlUR7tLneK6PoLNZZ0y/HighlightReveal.js"],"sourcesContent":["// Highlight Reveal - Animates a realistic marker scribble over headings or text as you scroll\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useRef,useEffect,useState,startTransition}from\"react\";import{motion,useInView,useAnimation}from\"framer-motion\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";/**\n * Highlight Reveal - Animates a realistic marker scribble over text as you scroll\n *\n * @framerSupportedLayoutWidth auto\n * @framerSupportedLayoutHeight auto\n */export default function HighlightReveal(props){const{text=\"Highlight this text\",highlightColor=\"#FFEB3B\",textColor=\"#000000\",font,highlightStyle=\"underline\",animationDuration=1.2,animationDelay=.2,strokeWidth=8,opacity=.7}=props;const containerRef=useRef(null);const isInView=useInView(containerRef,{once:true,margin:\"-20%\"});const controls=useAnimation();const isStatic=useIsStaticRenderer();const[textDimensions,setTextDimensions]=useState({width:0,height:0});useEffect(()=>{if(containerRef.current){const rect=containerRef.current.getBoundingClientRect();startTransition(()=>{setTextDimensions({width:rect.width,height:rect.height});});}},[text,font]);useEffect(()=>{if(isInView&&!isStatic){controls.start(\"visible\");}else if(isStatic){controls.set(\"visible\");}},[isInView,controls,isStatic]);const getHighlightPath=()=>{const{width,height}=textDimensions;const padding=strokeWidth/2;switch(highlightStyle){case\"underline\":return`M ${padding} ${height-padding} Q ${width*.3} ${height-padding-2} ${width*.6} ${height-padding+1} T ${width-padding} ${height-padding}`;case\"strikethrough\":return`M ${padding} ${height*.5} Q ${width*.25} ${height*.5-2} ${width*.5} ${height*.5+1} Q ${width*.75} ${height*.5-1} ${width-padding} ${height*.5}`;case\"circle\":const centerX=width/2;const centerY=height/2;const radiusX=(width-padding*2)/2;const radiusY=(height-padding*2)/2;return`M ${centerX-radiusX} ${centerY} Q ${centerX} ${centerY-radiusY-3} ${centerX+radiusX} ${centerY} Q ${centerX+radiusX+2} ${centerY+radiusY} ${centerX} ${centerY+radiusY+1} Q ${centerX-radiusX-2} ${centerY} ${centerX-radiusX} ${centerY}`;case\"box\":return`M ${padding} ${padding+2} Q ${width*.25} ${padding-1} ${width*.5} ${padding+1} Q ${width*.75} ${padding-1} ${width-padding} ${padding+2} L ${width-padding+1} ${height-padding-1} Q ${width*.75} ${height-padding+1} ${width*.5} ${height-padding-1} Q ${width*.25} ${height-padding+1} ${padding} ${height-padding-1} Z`;default:return\"\";}};const pathLength=getHighlightPath().length*.01;return /*#__PURE__*/_jsxs(\"div\",{ref:containerRef,style:{position:\"relative\",display:\"inline-block\",...props.style},children:[/*#__PURE__*/_jsx(\"span\",{style:{color:textColor,position:\"relative\",zIndex:1,...font},children:text}),textDimensions.width>0&&/*#__PURE__*/_jsxs(motion.svg,{style:{position:\"absolute\",top:0,left:0,width:textDimensions.width,height:textDimensions.height,pointerEvents:\"none\",zIndex:0},viewBox:`0 0 ${textDimensions.width} ${textDimensions.height}`,initial:\"hidden\",animate:controls,variants:{hidden:{opacity:0},visible:{opacity:1,transition:{delay:animationDelay}}},children:[/*#__PURE__*/_jsx(motion.path,{d:getHighlightPath(),stroke:highlightColor,strokeWidth:strokeWidth,fill:highlightStyle===\"box\"?highlightColor:\"none\",fillOpacity:highlightStyle===\"box\"?opacity*.3:0,strokeOpacity:opacity,strokeLinecap:\"round\",strokeLinejoin:\"round\",initial:{pathLength:0},animate:controls,variants:{hidden:{pathLength:0},visible:{pathLength:1,transition:{duration:animationDuration,ease:\"easeInOut\",delay:animationDelay}}},style:{filter:\"url(#roughPaper)\"}}),/*#__PURE__*/_jsx(\"defs\",{children:/*#__PURE__*/_jsxs(\"filter\",{id:\"roughPaper\",x:\"0%\",y:\"0%\",width:\"100%\",height:\"100%\",children:[/*#__PURE__*/_jsx(\"feTurbulence\",{baseFrequency:\"0.04\",numOctaves:\"5\",result:\"noise\",seed:\"1\"}),/*#__PURE__*/_jsx(\"feDisplacementMap\",{in:\"SourceGraphic\",in2:\"noise\",scale:\"1\"})]})})]})]});}addPropertyControls(HighlightReveal,{text:{type:ControlType.String,title:\"Text\",defaultValue:\"Highlight this text\"},highlightColor:{type:ControlType.Color,title:\"Highlight Color\",defaultValue:\"#FFEB3B\"},textColor:{type:ControlType.Color,title:\"Text Color\",defaultValue:\"#000000\"},font:{type:ControlType.Font,title:\"Font\",defaultValue:{fontSize:\"32px\",variant:\"Bold\",letterSpacing:\"-0.02em\",lineHeight:\"1.2em\"},controls:\"extended\",defaultFontType:\"sans-serif\"},highlightStyle:{type:ControlType.Enum,title:\"Highlight Style\",options:[\"underline\",\"strikethrough\",\"circle\",\"box\"],optionTitles:[\"Underline\",\"Strikethrough\",\"Circle\",\"Box\"],defaultValue:\"underline\",displaySegmentedControl:true},animationDuration:{type:ControlType.Number,title:\"Animation Duration\",defaultValue:1.2,min:.3,max:3,step:.1,unit:\"s\"},animationDelay:{type:ControlType.Number,title:\"Animation Delay\",defaultValue:.2,min:0,max:2,step:.1,unit:\"s\"},strokeWidth:{type:ControlType.Number,title:\"Stroke Width\",defaultValue:8,min:2,max:20,step:1,unit:\"px\"},opacity:{type:ControlType.Number,title:\"Opacity\",defaultValue:.7,min:.1,max:1,step:.1}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"HighlightReveal\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"auto\",\"framerSupportedLayoutWidth\":\"auto\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./HighlightReveal.map"],"mappings":"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"}