{"version":3,"file":"Capsule_Slider.DFYREo7V.mjs","names":["useState","useCallback","useMemo"],"sources":["https:/framerusercontent.com/modules/YP2N9PYXhr8lk3XMZP0z/P2uIHsx9z9MxtySUld7D/Capsule_Slider.js"],"sourcesContent":["// 3D slider with image cards stacked in z-space, front card large, others smaller as they go behind\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useState,useCallback,useMemo,useEffect,startTransition}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";const defaultImages=[{src:\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",alt:\"Gradient 1 - Blue\"},{src:\"https://framerusercontent.com/images/aNsAT3jCvt4zglbWCUoFe33Q.jpg\",alt:\"Gradient 2 - Purple\"},{src:\"https://framerusercontent.com/images/BYnxEV1zjYb9bhWh1IwBZ1ZoS60.jpg\",alt:\"Gradient 3 - Orange\"},{src:\"https://framerusercontent.com/images/2uTNEj5aTl2K3NJaEFWMbnrA.jpg\",alt:\"Gradient 4 - Yellow\"},{src:\"https://framerusercontent.com/images/f9RiWoNpmlCMqVRIHz8l8wYfeI.jpg\",alt:\"Gradient 5 - Green\"}];/**\n * 3D Image Card Slider\n *\n * @framerIntrinsicWidth 500\n * @framerIntrinsicHeight 350\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */export default function Carousel3D(props){const{images=defaultImages,cardWidth=320,cardHeight=200,gap=40,scaleStep=.12,zStep=80,perspective=900,background=\"#fff\",sliderButtonBg=\"rgba(255,255,255,0.8)\",sliderButtonStroke=\"#222\",iconColor=\"#222\",radius=36,style}=props;const[index,setIndex]=useState(0);const[buttonDown,setButtonDown]=useState(\"\");const isStatic=useIsStaticRenderer();const total=images.length;const handlePrev=useCallback(()=>{startTransition(()=>setIndex(i=>(i-1+total)%total));},[total]);const handleNext=useCallback(()=>{startTransition(()=>setIndex(i=>(i+1)%total));},[total]);// Add keyboard navigation\nuseEffect(()=>{if(isStatic)return;const handleKeyDown=e=>{if(e.key===\"ArrowLeft\"){e.preventDefault();handlePrev();}else if(e.key===\"ArrowRight\"){e.preventDefault();handleNext();}};window.addEventListener(\"keydown\",handleKeyDown);return()=>window.removeEventListener(\"keydown\",handleKeyDown);},[handlePrev,handleNext,isStatic]);const cards=useMemo(()=>{return images.length>0?images.map((img,i)=>{// Calculate relative position to the front card\nlet rel=i-index;// Wrap around for circular effect\nif(rel<-Math.floor(total/2))rel+=total;if(rel>Math.floor(total/2))rel-=total;const absRel=Math.abs(rel);// 3D illusion: cards further in z are smaller and further away, closer are larger and closer\n// Use a non-linear scale for more depth\nconst z=-absRel*zStep;const scale=1/(1+absRel*scaleStep);const x=rel*gap;const opacity=rel===0?1:.7-.1*absRel;const pointer=rel===0?\"auto\":\"none\";// 3D effect: add Y translation and rotation for floating effect\nconst y=rel*60// vertical offset for floating\n;const rotate=rel*10// rotation for floating\n;// Handle ResponsiveImage format or fallback to default\nconst imageSrc=typeof img.src===\"object\"&&img.src?.src?img.src.src:typeof img.src===\"string\"?img.src:defaultImages[i%defaultImages.length].src;const imageAlt=typeof img.src===\"object\"&&img.src?.alt?img.src.alt:img.alt||defaultImages[i%defaultImages.length].alt;return /*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",left:\"50%\",top:\"50%\",width:cardWidth,height:cardHeight,transform:`translate(-50%, -50%) translateX(${x}px) translateY(${y}px) translateZ(${z}px) scale(${scale}) rotateZ(${rotate}deg)`+(isStatic?\"\":\"\"),zIndex:100-absRel,boxShadow:rel===0?\"0 8px 32px rgba(0,0,0,0.18)\":\"0 2px 8px rgba(0,0,0,0.08)\",borderRadius:radius,overflow:\"hidden\",opacity,transition:isStatic?\"none\":\"transform 0.5s cubic-bezier(.4,2,.3,1), opacity 0.4s\",background:\"#eee\",cursor:rel===0?\"pointer\":\"default\",pointerEvents:pointer},\"aria-hidden\":rel!==0,children:/*#__PURE__*/_jsx(\"img\",{src:imageSrc,alt:imageAlt,style:{width:\"100%\",height:\"100%\",objectFit:\"cover\",display:\"block\"},draggable:false})},i);}):defaultImages.map((img,i)=>{// fallback: show default images if images array is empty\nconst rel=i-index;const absRel=Math.abs(rel);const z=-absRel*zStep;const scale=1/(1+absRel*scaleStep);const x=rel*gap;const opacity=rel===0?1:.7-.1*absRel;const pointer=rel===0?\"auto\":\"none\";const y=rel*60;const rotate=rel*10;return /*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",left:\"50%\",top:\"50%\",width:cardWidth,height:cardHeight,transform:`translate(-50%, -50%) translateX(${x}px) translateY(${y}px) translateZ(${z}px) scale(${scale}) rotateZ(${rotate}deg)`+(isStatic?\"\":\"\"),zIndex:100-absRel,boxShadow:rel===0?\"0 8px 32px rgba(0,0,0,0.18)\":\"0 2px 8px rgba(0,0,0,0.08)\",borderRadius:radius,overflow:\"hidden\",opacity,transition:isStatic?\"none\":\"transform 0.5s cubic-bezier(.4,2,.3,1), opacity 0.4s\",background:\"#eee\",cursor:rel===0?\"pointer\":\"default\",pointerEvents:pointer},\"aria-hidden\":rel!==0,children:/*#__PURE__*/_jsx(\"img\",{src:img.src,alt:img.alt,style:{width:\"100%\",height:\"100%\",objectFit:\"cover\",display:\"block\"},draggable:false})},i);});},[images,index,cardWidth,cardHeight,gap,scaleStep,zStep,isStatic,total,radius]);return /*#__PURE__*/_jsxs(\"div\",{style:{...style,width:\"100%\",height:\"100%\",position:\"relative\",background,perspective,overflow:\"visible\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",minWidth:cardWidth,minHeight:cardHeight},children:[/*#__PURE__*/_jsx(\"button\",{\"aria-label\":\"Previous\",onClick:handlePrev,onMouseDown:()=>setButtonDown(\"prev\"),onMouseUp:()=>setButtonDown(\"\"),onMouseLeave:()=>setButtonDown(\"\"),style:{position:\"absolute\",left:12,top:\"50%\",transform:\"translateY(-50%)\"+(buttonDown===\"prev\"?\" scale(0.88)\":\"\"),zIndex:200,background:sliderButtonBg,border:`2px solid ${sliderButtonStroke}`,borderRadius:24,width:40,height:40,boxShadow:\"0 2px 8px rgba(0,0,0,0.08)\",cursor:\"pointer\",fontSize:24,color:iconColor,transition:\"transform 0.12s cubic-bezier(.6,1.5,.5,1)\"},children:\"‹\"}),/*#__PURE__*/_jsx(\"button\",{\"aria-label\":\"Next\",onClick:handleNext,onMouseDown:()=>setButtonDown(\"next\"),onMouseUp:()=>setButtonDown(\"\"),onMouseLeave:()=>setButtonDown(\"\"),style:{position:\"absolute\",right:12,top:\"50%\",transform:\"translateY(-50%)\"+(buttonDown===\"next\"?\" scale(0.88)\":\"\"),zIndex:200,background:sliderButtonBg,border:`2px solid ${sliderButtonStroke}`,borderRadius:24,width:40,height:40,boxShadow:\"0 2px 8px rgba(0,0,0,0.08)\",cursor:\"pointer\",fontSize:24,color:iconColor,transition:\"transform 0.12s cubic-bezier(.6,1.5,.5,1)\"},children:\"›\"}),/*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",height:\"100%\",position:\"relative\",perspective:`${perspective}px`,pointerEvents:\"none\"},children:cards})]});}addPropertyControls(Carousel3D,{images:{type:ControlType.Array,title:\"Images\",control:{type:ControlType.Object,controls:{src:{type:ControlType.ResponsiveImage},alt:{type:ControlType.String,title:\"Alt Text\",defaultValue:defaultImages[0].alt}}},defaultValue:defaultImages,maxCount:8},cardWidth:{type:ControlType.Number,title:\"Card Width\",defaultValue:320,min:120,max:600,step:1,unit:\"px\"},cardHeight:{type:ControlType.Number,title:\"Card Height\",defaultValue:200,min:80,max:400,step:1,unit:\"px\"},gap:{type:ControlType.Number,title:\"Card Gap\",defaultValue:40,min:0,max:120,step:1,unit:\"px\"},scaleStep:{type:ControlType.Number,title:\"Scale Step\",defaultValue:.12,min:.05,max:.3,step:.01},zStep:{type:ControlType.Number,title:\"Z Step\",description:\"Controls the depth spacing between cards in 3D space\",defaultValue:200,min:20,max:200,step:1,unit:\"px\"},perspective:{type:ControlType.Number,title:\"Perspective\",defaultValue:490,min:200,max:2e3,step:10,unit:\"px\"},background:{type:ControlType.Color,title:\"Background\",defaultValue:\"#fff\"},sliderButtonBg:{type:ControlType.Color,title:\"ButtonColor\",defaultValue:\"rgba(255,255,255,0.8)\"},sliderButtonStroke:{type:ControlType.Color,title:\"Stroke\",defaultValue:\"#222\"},iconColor:{type:ControlType.Color,title:\"Icon Color\",description:\"Controls the color of the arrow symbols in the navigation buttons\",defaultValue:\"#222\"},radius:{type:ControlType.Number,title:\"Radius\",defaultValue:36,min:0,max:100,step:1,unit:\"px\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"Carousel3D\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerIntrinsicHeight\":\"350\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerContractVersion\":\"1\",\"framerIntrinsicWidth\":\"500\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Capsule_Slider.map"],"mappings":"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"}