{"version":3,"file":"Reveal_Image_Scroll.JRoAOKlP.mjs","names":["useRef"],"sources":["https:/framerusercontent.com/modules/zczuFmXqVqNpgRpHrMNP/TV2Y5qwYE1peh9kI5L8L/Reveal_Image_Scroll.js"],"sourcesContent":["// Reveal_Image_Scroll.tsx\n// Scroll-reveal image with soft multi-stop gradient mask.\n// Offset motion is synced to the same spring as the mask via maskProg.\n/**\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n * @framerIntrinsicWidth 100\n * @framerIntrinsicHeight 100\n */import{jsx as _jsx}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import{motion,useScroll,useSpring,useTransform,useMotionTemplate,useMotionValue}from\"framer-motion\";import{useRef,useEffect}from\"react\";/**\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n * @framerIntrinsicWidth 800\n * @framerIntrinsicHeight 600\n */export default function Reveal_Image_Scroll(props){const{image,revealStart,revealEnd,edgePct,directionPreset,repeatReveal,offsetFrom,offsetSpacing,radius,fadeSpeed,style}=props;const rootRef=useRef(null);// Scroll window against this component\nconst{scrollYProgress}=useScroll({target:rootRef,offset:[\"start 120%\",\"start -20%\"]});// One spring drives both mask and offset\nconst sp=Math.max(.25,Math.min(2,fadeSpeed??1));const smooth=useSpring(scrollYProgress,{stiffness:120*sp,damping:30*Math.sqrt(sp),mass:.25});// Monotonic progress when repeatReveal is false\nconst maskProg=useMotionValue(0);useEffect(()=>{if(repeatReveal){const u=smooth.on(\"change\",v=>maskProg.set(v));return()=>u();}else{let m=maskProg.get();const u=smooth.on(\"change\",v=>{m=Math.max(m,v);maskProg.set(m);});return()=>u();}},[smooth,repeatReveal]);const clamp01=v=>Math.max(0,Math.min(1,v));// Mask travel: Start [-100%..0%], End [100%..300%]\nconst startPct=-100+clamp01(revealStart)*100;const endPct=100+clamp01(revealEnd)*200;const visiblePct=useTransform(maskProg,[0,1],[startPct,endPct]);// Smooth multi-stop gradient mask\nlet globalMask;switch(directionPreset){case\"Top → Bottom\":globalMask=useMotionTemplate`\n        linear-gradient(180deg,\n          rgba(0,0,0,1) 0%,\n          rgba(0,0,0,1) ${visiblePct}%,\n          rgba(0,0,0,0.85) calc(${visiblePct}% + ${edgePct}% * 0.2),\n          rgba(0,0,0,0.50) calc(${visiblePct}% + ${edgePct}% * 0.5),\n          rgba(0,0,0,0.20) calc(${visiblePct}% + ${edgePct}% * 0.8),\n          rgba(0,0,0,0.00) calc(${visiblePct}% + ${edgePct}%),\n          rgba(0,0,0,0.00) 100%)`;break;case\"Bottom → Top\":globalMask=useMotionTemplate`\n        linear-gradient(180deg,\n          rgba(0,0,0,0.00) 0%,\n          rgba(0,0,0,0.00) calc(100% - ${visiblePct}% - ${edgePct}%),\n          rgba(0,0,0,0.20) calc(100% - ${visiblePct}% - ${edgePct}% * 0.8),\n          rgba(0,0,0,0.50) calc(100% - ${visiblePct}% - ${edgePct}% * 0.5),\n          rgba(0,0,0,0.85) calc(100% - ${visiblePct}% - ${edgePct}% * 0.2),\n          rgba(0,0,0,1.00) calc(100% - ${visiblePct}%),\n          rgba(0,0,0,1.00) 100%)`;break;case\"Left → Right\":globalMask=useMotionTemplate`\n        linear-gradient(90deg,\n          rgba(0,0,0,1) 0%,\n          rgba(0,0,0,1) ${visiblePct}%,\n          rgba(0,0,0,0.85) calc(${visiblePct}% + ${edgePct}% * 0.2),\n          rgba(0,0,0,0.50) calc(${visiblePct}% + ${edgePct}% * 0.5),\n          rgba(0,0,0,0.20) calc(${visiblePct}% + ${edgePct}% * 0.8),\n          rgba(0,0,0,0.00) calc(${visiblePct}% + ${edgePct}%),\n          rgba(0,0,0,0.00) 100%)`;break;case\"Right → Left\":globalMask=useMotionTemplate`\n        linear-gradient(270deg,\n          rgba(0,0,0,1) 0%,\n          rgba(0,0,0,1) ${visiblePct}%,\n          rgba(0,0,0,0.85) calc(${visiblePct}% + ${edgePct}% * 0.2),\n          rgba(0,0,0,0.50) calc(${visiblePct}% + ${edgePct}% * 0.5),\n          rgba(0,0,0,0.20) calc(${visiblePct}% + ${edgePct}% * 0.8),\n          rgba(0,0,0,0.00) calc(${visiblePct}% + ${edgePct}%),\n          rgba(0,0,0,0.00) 100%)`;break;case\"Top-Left → Bottom-Right\":globalMask=useMotionTemplate`\n        linear-gradient(135deg,\n          rgba(0,0,0,1) 0%,\n          rgba(0,0,0,1) ${visiblePct}%,\n          rgba(0,0,0,0.85) calc(${visiblePct}% + ${edgePct}% * 0.2),\n          rgba(0,0,0,0.50) calc(${visiblePct}% + ${edgePct}% * 0.5),\n          rgba(0,0,0,0.20) calc(${visiblePct}% + ${edgePct}% * 0.8),\n          rgba(0,0,0,0.00) calc(${visiblePct}% + ${edgePct}%),\n          rgba(0,0,0,0.00) 100%)`;break;case\"Bottom-Right → Top-Left\":globalMask=useMotionTemplate`\n        linear-gradient(315deg,\n          rgba(0,0,0,0.00) 0%,\n          rgba(0,0,0,0.00) calc(100% - ${visiblePct}% - ${edgePct}%),\n          rgba(0,0,0,0.20) calc(100% - ${visiblePct}% - ${edgePct}% * 0.8),\n          rgba(0,0,0,0.50) calc(100% - ${visiblePct}% - ${edgePct}% * 0.5),\n          rgba(0,0,0,0.85) calc(100% - ${visiblePct}% - ${edgePct}% * 0.2),\n          rgba(0,0,0,1.00) calc(100% - ${visiblePct}%),\n          rgba(0,0,0,1.00) 100%)`;break;case\"Top-Right → Bottom-Left\":globalMask=useMotionTemplate`\n        linear-gradient(225deg,\n          rgba(0,0,0,1) 0%,\n          rgba(0,0,0,1) ${visiblePct}%,\n          rgba(0,0,0,0.85) calc(${visiblePct}% + ${edgePct}% * 0.2),\n          rgba(0,0,0,0.50) calc(${visiblePct}% + ${edgePct}% * 0.5),\n          rgba(0,0,0,0.20) calc(${visiblePct}% + ${edgePct}% * 0.8),\n          rgba(0,0,0,0.00) calc(${visiblePct}% + ${edgePct}%),\n          rgba(0,0,0,0.00) 100%)`;break;case\"Bottom-Left → Top-Right\":globalMask=useMotionTemplate`\n        linear-gradient(45deg,\n          rgba(0,0,0,0.00) 0%,\n          rgba(0,0,0,0.00) calc(100% - ${visiblePct}% - ${edgePct}%),\n          rgba(0,0,0,0.20) calc(100% - ${visiblePct}% - ${edgePct}% * 0.8),\n          rgba(0,0,0,0.50) calc(100% - ${visiblePct}% - ${edgePct}% * 0.5),\n          rgba(0,0,0,0.85) calc(100% - ${visiblePct}% - ${edgePct}% * 0.2),\n          rgba(0,0,0,1.00) calc(100% - ${visiblePct}%),\n          rgba(0,0,0,1.00) 100%)`;break;default:globalMask=useMotionTemplate`\n        linear-gradient(180deg,\n          rgba(0,0,0,1) 0%,\n          rgba(0,0,0,1) ${visiblePct}%,\n          rgba(0,0,0,0.85) calc(${visiblePct}% + ${edgePct}% * 0.2),\n          rgba(0,0,0,0.50) calc(${visiblePct}% + ${edgePct}% * 0.5),\n          rgba(0,0,0,0.20) calc(${visiblePct}% + ${edgePct}% * 0.8),\n          rgba(0,0,0,0.00) calc(${visiblePct}% + ${edgePct}%),\n          rgba(0,0,0,0.00) 100%)`;}// Offset synced with the same spring progress (maskProg)\nconst offsetDoneAt=.6;const offsetT=useTransform(maskProg,[0,offsetDoneAt],[0,1],{clamp:true});const s=Math.max(20,Math.min(200,offsetSpacing||80));const yFromTop=useTransform(offsetT,[0,1],[-s,0]);const yFromBottom=useTransform(offsetT,[0,1],[s,0]);const xFromLeft=useTransform(offsetT,[0,1],[-s,0]);const xFromRight=useTransform(offsetT,[0,1],[s,0]);let xVal=0,yVal=0;if(offsetFrom===\"Top\")yVal=yFromTop;if(offsetFrom===\"Bottom\")yVal=yFromBottom;if(offsetFrom===\"Left\")xVal=xFromLeft;if(offsetFrom===\"Right\")xVal=xFromRight;// Merge Framer style and set a fallback for Fit (no width/height provided).\nconst rootStyle={position:\"relative\",borderRadius:`${Math.max(0,Math.min(100,radius||0))}px`,overflow:\"hidden\",WebkitMaskImage:globalMask,maskImage:globalMask,WebkitMaskRepeat:\"no-repeat\",maskRepeat:\"no-repeat\",WebkitMaskSize:\"100% 100%\",maskSize:\"100% 100%\",...style||{}};if(!style||style.width===undefined&&style.height===undefined){// Fit mode: give intrinsic pixels so the drop size is 100×100.\nrootStyle.width=100;rootStyle.height=100;}// Note: do NOT force width/height: \"100%\". That breaks Fit and yields 0×0.\nreturn /*#__PURE__*/_jsx(motion.div,{ref:rootRef,style:rootStyle,children:/*#__PURE__*/_jsx(motion.img,{src:image,alt:\"\",draggable:false,style:{position:\"absolute\",inset:0,width:\"100%\",height:\"100%\",objectFit:\"cover\",borderRadius:\"inherit\",x:xVal,y:yVal,display:\"block\",userSelect:\"none\",pointerEvents:\"none\",willChange:\"transform\"}})});}addPropertyControls(Reveal_Image_Scroll,{image:{title:\"Image\",type:ControlType.Image},revealStart:{title:\"Reveal Start\",type:ControlType.Number,defaultValue:.5,min:0,max:1,step:.01},revealEnd:{title:\"Reveal End\",type:ControlType.Number,defaultValue:.5,min:0,max:1,step:.01},edgePct:{title:\"Edge %\",type:ControlType.Number,defaultValue:25,min:0,max:70,step:1},directionPreset:{title:\"Direction\",type:ControlType.Enum,options:[\"Top → Bottom\",\"Bottom → Top\",\"Left → Right\",\"Right → Left\",\"Top-Left → Bottom-Right\",\"Bottom-Right → Top-Left\",\"Top-Right → Bottom-Left\",\"Bottom-Left → Top-Right\"],optionTitles:[\"Top → Bottom\",\"Bottom → Top\",\"Left → Right\",\"Right → Left\",\"Top-Left → Bottom-Right\",\"Bottom-Right → Top-Left\",\"Top-Right → Bottom-Left\",\"Bottom-Left → Top-Right\"],defaultValue:\"Top → Bottom\"},repeatReveal:{title:\"Repeat on Scroll\",type:ControlType.Boolean,defaultValue:true},offsetFrom:{title:\"Offset From\",type:ControlType.Enum,options:[\"None\",\"Bottom\",\"Top\",\"Left\",\"Right\"],optionTitles:[\"None\",\"Bottom\",\"Top\",\"Left\",\"Right\"],defaultValue:\"None\"},offsetSpacing:{title:\"Offset From Spacing\",type:ControlType.Number,defaultValue:80,min:20,max:200,step:1},radius:{title:\"Radius\",type:ControlType.Number,defaultValue:0,min:0,max:100,step:1},fadeSpeed:{title:\"Fade Speed\",type:ControlType.Number,defaultValue:1,min:.25,max:2,step:.05}});// Legacy fallback; intrinsic annotations + Fit fallback above are primary.\nexport const defaultSize={width:100,height:100};\nexport const __FramerMetadata__ = {\"exports\":{\"defaultSize\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"default\":{\"type\":\"reactComponent\",\"name\":\"Reveal_Image_Scroll\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerIntrinsicHeight\":\"600\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerIntrinsicWidth\":\"800\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Reveal_Image_Scroll.map"],"mappings":"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"}