{"version":3,"file":"ImageTicker.JYJ-InbP.mjs","names":["useRef","useState","useMemo"],"sources":["https:/framerusercontent.com/modules/3W5YPiG2OBiVaIo7gVl7/CnH5GTKpvIFytwU74iVa/ImageTicker.js"],"sourcesContent":["// 15 degree tilted ticker with 12 images in a 4x3 grid\n// 1st and 3rd columns move down, middle column moves up\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useEffect,useRef,startTransition,useState,useMemo}from\"react\";import{addPropertyControls,ControlType}from\"framer\";import{useAnimationFrame}from\"framer-motion\";/**\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n */export default function ImageTicker(props){const{column1Images,column2Images,column3Images,speed=1,gap=16,tiltAngle=15,borderRadius=12,zoom=1}=props;const column1Ref=useRef(null);const column2Ref=useRef(null);const column3Ref=useRef(null);const containerRef=useRef(null);// Use refs instead of state for animation values to avoid re-renders\nconst offset1=useRef(0);const offset2=useRef(0);const offset3=useRef(0);const[isMobile,setIsMobile]=useState(false);const[estimatedWidth,setEstimatedWidth]=useState(500);// Track image dimensions for each column\nconst[imageDimensions,setImageDimensions]=useState({column1:[],column2:[],column3:[]});useEffect(()=>{if(typeof window===\"undefined\")return;const checkMobile=()=>{startTransition(()=>{setIsMobile(window.innerWidth<768);setEstimatedWidth(window.innerWidth<768?window.innerWidth*.66:window.innerWidth*.5);});};checkMobile();window.addEventListener(\"resize\",checkMobile);return()=>window.removeEventListener(\"resize\",checkMobile);},[]);// Load image dimensions\nuseEffect(()=>{const loadImageDimensions=async()=>{const loadColumn=async images=>{return Promise.all(images.map(img=>new Promise(resolve=>{const image=new Image;image.onload=()=>{resolve({width:image.naturalWidth,height:image.naturalHeight});};image.onerror=()=>{// Fallback to default aspect ratio\n    resolve({width:472,height:333.77});};image.src=img.src;})));};const[col1,col2,col3]=await Promise.all([loadColumn(column1Images),loadColumn(column2Images),loadColumn(column3Images)]);startTransition(()=>{setImageDimensions({column1:col1,column2:col2,column3:col3});});};loadImageDimensions();},[column1Images,column2Images,column3Images]);// Calculate total height for each column\nconst columnHeights=useMemo(()=>{const calculateHeight=dimensions=>{return dimensions.reduce((total,dim)=>{const aspectRatio=dim.width/dim.height;const imageHeight=estimatedWidth/aspectRatio;return total+imageHeight+gap;},0);};return{column1:calculateHeight(imageDimensions.column1),column2:calculateHeight(imageDimensions.column2),column3:calculateHeight(imageDimensions.column3)};},[imageDimensions,estimatedWidth,gap]);// Use direct DOM manipulation instead of state updates for better performance\nuseAnimationFrame((time,delta)=>{const movement=delta/1e3*speed*50;offset1.current+=movement;offset2.current-=movement;offset3.current+=movement;// Update DOM directly without triggering React re-renders\nif(column1Ref.current&&columnHeights.column1>0){const child=column1Ref.current.querySelector(\"[data-column-content]\");if(child){const totalSetHeight=columnHeights.column1;const normalizedOffset=(offset1.current%totalSetHeight+totalSetHeight)%totalSetHeight;child.style.transform=`translateY(${-normalizedOffset}px)`;}}if(column2Ref.current&&columnHeights.column2>0){const child=column2Ref.current.querySelector(\"[data-column-content]\");if(child){const totalSetHeight=columnHeights.column2;const normalizedOffset=(offset2.current%totalSetHeight+totalSetHeight)%totalSetHeight;child.style.transform=`translateY(${-normalizedOffset}px)`;}}if(column3Ref.current&&columnHeights.column3>0){const child=column3Ref.current.querySelector(\"[data-column-content]\");if(child){const totalSetHeight=columnHeights.column3;const normalizedOffset=(offset3.current%totalSetHeight+totalSetHeight)%totalSetHeight;child.style.transform=`translateY(${-normalizedOffset}px)`;}}});const renderColumn=(columnImages,dimensions)=>{// Only render 3 copies instead of 20 for seamless looping\nconst repeatedImages=Array(3).fill(columnImages).flat();const repeatedDimensions=Array(3).fill(dimensions).flat();return /*#__PURE__*/_jsx(\"div\",{style:{position:\"relative\",height:\"100%\",overflow:\"hidden\"},children:/*#__PURE__*/_jsx(\"div\",{\"data-column-content\":true,style:{position:\"absolute\",top:0,left:0,width:\"100%\",willChange:\"transform\"},children:repeatedImages.map((image,index)=>{const dim=repeatedDimensions[index]||{width:472,height:333.77};const aspectRatio=dim.width/dim.height;return /*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",aspectRatio:`${aspectRatio}`,marginBottom:gap,borderRadius:borderRadius},children:/*#__PURE__*/_jsx(\"img\",{src:image.src,alt:image.alt,style:{width:\"100%\",height:\"100%\",objectFit:\"cover\",borderRadius:borderRadius}})},index);})})});};return /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{width:\"100%\",height:\"100%\",display:\"flex\",justifyContent:\"center\",alignItems:\"center\",overflow:\"hidden\",position:\"relative\"},children:/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",gap:gap,transform:`rotate(${tiltAngle}deg) scale(${zoom})`,height:isMobile?\"150vh\":\"200vh\",width:isMobile?\"200vw\":\"200vw\",willChange:\"transform\"},children:[/*#__PURE__*/_jsx(\"div\",{ref:column1Ref,style:{flex:1,minWidth:isMobile?\"52.8vw\":\"39.6vw\"},children:renderColumn(column1Images,imageDimensions.column1)}),/*#__PURE__*/_jsx(\"div\",{ref:column2Ref,style:{flex:1,minWidth:isMobile?\"52.8vw\":\"39.6vw\"},children:renderColumn(column2Images,imageDimensions.column2)}),/*#__PURE__*/_jsx(\"div\",{ref:column3Ref,style:{flex:1,minWidth:isMobile?\"52.8vw\":\"39.6vw\"},children:renderColumn(column3Images,imageDimensions.column3)})]})});}addPropertyControls(ImageTicker,{column1Images:{type:ControlType.Array,control:{type:ControlType.ResponsiveImage},title:\"Column 1 Images\",defaultValue:[{src:\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",alt:\"Gradient 1\"},{src:\"https://framerusercontent.com/images/aNsAT3jCvt4zglbWCUoFe33Q.jpg\",alt:\"Gradient 2\"},{src:\"https://framerusercontent.com/images/BYnxEV1zjYb9bhWh1IwBZ1ZoS60.jpg\",alt:\"Gradient 3\"}]},column2Images:{type:ControlType.Array,control:{type:ControlType.ResponsiveImage},title:\"Column 2 Images\",defaultValue:[{src:\"https://framerusercontent.com/images/2uTNEj5aTl2K3NJaEFWMbnrA.jpg\",alt:\"Gradient 4\"},{src:\"https://framerusercontent.com/images/f9RiWoNpmlCMqVRIHz8l8wYfeI.jpg\",alt:\"Gradient 5\"},{src:\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",alt:\"Gradient 1\"}]},column3Images:{type:ControlType.Array,control:{type:ControlType.ResponsiveImage},title:\"Column 3 Images\",defaultValue:[{src:\"https://framerusercontent.com/images/aNsAT3jCvt4zglbWCUoFe33Q.jpg\",alt:\"Gradient 2\"},{src:\"https://framerusercontent.com/images/BYnxEV1zjYb9bhWh1IwBZ1ZoS60.jpg\",alt:\"Gradient 3\"},{src:\"https://framerusercontent.com/images/2uTNEj5aTl2K3NJaEFWMbnrA.jpg\",alt:\"Gradient 4\"}]},speed:{type:ControlType.Number,title:\"Speed\",defaultValue:1,min:.1,max:5,step:.1},gap:{type:ControlType.Number,title:\"Gap\",defaultValue:16,min:0,max:50,step:1,unit:\"px\"},tiltAngle:{type:ControlType.Number,title:\"Tilt Angle\",defaultValue:15,min:-45,max:45,step:1,unit:\"deg\"},borderRadius:{type:ControlType.Number,title:\"Border Radius\",defaultValue:12,min:0,max:50,step:1,unit:\"px\"},zoom:{type:ControlType.Number,title:\"Zoom\",defaultValue:1,min:.5,max:2,step:.1}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ImageTicker\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"fixed\",\"framerSupportedLayoutWidth\":\"fixed\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ImageTicker.map"],"mappings":"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"}