{"version":3,"file":"ImageLoadingSkeleton.JRkfeJXe.mjs","names":["useRef","useState","useMemo","startTransition","__esmMin","init_npm_react_18_3_1","te","pe","window","init_ssg_sandbox_shims","_e","de","init_jsx_runtime","useInView","init_framer_motion_DhsWWWsN","motion","init_framer_BWFVvmND","addPropertyControls","ControlType","useIsStaticRenderer","ImageLoadingSkeleton","props","ref","isInView","isStatic","isHovered","setIsHovered","backgroundImage","half","highlightWidth","start","end","baseColor","highlightColor","shouldAnimate","animate","reduceMotion","resolvedEase","easing","customBezier","containerStyle","style","borderRadius","pulseOpacity","angle","speedSeconds","init_ImageLoadingSkeleton","p"],"sources":["https:/framerusercontent.com/modules/wcv38nylKiJbMEElHRj2/eivYO0QQPckk4UaATOIS/ImageLoadingSkeleton.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{motion,useInView}from\"framer-motion\";import{startTransition,useMemo,useRef,useState}from\"react\";/* User instructions:\nCreate an image loading skeleton animation that can be pasted behind an image, so when the image is fully loaded it is on top of this component.\nMake sure it always fills the full frame and adapts to it, so it can be rescaled on the canvas.\n*//**\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */export default function ImageLoadingSkeleton(props){const{baseColor,highlightColor,speedSeconds,angle,borderRadius,animate,pulseOpacity,reduceMotion,highlightWidth,easing,customBezier,style}=props;const ref=useRef(null);const isInView=useInView(ref,{amount:.15});const isStatic=useIsStaticRenderer();const[isHovered,setIsHovered]=useState(false);const stripeSize=240;const backgroundImage=useMemo(()=>{// Repeating gradient + background-position animation = seamless loop (no end stutter)\nconst a=stripeSize;const w=Math.max(.04,Math.min(.9,highlightWidth));const center=a*.5;const half=a*w/2;const start=center-half;const end=center+half;return`repeating-linear-gradient(90deg, ${baseColor} 0px, ${baseColor} ${start}px, ${highlightColor} ${center}px, ${baseColor} ${end}px, ${baseColor} ${a}px)`;},[baseColor,highlightColor,highlightWidth]);const shouldAnimate=animate&&!isStatic&&isInView&&!(reduceMotion&&typeof window!==\"undefined\"&&\"matchMedia\"in window&&window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches);const resolvedEase=useMemo(()=>{// Prefer predictable cubic-bezier presets over Framer Motion's built-in \"easeIn/Out\" curves.\nif(easing===\"linear\")return\"linear\";const presetBeziers={// Note: avoid y1=0 or y2=1 to prevent a full stop at the loop boundary.\nsmooth:[.4,.1,.2,.9],gentle:[.33,.85,.68,.95],snappy:[.2,.7,.2,.9]};if(easing===\"custom\"){const x1=Math.max(0,Math.min(1,customBezier.x1));const y1=Math.max(.001,Math.min(.999,customBezier.y1));const x2=Math.max(0,Math.min(1,customBezier.x2));const y2=Math.max(.001,Math.min(.999,customBezier.y2));return[x1,y1,x2,y2];}return presetBeziers[easing];},[easing,customBezier]);const containerStyle=useMemo(()=>({position:\"relative\",width:\"100%\",height:\"100%\",overflow:\"hidden\",borderRadius,backgroundColor:baseColor,...style}),[borderRadius,baseColor,style]);return /*#__PURE__*/_jsx(\"div\",{ref:ref,style:containerStyle,\"aria-label\":\"Loading placeholder\",role:\"img\",onMouseEnter:()=>startTransition(()=>setIsHovered(true)),onMouseLeave:()=>startTransition(()=>setIsHovered(false)),children:/*#__PURE__*/_jsx(motion.div,{\"aria-hidden\":\"true\",style:{position:\"absolute\",inset:0,borderRadius,backgroundImage,backgroundSize:`${stripeSize}px 100%`,backgroundPositionX:0,opacity:isHovered?Math.min(1,pulseOpacity+.08):pulseOpacity,willChange:shouldAnimate?\"background-position\":undefined,transform:`rotate(${angle}deg) scale(1.6)`,transformOrigin:\"center\"},animate:shouldAnimate?{backgroundPositionX:[0,stripeSize]}:{backgroundPositionX:0},transition:shouldAnimate?{duration:Math.max(.2,speedSeconds),ease:resolvedEase,repeat:Infinity,repeatType:\"loop\",repeatDelay:0}:undefined})});}addPropertyControls(ImageLoadingSkeleton,{baseColor:{type:ControlType.Color,title:\"Base\",defaultValue:\"#F5F5F5\"},highlightColor:{type:ControlType.Color,title:\"Highlight\",defaultValue:\"#FFFFFF\"},pulseOpacity:{type:ControlType.Number,title:\"Opacity\",defaultValue:1,min:.05,max:1,step:.05},animate:{type:ControlType.Boolean,title:\"Animate\",defaultValue:true,enabledTitle:\"On\",disabledTitle:\"Off\"},speedSeconds:{type:ControlType.Number,title:\"Speed\",defaultValue:1.4,min:.3,max:6,step:.1,unit:\"s\",hidden:p=>!p.animate},angle:{type:ControlType.Number,title:\"Angle\",defaultValue:100,min:0,max:180,step:1,unit:\"\\xb0\"},borderRadius:{type:ControlType.BorderRadius,title:\"Radius\",defaultValue:\"0px\"},reduceMotion:{type:ControlType.Boolean,title:\"A11y\",defaultValue:true,enabledTitle:\"Reduce\",disabledTitle:\"Full\"},highlightWidth:{type:ControlType.Number,title:\"Highlight\",defaultValue:.16,min:.04,max:.6,step:.01},easing:{type:ControlType.Enum,title:\"Easing\",defaultValue:\"linear\",options:[\"linear\",\"smooth\",\"gentle\",\"snappy\",\"custom\"],optionTitles:[\"Linear\",\"Smooth\",\"Gentle\",\"Snappy\",\"Custom\"],hidden:p=>!p.animate},customBezier:{type:ControlType.Object,title:\"Bezier\",hidden:p=>!p.animate||p.easing!==\"custom\",controls:{x1:{type:ControlType.Number,title:\"x1\",defaultValue:.25,min:0,max:1,step:.01},y1:{type:ControlType.Number,title:\"y1\",defaultValue:.1,min:0,max:1,step:.01},x2:{type:ControlType.Number,title:\"x2\",defaultValue:.25,min:0,max:1,step:.01},y2:{type:ControlType.Number,title:\"y2\",defaultValue:1,min:0,max:1,step:.01}}}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ImageLoadingSkeleton\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ImageLoadingSkeleton.map"],"mappings":"A,6QAMG,SAAwBoB,EAAqB,EAAM,CAAC,GAAK,CAAC,YAAU,iBAAe,eAAa,QAAM,eAAa,UAAQ,eAAa,eAAa,iBAAe,SAAO,eAAa,SAAOC,EAAYC,EAAItB,EAAO,IAAI,EAAQuB,EAASV,EAAUS,EAAI,CAAC,OAAO,GAAG,CAAC,EAAQE,EAASL,EAAoB,EAAO,CAACM,EAAUC,GAAczB,EAAS,EAAK,EAA6B0B,EAAgBzB,MAAY,CACpZ,IAA6F0B,EAAK,IAAvE,KAAK,IAAI,IAAI,KAAK,IAAI,GAAGC,CAAc,CAAkC,EAAE,EAAQC,EAAM,IAAOF,EAAWG,EAAI,IAAOH,EAAK,MAAM,oCAAoCI,EAAU,QAAQA,EAAU,GAAGF,EAAM,MAAMG,EAAe,UAAgBD,EAAU,GAAGD,EAAI,MAAMC,EAAU,QAAU,EAAE,CAACA,EAAUC,EAAeJ,CAAc,CAAC,EAAQK,EAAcC,GAAS,CAACX,GAAUD,GAAU,EAAEa,GAAqB5B,IAAS,QAAa,eAAeA,GAAQA,EAAO,WAAW,kCAAkC,CAAC,CAAC,SAAe6B,EAAanC,MACviBoC,IAAS,SAAe,SAC4CA,IAAS,SAAgO,CAA7M,KAAK,IAAI,EAAE,KAAK,IAAI,EAAEC,EAAa,EAAE,CAA0K,EAA9J,KAAK,IAAI,KAAK,KAAK,IAAI,KAAKA,EAAa,EAAE,CAAsH,EAA1G,KAAK,IAAI,EAAE,KAAK,IAAI,EAAEA,EAAa,EAAE,CAAwE,EAA5D,KAAK,IAAI,KAAK,KAAK,IAAI,KAAKA,EAAa,EAAE,CAAoB,CAAC,EAAU,CAAtU,OAAO,CAAC,GAAG,GAAG,GAAG,EAAE,EAAE,OAAO,CAAC,IAAI,IAAI,IAAI,GAAG,EAAE,OAAO,CAAC,GAAG,GAAG,GAAG,EAAE,CAAqQ,EAAcD,GAAU,CAACA,EAAOC,CAAY,CAAC,EAAQC,EAAetC,OAAa,CAAC,SAAS,WAAW,MAAM,OAAO,OAAO,OAAO,SAAS,SAAS,eAAa,gBAAgB8B,EAAU,GAAGS,CAAK,GAAG,CAACC,EAAaV,EAAUS,CAAK,CAAC,EAAE,MAAoB,gBAAK,MAAM,CAAK,MAAI,MAAMD,EAAe,aAAa,sBAAsB,KAAK,MAAM,iBAAiBrC,MAAoBuB,EAAa,EAAI,CAAC,EAAE,iBAAiBvB,MAAoBuB,EAAa,EAAK,CAAC,EAAE,SAAsB,gBAAKX,EAAO,IAAI,CAAC,cAAc,OAAO,MAAM,CAAC,SAAS,WAAW,MAAM,EAAE,eAAa,kBAAgB,eAAe,aAAuB,oBAAoB,EAAE,QAAQU,EAAU,KAAK,IAAI,EAAEkB,EAAa,GAAG,EAAEA,EAAa,WAAWT,EAAc,sBAAsB,IAAA,GAAU,UAAU,UAAUU,EAAM,iBAAiB,gBAAgB,QAAQ,EAAE,QAAQV,EAAc,CAAC,oBAAoB,CAAC,EAAE,GAAU,CAAC,EAAE,CAAC,oBAAoB,CAAC,EAAE,WAAWA,EAAc,CAAC,SAAS,KAAK,IAAI,GAAGW,CAAY,EAAE,KAAKR,EAAa,OAAO,IAAS,WAAW,OAAO,YAAY,CAAC,EAAE,IAAA,EAAS,CAAC,CAAC,CAAC,CAAE,C,kDAACpB,EAAoBG,EAAqB,CAAC,UAAU,CAAC,KAAKF,EAAY,MAAM,MAAM,OAAO,aAAa,SAAS,EAAE,eAAe,CAAC,KAAKA,EAAY,MAAM,MAAM,YAAY,aAAa,SAAS,EAAE,aAAa,CAAC,KAAKA,EAAY,OAAO,MAAM,UAAU,aAAa,EAAE,IAAI,IAAI,IAAI,EAAE,KAAK,GAAG,EAAE,QAAQ,CAAC,KAAKA,EAAY,QAAQ,MAAM,UAAU,aAAa,GAAK,aAAa,KAAK,cAAc,KAAK,EAAE,aAAa,CAAC,KAAKA,EAAY,OAAO,MAAM,QAAQ,aAAa,IAAI,IAAI,GAAG,IAAI,EAAE,KAAK,GAAG,KAAK,IAAI,OAAO,GAAG,CAAC6B,EAAE,OAAO,EAAE,MAAM,CAAC,KAAK7B,EAAY,OAAO,MAAM,QAAQ,aAAa,IAAI,IAAI,EAAE,IAAI,IAAI,KAAK,EAAE,KAAK,GAAM,EAAE,aAAa,CAAC,KAAKA,EAAY,aAAa,MAAM,SAAS,aAAa,KAAK,EAAE,aAAa,CAAC,KAAKA,EAAY,QAAQ,MAAM,OAAO,aAAa,GAAK,aAAa,SAAS,cAAc,MAAM,EAAE,eAAe,CAAC,KAAKA,EAAY,OAAO,MAAM,YAAY,aAAa,IAAI,IAAI,IAAI,IAAI,GAAG,KAAK,GAAG,EAAE,OAAO,CAAC,KAAKA,EAAY,KAAK,MAAM,SAAS,aAAa,SAAS,QAAQ,CAAC,SAAS,SAAS,SAAS,SAAS,QAAQ,EAAE,aAAa,CAAC,SAAS,SAAS,SAAS,SAAS,QAAQ,EAAE,OAAO,GAAG,CAAC6B,EAAE,OAAO,EAAE,aAAa,CAAC,KAAK7B,EAAY,OAAO,MAAM,SAAS,OAAO,GAAG,CAAC6B,EAAE,SAASA,EAAE,SAAS,SAAS,SAAS,CAAC,GAAG,CAAC,KAAK7B,EAAY,OAAO,MAAM,KAAK,aAAa,IAAI,IAAI,EAAE,IAAI,EAAE,KAAK,GAAG,EAAE,GAAG,CAAC,KAAKA,EAAY,OAAO,MAAM,KAAK,aAAa,GAAG,IAAI,EAAE,IAAI,EAAE,KAAK,GAAG,EAAE,GAAG,CAAC,KAAKA,EAAY,OAAO,MAAM,KAAK,aAAa,IAAI,IAAI,EAAE,IAAI,EAAE,KAAK,GAAG,EAAE,GAAG,CAAC,KAAKA,EAAY,OAAO,MAAM,KAAK,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,C"}