{"version":3,"file":"FlowMarquee.BOAVIe7A.mjs","names":["useState","useRef","useMemo"],"sources":["https:/framerusercontent.com/modules/zJSRJ0GkLf8h2YkgmbAC/MroRTb8zriOOFmLAFxIQ/FlowMarquee.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import{useEffect,useRef,useState,useMemo,startTransition}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{motion,useAnimationFrame}from\"framer-motion\";/**\n * @framerIntrinsicWidth 800\n * @framerIntrinsicHeight 500\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n */export default function FlowMarquee(props){const{cards=[{image:{src:\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",alt:\"Fashion 1\"}},{image:{src:\"https://framerusercontent.com/images/aNsAT3jCvt4zglbWCUoFe33Q.jpg\",alt:\"Fashion 2\"}},{image:{src:\"https://framerusercontent.com/images/BYnxEV1zjYb9bhWh1IwBZ1ZoS60.jpg\",alt:\"Fashion 3\"}}],speed=1,gap=20,backgroundColor=\"#000000\",direction=\"left\",cardRadius=12}=props;const isStatic=useIsStaticRenderer();const[offset,setOffset]=useState(0);const containerRef=useRef(null);const[containerWidth,setContainerWidth]=useState(1e3);// 1. Handle Responsive Widths\nuseEffect(()=>{if(!containerRef.current)return;const observer=new ResizeObserver(entries=>{for(const entry of entries){setContainerWidth(entry.contentRect.width);}});observer.observe(containerRef.current);return()=>observer.disconnect();},[]);// 2. Calculate dynamic card width\nconst cardWidth=useMemo(()=>{if(containerWidth<600)return containerWidth-gap;if(containerWidth<1024)return containerWidth/2-gap;return containerWidth/3-gap;},[containerWidth,gap]);// Normalize cards\nconst normalizedCards=useMemo(()=>{if(!cards||cards.length===0)return[];return cards.map(card=>({...card,image:card.image||{src:\"\",alt:\"\"}}));},[cards]);// Duplicate cards for seamless loop\nconst duplicatedCards=useMemo(()=>{if(normalizedCards.length===0)return[];// We add extra duplicates to ensure coverage while scrolling backwards\nreturn[...normalizedCards,...normalizedCards,...normalizedCards,...normalizedCards];},[normalizedCards]);// Calculate total loop width\nconst loopWidth=useMemo(()=>{return normalizedCards.length*(cardWidth+gap);},[normalizedCards.length,cardWidth,gap]);// 3. Animation Loop (Updated for Direction)\nuseAnimationFrame((time,delta)=>{if(isStatic||loopWidth===0)return;startTransition(()=>{setOffset(prev=>{let newOffset;if(direction===\"left\"){// Moving Left: Increase offset\nnewOffset=prev+speed*(delta/16);// Reset if we've scrolled past the loop width\nreturn newOffset>=loopWidth?newOffset-loopWidth:newOffset;}else{// Moving Right: Decrease offset\nnewOffset=prev-speed*(delta/16);// Reset if we've scrolled past 0 (into negative)\nreturn newOffset<0?newOffset+loopWidth:newOffset;}});});});// Static Preview\nif(isStatic){return /*#__PURE__*/_jsx(\"div\",{style:{...containerStyle,backgroundColor},children:normalizedCards.slice(0,3).map((card,index)=>/*#__PURE__*/_jsx(\"div\",{style:{width:cardWidth,height:\"100%\",marginRight:gap,flexShrink:0,position:\"relative\",borderRadius:cardRadius,overflow:\"hidden\"},children:/*#__PURE__*/_jsx(\"img\",{src:card.image.src,alt:card.image.alt,style:imageStyle})},index))});}return /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{...containerStyle,backgroundColor},children:duplicatedCards.map((card,index)=>{// Calculate position\nconst itemX=index*(cardWidth+gap)-offset;return /*#__PURE__*/_jsx(motion.div,{style:{position:\"absolute\",width:cardWidth,height:\"100%\",left:itemX,top:0,overflow:\"hidden\",willChange:\"transform\",borderRadius:cardRadius},children:/*#__PURE__*/_jsx(\"img\",{src:card.image.src,alt:card.image.alt,style:imageStyle})},index);})});}// -- Styles --\nconst containerStyle={width:\"100%\",height:\"100%\",display:\"flex\",alignItems:\"center\",overflow:\"hidden\",position:\"relative\"};const imageStyle={width:\"100%\",height:\"100%\",objectFit:\"cover\",display:\"block\"};// -- Property Controls --\naddPropertyControls(FlowMarquee,{cards:{type:ControlType.Array,title:\"Cards\",control:{type:ControlType.Object,controls:{image:{type:ControlType.ResponsiveImage,title:\"Image\"}}},defaultValue:[{image:{src:\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\"}},{image:{src:\"https://framerusercontent.com/images/aNsAT3jCvt4zglbWCUoFe33Q.jpg\"}},{image:{src:\"https://framerusercontent.com/images/BYnxEV1zjYb9bhWh1IwBZ1ZoS60.jpg\"}}]},direction:{type:ControlType.Enum,title:\"Direction\",options:[\"left\",\"right\"],optionTitles:[\"Left\",\"Right\"],defaultValue:\"left\"},speed:{type:ControlType.Number,title:\"Speed\",defaultValue:1.5,min:0,max:10,step:.1},gap:{type:ControlType.Number,title:\"Gap\",defaultValue:10,min:0,max:100},cardRadius:{// Added control for radius\ntype:ControlType.Number,title:\"Radius\",defaultValue:12,min:0,max:200},backgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"#000000\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"FlowMarquee\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"fixed\",\"framerIntrinsicHeight\":\"500\",\"framerIntrinsicWidth\":\"800\",\"framerSupportedLayoutHeight\":\"fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./FlowMarquee.map"],"mappings":"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"}