{"version":3,"file":"ImageLoadingSkeleton.tseh7O--.mjs","names":["useRef","useState","useMemo","startTransition"],"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":"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"}