{"version":3,"file":"ClickHereArrowLoop.17MDKyG9.mjs","names":["useRef","useMemo"],"sources":["https:/framerusercontent.com/modules/uhhaltCg7mpm4i7zQtuu/hWMzex0IOhqaCKtf5fiB/ClickHereArrowLoop.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{useEffect,useMemo,useRef}from\"react\";import{motion,useInView}from\"framer-motion\";/**\nInstructions:\nCreate a Framer component that follows the Framer component rules and achieves the user's goal.\nmake me a gif animation like this where it is subtly moving on loop. Make the arrow red\n *//**\n * Click Here Arrow (Loop)\n *\n * @framerIntrinsicWidth 520\n * @framerIntrinsicHeight 388\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */export default function ClickHereArrowLoop(props){const{backgroundColor,textColor,arrowColor,line1,line2,textFont,arrowStrokeWidth,arrowSize,arrowOffsetX,arrowOffsetY,textOffsetX,textOffsetY,animAmount,animDuration,arrowSide,head1X,head1Y,head2X,head2Y,arrowRotation,cssUrl,cssText,style}=props;useEffect(()=>{if(typeof document===\"undefined\")return;if(!cssUrl&&!cssText)return;const inserted=[];if(cssUrl){const existing=document.querySelector(`link[data-framer-click-here-arrow-loop=\"cssUrl\"][href=\"${cssUrl}\"]`);if(!existing){const link=document.createElement(\"link\");link.rel=\"stylesheet\";link.href=cssUrl;link.setAttribute(\"data-framer-click-here-arrow-loop\",\"cssUrl\");document.head.appendChild(link);inserted.push(link);}}if(cssText){const styleEl=document.createElement(\"style\");styleEl.type=\"text/css\";styleEl.setAttribute(\"data-framer-click-here-arrow-loop\",\"cssText\");styleEl.appendChild(document.createTextNode(cssText));document.head.appendChild(styleEl);inserted.push(styleEl);}return()=>{// Keep CSS in the head to avoid flashes on re-render.\n// (No cleanup on purpose.)\nvoid inserted;};},[cssUrl,cssText]);const isStatic=useIsStaticRenderer();const isFixedWidth=!!style&&style.width===\"100%\";const isFixedHeight=!!style&&style.height===\"100%\";const containerRef=useRef(null);const inView=useInView(containerRef,{amount:.2,margin:\"-10% 0px -10% 0px\"});const shouldAnimate=!isStatic&&inView;const arrowViewBox=useMemo(()=>{// A simple curved arrow resembling the reference: from top-left towards mid-right/lower.\nreturn{w:360,h:220};},[]);const arrowPathD=useMemo(()=>{return\"M334 46 C 278 10, 184 18, 126 60 C 72 98, 46 142, 40 188\";},[]);const arrowHeadPathD=useMemo(()=>{return`M40 188 L ${head1X} ${head1Y} M40 188 L ${head2X} ${head2Y}`;},[head1X,head1Y,head2X,head2Y]);const arrowScaleX=useMemo(()=>{// Default path points left; flip for right.\nreturn arrowSide===\"right\"?-1:1;},[arrowSide]);const baseArrowX=0;return /*#__PURE__*/_jsxs(\"div\",{ref:containerRef,style:{...style,position:\"relative\",width:\"100%\",height:\"100%\",overflow:\"hidden\",background:backgroundColor,borderRadius:0,...isFixedWidth?null:{minWidth:320},...isFixedHeight?null:{minHeight:240}},\"aria-label\":\"Callout: click here\",role:\"img\",children:[/*#__PURE__*/_jsx(motion.div,{initial:{x:0,scaleX:arrowScaleX,rotate:arrowRotation},style:{position:\"absolute\",left:arrowOffsetX,top:arrowOffsetY,width:arrowSize,height:arrowSize*arrowViewBox.h/arrowViewBox.w,transformOrigin:\"80% 20%\",pointerEvents:\"none\"},animate:shouldAnimate?{x:[baseArrowX,baseArrowX+animAmount,baseArrowX],scaleX:arrowScaleX,rotate:arrowRotation}:{x:baseArrowX,scaleX:arrowScaleX,rotate:arrowRotation},transition:shouldAnimate?{x:{duration:animDuration,repeat:Infinity,ease:\"easeInOut\"}}:undefined,children:/*#__PURE__*/_jsxs(\"svg\",{width:\"100%\",height:\"100%\",viewBox:`0 0 ${arrowViewBox.w} ${arrowViewBox.h}`,fill:\"none\",xmlns:\"http://www.w3.org/2000/svg\",\"aria-hidden\":\"true\",children:[/*#__PURE__*/_jsx(\"path\",{d:arrowPathD,stroke:arrowColor,strokeWidth:arrowStrokeWidth,strokeLinecap:\"round\",strokeLinejoin:\"round\"}),/*#__PURE__*/_jsx(\"path\",{d:arrowHeadPathD,stroke:arrowColor,strokeWidth:arrowStrokeWidth,strokeLinecap:\"round\",strokeLinejoin:\"round\"})]})}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",left:0,right:0,bottom:0,top:0,display:\"flex\",alignItems:\"center\",justifyContent:\"center\",transform:`translate(${textOffsetX}px, ${textOffsetY}px)`,pointerEvents:\"none\"},children:/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",flexDirection:\"column\",gap:10,alignItems:\"center\",justifyContent:\"center\",textAlign:\"center\",color:textColor,...textFont},children:[/*#__PURE__*/_jsx(\"div\",{style:{width:\"max-content\",whiteSpace:\"pre-wrap\"},children:line1}),/*#__PURE__*/_jsx(\"div\",{style:{width:\"max-content\",whiteSpace:\"pre-wrap\"},children:line2})]})})]});}addPropertyControls(ClickHereArrowLoop,{line1:{type:ControlType.String,title:\"Line 1\",defaultValue:\"Click here\"},line2:{type:ControlType.String,title:\"Line 2\",defaultValue:\"now\"},backgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"#5E7F86\"},textColor:{type:ControlType.Color,title:\"Text\",defaultValue:\"#111111\"},arrowColor:{type:ControlType.Color,title:\"Arrow\",defaultValue:\"#FF0000\"},textFont:{type:ControlType.Font,title:\"Text Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"78px\",variant:\"Semibold\",letterSpacing:\"-0.02em\",lineHeight:\"0.95em\",textAlign:\"center\"}},arrowStrokeWidth:{type:ControlType.Number,title:\"Arrow Weight\",defaultValue:12,min:2,max:24,step:1,unit:\"px\"},arrowSize:{type:ControlType.Number,title:\"Arrow Size\",defaultValue:360,min:20,max:900,step:1,unit:\"px\"},arrowOffsetX:{type:ControlType.Number,title:\"Arrow X\",defaultValue:22,min:-500,max:500,step:1,unit:\"px\"},arrowOffsetY:{type:ControlType.Number,title:\"Arrow Y\",defaultValue:12,min:-500,max:500,step:1,unit:\"px\"},textOffsetX:{type:ControlType.Number,title:\"Text X\",defaultValue:0,min:-300,max:300,step:1,unit:\"px\"},textOffsetY:{type:ControlType.Number,title:\"Text Y\",defaultValue:38,min:-300,max:300,step:1,unit:\"px\"},animAmount:{type:ControlType.Number,title:\"Arrow Move\",defaultValue:8,min:0,max:40,step:.5,unit:\"px\"},arrowRotation:{type:ControlType.Number,title:\"Arrow Rotate\",defaultValue:0,min:-360,max:360,step:1,unit:\"deg\"},arrowSide:{type:ControlType.Enum,title:\"Arrow Direction\",defaultValue:\"left\",options:[\"left\",\"right\"],optionTitles:[\"Left\",\"Right\"],displaySegmentedControl:true},// Removed arrowLine1Angle/arrowLine2Angle controls because they were not part of Props,\n// which caused a PropertyControls type error.\nhead1X:{type:ControlType.Number,title:\"Head 1 X\",defaultValue:95,min:-200,max:360,step:1},head1Y:{type:ControlType.Number,title:\"Head 1 Y\",defaultValue:165,min:-200,max:360,step:1},head2X:{type:ControlType.Number,title:\"Head 2 X\",defaultValue:95,min:-200,max:360,step:1},head2Y:{type:ControlType.Number,title:\"Head 2 Y\",defaultValue:211,min:-200,max:360,step:1},animDuration:{type:ControlType.Number,title:\"Speed\",defaultValue:2.4,min:.6,max:10,step:.1,unit:\"s\"},cssUrl:{type:ControlType.String,title:\"CSS URL\",defaultValue:\"\",placeholder:\"https://.../styles.css\"},cssText:{type:ControlType.String,title:\"CSS Text\",defaultValue:\"\",displayTextArea:true,placeholder:\"/* Paste CSS here */\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ClickHereArrowLoop\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerContractVersion\":\"1\",\"framerIntrinsicWidth\":\"520\",\"framerIntrinsicHeight\":\"388\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ClickHereArrowLoop.map"],"mappings":"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"}