{"version":3,"file":"Reveal_Image_Scroll.DromhrY8.mjs","names":["useRef","__esmMin","init_npm_react_18_3_1","ce","init_jsx_runtime","c","de","useSpring","useMotionTemplate","useMotionValue","useScroll","motion","useTransform","init_framer_motion_DhsWWWsN","addPropertyControls","init_framer_D6uXRwWs","ControlType","Reveal_Image_Scroll","props","rootRef","sp","fadeSpeed","smooth","scrollYProgress","maskProg","repeatReveal","u","v","m","clamp01","startPct","revealStart","endPct","revealEnd","visiblePct","globalMask","directionPreset","edgePct","offsetT","s","offsetSpacing","yFromTop","yFromBottom","xFromLeft","xFromRight","xVal","yVal","offsetFrom","rootStyle","radius","style","image","init_Reveal_Image_Scroll"],"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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"}