{"version":3,"file":"ImageShuffleGrid.DF_PKDSC.mjs","names":["mask","SVG","getProps","Icon","useState","useRef","useCallback","neighborImageIndex"],"sources":["https:/framerusercontent.com/modules/bjdCYoh6YoFwxLKyiwZr/WbjzuAA8TA90Ac1YVCKr/bGBzYI5JN.js","https:/framerusercontent.com/modules/pnUgOSudTUyFEB2NfSyg/TYGTFzcR18K4eIRPeSOf/Q_sXCIRPk.js","https:/framerusercontent.com/modules/BUhY3V1tihIUzvUBgCOm/mVSUcvK3msxnmP6NZhSO/ImageShuffleGrid.js"],"sourcesContent":["// Generated by Framer (6ca5d98)\nimport{jsx as _jsx}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,cx,motion,withCSS}from\"framer\";import*as React from\"react\";import{forwardRef}from\"react\";const mask='url(\\'data:image/svg+xml,<svg display=\"block\" role=\"presentation\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M 12 1.41 L 10.59 0 L 6 4.58 L 1.41 0 L 0 1.41 L 6 7.41 Z\" fill=\"var(--esondr, rgb(0,0,0))\" height=\"7.41px\" id=\"mQwXGFUeb\" transform=\"translate(6 5)\" width=\"12px\"/><path d=\"M 12 1.41 L 10.59 0 L 6 4.58 L 1.41 0 L 0 1.41 L 6 7.41 Z\" fill=\"var(--esondr, rgb(0,0,0))\" height=\"7.41px\" id=\"F69VdqWqQ\" transform=\"translate(6 11.59)\" width=\"12px\"/></svg>\\') alpha no-repeat center / auto var(--framer-icon-mask-mode, add), var(--framer-icon-mask, none)';const SVG=/*#__PURE__*/forwardRef((props,ref)=>{const{animated,layoutId,children,...rest}=props;return animated?/*#__PURE__*/_jsx(motion.div,{...rest,layoutId:layoutId,ref:ref}):/*#__PURE__*/_jsx(\"div\",{...rest,ref:ref});});const getProps=({fill,height,id,width,...props})=>{return{...props,K5AAorpEW:fill??props.K5AAorpEW??\"rgb(0, 0, 0)\"};};const Component=/*#__PURE__*/React.forwardRef(function(props,ref){const{style,className,layoutId,variant,K5AAorpEW,...restProps}=getProps(props);return /*#__PURE__*/_jsx(SVG,{...restProps,className:cx(\"framer-R5Eyg\",className),layoutId:layoutId,ref:ref,style:{\"--esondr\":K5AAorpEW,...style}});});const css=[`.framer-R5Eyg { -webkit-mask: ${mask}; aspect-ratio: 1; background-color: var(--esondr); mask: ${mask}; width: 24px; }`];/**\n * This is a generated Framer component.\n * @framerIntrinsicWidth 24\n * @framerIntrinsicHeight 24\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n * @framerVariables {\"K5AAorpEW\":\"fill\"}\n * @framerImmutableVariables true\n * @framerVector {\"name\":\"Keyboard Double Arrow Down\",\"color\":{\"type\":\"variable\",\"value\":\"esondr\"},\"set\":{\"localId\":\"vectorSet/DnLsXE00W\",\"id\":\"DnLsXE00W\",\"moduleId\":\"JIScivAkNLgXrcOUxHXD\"}}\n * @framerDisableUnlink true\n */const Icon=withCSS(Component,css,\"framer-R5Eyg\");Icon.displayName=\"Keyboard Double Arrow Down\";export default Icon;addPropertyControls(Icon,{K5AAorpEW:{defaultValue:\"rgb(0, 0, 0)\",hidden:false,title:\"Fill\",type:ControlType.Color}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"Icon\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerIntrinsicHeight\":\"24\",\"framerContractVersion\":\"1\",\"framerDisableUnlink\":\"true\",\"framerIntrinsicWidth\":\"24\",\"framerVariables\":\"{\\\"K5AAorpEW\\\":\\\"fill\\\"}\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerImmutableVariables\":\"true\",\"framerVector\":\"{\\\"name\\\":\\\"Keyboard Double Arrow Down\\\",\\\"color\\\":{\\\"type\\\":\\\"variable\\\",\\\"value\\\":\\\"esondr\\\"},\\\"set\\\":{\\\"localId\\\":\\\"vectorSet/DnLsXE00W\\\",\\\"id\\\":\\\"DnLsXE00W\\\",\\\"moduleId\\\":\\\"JIScivAkNLgXrcOUxHXD\\\"}}\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}","// Generated by Framer (6ca5d98)\nimport{jsx as _jsx}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,cx,motion,withCSS}from\"framer\";import*as React from\"react\";import{forwardRef}from\"react\";const mask='url(\\'data:image/svg+xml,<svg display=\"block\" role=\"presentation\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M 1.41 0 L 6 4.58 L 10.59 0 L 12 1.41 L 6 7.41 L 0 1.41 Z\" fill=\"var(--esondr, rgb(0,0,0))\" height=\"7.409980000000001px\" id=\"pChJ7liEU\" transform=\"translate(6 8.295)\" width=\"12px\"/></svg>\\') alpha no-repeat center / auto var(--framer-icon-mask-mode, add), var(--framer-icon-mask, none)';const SVG=/*#__PURE__*/forwardRef((props,ref)=>{const{animated,layoutId,children,...rest}=props;return animated?/*#__PURE__*/_jsx(motion.div,{...rest,layoutId:layoutId,ref:ref}):/*#__PURE__*/_jsx(\"div\",{...rest,ref:ref});});const getProps=({fill,height,id,width,...props})=>{return{...props,K5AAorpEW:fill??props.K5AAorpEW??\"rgb(0, 0, 0)\"};};const Component=/*#__PURE__*/React.forwardRef(function(props,ref){const{style,className,layoutId,variant,K5AAorpEW,...restProps}=getProps(props);return /*#__PURE__*/_jsx(SVG,{...restProps,className:cx(\"framer-dfEX3\",className),layoutId:layoutId,ref:ref,style:{\"--esondr\":K5AAorpEW,...style}});});const css=[`.framer-dfEX3 { -webkit-mask: ${mask}; aspect-ratio: 1; background-color: var(--esondr); mask: ${mask}; width: 24px; }`];/**\n * This is a generated Framer component.\n * @framerIntrinsicWidth 24\n * @framerIntrinsicHeight 24\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n * @framerVariables {\"K5AAorpEW\":\"fill\"}\n * @framerImmutableVariables true\n * @framerVector {\"name\":\"Keyboard Arrow Down\",\"color\":{\"type\":\"variable\",\"value\":\"esondr\"},\"set\":{\"localId\":\"vectorSet/DnLsXE00W\",\"id\":\"DnLsXE00W\",\"moduleId\":\"JIScivAkNLgXrcOUxHXD\"}}\n * @framerDisableUnlink true\n */const Icon=withCSS(Component,css,\"framer-dfEX3\");Icon.displayName=\"Keyboard Arrow Down\";export default Icon;addPropertyControls(Icon,{K5AAorpEW:{defaultValue:\"rgb(0, 0, 0)\",hidden:false,title:\"Fill\",type:ControlType.Color}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"Icon\",\"slots\":[],\"annotations\":{\"framerImmutableVariables\":\"true\",\"framerIntrinsicWidth\":\"24\",\"framerVariables\":\"{\\\"K5AAorpEW\\\":\\\"fill\\\"}\",\"framerVector\":\"{\\\"name\\\":\\\"Keyboard Arrow Down\\\",\\\"color\\\":{\\\"type\\\":\\\"variable\\\",\\\"value\\\":\\\"esondr\\\"},\\\"set\\\":{\\\"localId\\\":\\\"vectorSet/DnLsXE00W\\\",\\\"id\\\":\\\"DnLsXE00W\\\",\\\"moduleId\\\":\\\"JIScivAkNLgXrcOUxHXD\\\"}}\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerDisableUnlink\":\"true\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerContractVersion\":\"1\",\"framerIntrinsicHeight\":\"24\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}","// ImageShuffleGrid - A dynamic, animated grid of images that randomly swap positions with each other at set intervals\n// Instructions: Fix the component to prevent random screen jumps and improve stability.\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useState,useEffect,useCallback,startTransition,useRef}from\"react\";import{motion}from\"framer-motion\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";/**\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight auto\n */export default function ImageShuffleGrid(props){const{images=[{src:\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",alt:\"Image 1\"},{src:\"https://framerusercontent.com/images/aNsAT3jCvt4zglbWCUoFe33Q.jpg\",alt:\"Image 2\"},{src:\"https://framerusercontent.com/images/BYnxEV1zjYb9bhWh1IwBZ1ZoS60.jpg\",alt:\"Image 3\"},{src:\"https://framerusercontent.com/images/2uTNEj5aTl2K3NJaEFWMbnrA.jpg\",alt:\"Image 4\"},{src:\"https://framerusercontent.com/images/f9RiWoNpmlCMqVRIHz8l8wYfeI.jpg\",alt:\"Image 5\"},{src:\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",alt:\"Image 6\"},{src:\"https://framerusercontent.com/images/aNsAT3jCvt4zglbWCUoFe33Q.jpg\",alt:\"Image 7\"},{src:\"https://framerusercontent.com/images/BYnxEV1zjYb9bhWh1IwBZ1ZoS60.jpg\",alt:\"Image 8\"},{src:\"https://framerusercontent.com/images/2uTNEj5aTl2K3NJaEFWMbnrA.jpg\",alt:\"Image 9\"}],emptySlotColor=\"#EEEEEE\",rows=3,columns=3,gap=8,padding=16,aspectRatio=\"1:1\",objectFit=\"cover\",borderRadius=8,borderColor=\"#000000\",borderWidth=0,backgroundColor=\"#F5F5F5\",swapInterval=2e3,animationDuration=.8,easing=\"easeInOut\",shuffleStyle=\"neighbors\",hoverEffect=true,hoverScale=1.05,randomizationIntensity=100,maxSwapsPerInterval=1,enableImageCycle=false}=props;const isStatic=useIsStaticRenderer();const[imageItems,setImageItems]=useState([]);const[preloadedImages,setPreloadedImages]=useState(new Set);const timeoutsRef=useRef([]);useEffect(()=>{return()=>{if(typeof window===\"undefined\")return;timeoutsRef.current.forEach(id=>window.clearTimeout(id));timeoutsRef.current=[];};},[]);// Preload all images\nuseEffect(()=>{if(typeof window===\"undefined\")return;const imagesToPreload=images.map(img=>img.src).filter(src=>src);const loaded=new Set;imagesToPreload.forEach(src=>{const img=new window.Image;img.onload=()=>{loaded.add(src);startTransition(()=>setPreloadedImages(new Set(loaded)));};img.src=src;});},[images]);// Initialize image items\nuseEffect(()=>{const totalSlots=rows*columns;const displayImages=images.slice(0,totalSlots);const items=displayImages.map((image,index)=>({id:`image-${index}`,src:image.src,alt:image.alt||`Image ${index+1}`,gridPosition:index}));// Fill remaining slots with empty placeholders\nfor(let i=displayImages.length;i<totalSlots;i++){items.push({id:`empty-${i}`,src:\"\",alt:`Empty slot ${i+1}`,gridPosition:i});}startTransition(()=>setImageItems(items));},[rows,columns,images]);// Updated swap function to support multiple swaps\nconst swapPositions=useCallback(()=>{if(imageItems.length<2)return;const newImageItems=[...imageItems];const usedImages=new Set;const swapsToPerform=Math.min(maxSwapsPerInterval,Math.floor(imageItems.length/2));// Get currently visible image sources for smart cycling\nconst currentlyVisibleSources=new Set(newImageItems.filter(item=>item.src).map(item=>item.src));// Get available images that aren't currently visible\nconst getAvailableImageForCycle=()=>{if(!enableImageCycle||images.length<=imageItems.length){return null;}const availableImages=images.filter(img=>!currentlyVisibleSources.has(img.src));if(availableImages.length===0)return null;const randomIndex=Math.floor(Math.random()*availableImages.length);return availableImages[randomIndex];};for(let swapCount=0;swapCount<swapsToPerform;swapCount++){if(shuffleStyle===\"neighbors\"||shuffleStyle===\"diagonal\"){const getNeighbors=position=>{const row=Math.floor(position/columns);const col=position%columns;const neighbors=[];if(shuffleStyle===\"neighbors\"){if(row>0)neighbors.push(position-columns);if(row<rows-1)neighbors.push(position+columns);if(col>0)neighbors.push(position-1);if(col<columns-1)neighbors.push(position+1);}else{if(row>0&&col>0)neighbors.push(position-columns-1);if(row>0&&col<columns-1)neighbors.push(position-columns+1);if(row<rows-1&&col>0)neighbors.push(position+columns-1);if(row<rows-1&&col<columns-1)neighbors.push(position+columns+1);}return neighbors;};const availableImages=newImageItems.map((item,index)=>({item,index})).filter(({index})=>!usedImages.has(index));if(availableImages.length<2)break;const randomAvailableIndex=Math.floor(Math.random()*availableImages.length);const{item:selectedItem,index:selectedImageIndex}=availableImages[randomAvailableIndex];const currentPosition=selectedItem.gridPosition;const neighbors=getNeighbors(currentPosition);const availableNeighbors=neighbors.filter(neighborPosition=>{const neighborImageIndex=newImageItems.findIndex(item=>item.gridPosition===neighborPosition);return neighborImageIndex!==-1&&!usedImages.has(neighborImageIndex);});if(availableNeighbors.length===0)continue;const randomNeighborPosition=availableNeighbors[Math.floor(Math.random()*availableNeighbors.length)];const neighborImageIndex=newImageItems.findIndex(item=>item.gridPosition===randomNeighborPosition);if(neighborImageIndex===-1)continue;const temp=newImageItems[selectedImageIndex].gridPosition;newImageItems[selectedImageIndex].gridPosition=newImageItems[neighborImageIndex].gridPosition;newImageItems[neighborImageIndex].gridPosition=temp;const newImage=getAvailableImageForCycle();if(newImage&&preloadedImages.has(newImage.src)){newImageItems[selectedImageIndex].nextSrc=newImage.src;newImageItems[selectedImageIndex].isTransitioning=true;currentlyVisibleSources.add(newImage.src);const id=typeof window!==\"undefined\"?window.setTimeout(()=>{startTransition(()=>{setImageItems(prev=>prev.map(item=>item.id===newImageItems[selectedImageIndex].id?{...item,src:item.nextSrc||item.src,isTransitioning:false,nextSrc:undefined}:item));});},animationDuration*1e3+50):-1;if(id!==-1)timeoutsRef.current.push(id);}usedImages.add(selectedImageIndex);usedImages.add(neighborImageIndex);}else{const availableImages=newImageItems.map((item,index)=>({item,index})).filter(({index})=>!usedImages.has(index));if(availableImages.length<2)break;const randomIndex1=Math.floor(Math.random()*availableImages.length);let randomIndex2=Math.floor(Math.random()*availableImages.length);while(randomIndex2===randomIndex1&&availableImages.length>1){randomIndex2=Math.floor(Math.random()*availableImages.length);}const index1=availableImages[randomIndex1].index;const index2=availableImages[randomIndex2].index;const temp=newImageItems[index1].gridPosition;newImageItems[index1].gridPosition=newImageItems[index2].gridPosition;newImageItems[index2].gridPosition=temp;const newImage=getAvailableImageForCycle();if(newImage&&preloadedImages.has(newImage.src)){newImageItems[index1].nextSrc=newImage.src;newImageItems[index1].isTransitioning=true;currentlyVisibleSources.add(newImage.src);const id=typeof window!==\"undefined\"?window.setTimeout(()=>{startTransition(()=>{setImageItems(prev=>prev.map(item=>item.id===newImageItems[index1].id?{...item,src:item.nextSrc||item.src,isTransitioning:false,nextSrc:undefined}:item));});},animationDuration*1e3+50):-1;if(id!==-1)timeoutsRef.current.push(id);}usedImages.add(index1);usedImages.add(index2);}}startTransition(()=>{setImageItems(newImageItems);});},[imageItems,shuffleStyle,rows,columns,maxSwapsPerInterval,enableImageCycle,images,preloadedImages,animationDuration]);// Animation interval\nuseEffect(()=>{if(isStatic||imageItems.length===0)return;const interval=setInterval(()=>{if(Math.random()*100<randomizationIntensity){swapPositions();}},swapInterval);return()=>clearInterval(interval);},[swapInterval,swapPositions,randomizationIntensity,isStatic,imageItems.length]);const getTransition=useCallback(()=>{if(easing===\"spring\"){return{type:\"spring\",stiffness:300,damping:30};}const ease=easing;return{duration:animationDuration,ease};},[easing,animationDuration]);const ratio=aspectRatio===\"1:1\"?\"1 / 1\":aspectRatio===\"4:3\"?\"4 / 3\":\"16 / 9\";return /*#__PURE__*/_jsx(\"div\",{style:{...props.style||{},width:\"100%\",backgroundColor,padding:padding,position:\"relative\",overflow:\"hidden\",boxSizing:\"border-box\",minWidth:0,minHeight:0},children:/*#__PURE__*/_jsx(\"div\",{style:{position:\"relative\",width:\"100%\",display:\"grid\",gridTemplateColumns:`repeat(${Math.max(1,columns)}, 1fr)`,gap,boxSizing:\"border-box\",overflow:\"hidden\",minWidth:0,minHeight:0},children:imageItems.map(item=>/*#__PURE__*/_jsxs(motion.div,{layout:true,transition:getTransition(),whileHover:hoverEffect?{scale:hoverScale}:undefined,style:{width:\"100%\",aspectRatio:ratio,borderRadius,overflow:\"hidden\",backgroundColor:emptySlotColor,border:borderWidth>0?`${borderWidth}px solid ${borderColor}`:\"none\",position:\"relative\",minWidth:0,minHeight:0,gridColumnStart:item.gridPosition%Math.max(1,columns)+1,gridRowStart:Math.floor(item.gridPosition/Math.max(1,columns))+1},children:[item.src&&/*#__PURE__*/_jsx(motion.img,{src:item.src,alt:item.alt,style:{width:\"100%\",height:\"100%\",objectFit:objectFit,display:\"block\",position:\"absolute\",top:0,left:0},animate:{opacity:1},transition:{duration:0}}),item.nextSrc&&/*#__PURE__*/_jsx(motion.img,{src:item.nextSrc,alt:item.alt,style:{width:\"100%\",height:\"100%\",objectFit:objectFit,display:\"block\",position:\"absolute\",top:0,left:0,zIndex:1},initial:{opacity:0},animate:{opacity:1},transition:{duration:animationDuration,ease:\"easeInOut\"}})]},item.id))})});}addPropertyControls(ImageShuffleGrid,{// Images\nimages:{type:ControlType.Array,title:\"Images\",control:{type:ControlType.ResponsiveImage},defaultValue:[{src:\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",alt:\"Image 1\"},{src:\"https://framerusercontent.com/images/aNsAT3jCvt4zglbWCUoFe33Q.jpg\",alt:\"Image 2\"},{src:\"https://framerusercontent.com/images/BYnxEV1zjYb9bhWh1IwBZ1ZoS60.jpg\",alt:\"Image 3\"},{src:\"https://framerusercontent.com/images/2uTNEj5aTl2K3NJaEFWMbnrA.jpg\",alt:\"Image 4\"}]},// Layout\nrows:{type:ControlType.Number,title:\"Rows\",defaultValue:3,min:1,max:5,step:1,displayStepper:true},columns:{type:ControlType.Number,title:\"Columns\",defaultValue:3,min:1,max:5,step:1,displayStepper:true},aspectRatio:{type:ControlType.Enum,title:\"Aspect Ratio\",options:[\"1:1\",\"4:3\",\"16:9\"],optionTitles:[\"1:1\",\"4:3\",\"16:9\"],defaultValue:\"1:1\",displaySegmentedControl:true},objectFit:{type:ControlType.Enum,title:\"Image Fit\",options:[\"cover\",\"contain\",\"fill\",\"scale-down\",\"none\"],optionTitles:[\"Cover\",\"Contain\",\"Fill\",\"Scale Down\",\"None\"],defaultValue:\"cover\"},gap:{type:ControlType.Number,title:\"Gap\",defaultValue:8,min:0,max:50,step:1,unit:\"px\"},padding:{type:ControlType.Number,title:\"Inner Padding\",defaultValue:16,min:0,max:100,step:1,unit:\"px\"},// Appearance\nbackgroundColor:{type:ControlType.Color,title:\"Background Color\",defaultValue:\"#F5F5F5\"},emptySlotColor:{type:ControlType.Color,title:\"Empty Slot Color\",defaultValue:\"#EEEEEE\"},borderRadius:{type:ControlType.Number,title:\"Border Radius\",defaultValue:8,min:0,max:50,step:1,unit:\"px\"},borderColor:{type:ControlType.Color,title:\"Border Color\",defaultValue:\"#000000\"},borderWidth:{type:ControlType.Number,title:\"Border Width\",defaultValue:0,min:0,max:20,step:1,unit:\"px\"},hoverEffect:{type:ControlType.Boolean,title:\"Hover Effect\",defaultValue:true,enabledTitle:\"On\",disabledTitle:\"Off\"},hoverScale:{type:ControlType.Number,title:\"Hover Scale\",defaultValue:1.05,min:1,max:1.5,step:.01,hidden:({hoverEffect})=>!hoverEffect},// Animation\nswapInterval:{type:ControlType.Number,title:\"Swap Interval\",defaultValue:2e3,min:500,max:1e4,step:100,unit:\"ms\"},animationDuration:{type:ControlType.Number,title:\"Animation Duration\",defaultValue:.8,min:.1,max:3,step:.1,unit:\"s\"},easing:{type:ControlType.Enum,title:\"Easing\",options:[\"easeInOut\",\"spring\",\"linear\",\"easeOut\",\"easeIn\"],optionTitles:[\"Ease In Out\",\"Spring\",\"Linear\",\"Ease Out\",\"Ease In\"],defaultValue:\"easeInOut\"},// Behavior\nshuffleStyle:{type:ControlType.Enum,title:\"Shuffle Style\",options:[\"neighbors\",\"random\",\"diagonal\"],optionTitles:[\"Adjacent Swap\",\"Random Swap\",\"Diagonal Swap\"],defaultValue:\"neighbors\"},maxSwapsPerInterval:{type:ControlType.Number,title:\"Max Swaps Per Interval\",defaultValue:1,min:1,max:10,step:1,displayStepper:true},randomizationIntensity:{type:ControlType.Number,title:\"Randomization Intensity\",defaultValue:100,min:0,max:100,step:1,unit:\"%\"},enableImageCycle:{type:ControlType.Boolean,title:\"Enable Image Cycle\",defaultValue:false,enabledTitle:\"On\",disabledTitle:\"Off\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ImageShuffleGrid\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"fixed\",\"framerSupportedLayoutHeight\":\"auto\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ImageShuffleGrid.map"],"mappings":"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"}