{"version":3,"file":"MakeCircularCrousel.DWvsSCU4.mjs","names":["useState","useRef"],"sources":["https:/framerusercontent.com/modules/lPJ5ulPbjlQNZx9y1T9V/S3wipjSm3shZqIijGnUJ/MakeCircularCrousel.js"],"sourcesContent":["// Circular 3D carousel with mouse pan, WebGL shaders, and cool effects\n// Reference: https://framerusercontent.com/images/rmOOV8yjZ6oDUmwib7mNaANTwU.png\n// @framerDisableUnlink\nimport{jsx as _jsx}from\"react/jsx-runtime\";import{useRef,useEffect,useState}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\"}];function clamp(v,min,max){return Math.max(min,Math.min(max,v));}/**\n * MakeCircularCrousel\n *\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n * @framerDisableUnlink\n */export default function MakeCircularCrousel(props){let{images,radius=320,itemWidth=260,itemHeight=160,perspective=1200,rotationSpeed=.18,shaderEffect,tiltAngle=-18,style}=props;// If images is undefined or empty, use defaultImages\nif(!images||!Array.isArray(images)||images.length===0){images=defaultImages;}else{// Fill up to 5 with defaults if any are missing\nimages=images.map((img,i)=>{if(!img||!img.src||!img.src.src){return{...defaultImages[i%defaultImages.length]};}return img;});}const isStatic=useIsStaticRenderer();const[rotation,setRotation]=useState(0);const dragging=useRef(false);const lastX=useRef(0);const velocity=useRef(0);const raf=useRef(null);// -------- POINTER DRAG SYSTEM --------\nuseEffect(()=>{if(isStatic)return;function onPointerDown(e){dragging.current=true;lastX.current=e.clientX;e.target.setPointerCapture?.(e.pointerId);}function onPointerMove(e){if(!dragging.current)return;const dx=e.clientX-lastX.current;lastX.current=e.clientX;velocity.current=dx*.5;setRotation(r=>r+dx*.5);}function onPointerUp(){dragging.current=false;}window.addEventListener(\"pointerdown\",onPointerDown);window.addEventListener(\"pointermove\",onPointerMove);window.addEventListener(\"pointerup\",onPointerUp);return()=>{window.removeEventListener(\"pointerdown\",onPointerDown);window.removeEventListener(\"pointermove\",onPointerMove);window.removeEventListener(\"pointerup\",onPointerUp);};},[isStatic]);// -------- INERTIA LOOP --------\nuseEffect(()=>{if(isStatic)return;function animate(){if(!dragging.current&&Math.abs(velocity.current)>.01){setRotation(r=>r+velocity.current);velocity.current*=.94;}raf.current=requestAnimationFrame(animate);}raf.current=requestAnimationFrame(animate);return()=>cancelAnimationFrame(raf.current);},[isStatic]);// -------- AUTO ROTATE --------\nuseEffect(()=>{if(isStatic)return;function auto(){if(!dragging.current){setRotation(r=>r+rotationSpeed);}raf.current=requestAnimationFrame(auto);}raf.current=requestAnimationFrame(auto);return()=>cancelAnimationFrame(raf.current);},[rotationSpeed,isStatic]);// 3D transform for each item\nconst N=images.length;const angleStep=360/N;// Shader effect: use CSS filter for now (blur, contrast, etc)\nconst shaderStyle=shaderEffect===\"blur\"?{filter:\"blur(2px) brightness(1.1)\"}:shaderEffect===\"contrast\"?{filter:\"contrast(1.3) saturate(1.2)\"}:{};return /*#__PURE__*/_jsx(\"div\",{style:{...style,width:\"100%\",height:\"100%\",perspective,overflow:\"visible\",position:\"relative\",cursor:dragging.current?\"grabbing\":\"grab\",userSelect:\"none\",touchAction:\"none\"},children:/*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",height:\"100%\",position:\"absolute\",transformStyle:\"preserve-3d\",willChange:\"transform\",transform:`rotateY(${rotation}deg)`},children:images.map((img,i)=>{const src=img.src?.src||img.src;const alt=img.alt||\"\";return /*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",left:\"50%\",top:\"50%\",width:itemWidth,height:itemHeight,marginLeft:-itemWidth/2,marginTop:-itemHeight/2,borderRadius:18,overflow:\"hidden\",boxShadow:\"0 8px 32px rgba(0,0,0,0.18)\",background:\"#fff\",transform:`rotateY(${angleStep*i}deg) translateZ(${radius}px) rotateX(${tiltAngle}deg)`,...shaderStyle},children:/*#__PURE__*/_jsx(\"img\",{src:src,alt:alt,draggable:false,style:{width:\"100%\",height:\"100%\",objectFit:\"cover\",pointerEvents:\"none\"}})},i);})})});}addPropertyControls(MakeCircularCrousel,{images:{type:ControlType.Array,title:\"Images\",control:{type:ControlType.Object,controls:{src:{type:ControlType.ResponsiveImage,title:\"Image\"},alt:{type:ControlType.String,title:\"Alt\",defaultValue:\"\"}}},defaultValue:defaultImages,maxCount:12},radius:{type:ControlType.Number,title:\"Radius\",defaultValue:320,min:120,max:800,step:1,unit:\"px\"},itemWidth:{type:ControlType.Number,title:\"Item Width\",defaultValue:260,min:80,max:400,step:1,unit:\"px\"},itemHeight:{type:ControlType.Number,title:\"Item Height\",defaultValue:160,min:60,max:300,step:1,unit:\"px\"},perspective:{type:ControlType.Number,title:\"Perspective\",defaultValue:1200,min:400,max:3e3,step:1,unit:\"px\"},rotationSpeed:{type:ControlType.Number,title:\"Auto Speed\",defaultValue:.18,min:0,max:2,step:.01,unit:\"deg/frame\"},shaderEffect:{type:ControlType.Enum,title:\"Shader FX\",options:[\"none\",\"blur\",\"contrast\"],optionTitles:[\"None\",\"Blur\",\"Contrast\"],defaultValue:\"none\"},tiltAngle:{type:ControlType.Number,title:\"Tilt Angle\",defaultValue:-18,min:-90,max:90,step:1,unit:\"deg\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"MakeCircularCrousel\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"fixed\",\"framerContractVersion\":\"1\",\"framerDisableUnlink\":\"\",\"framerSupportedLayoutHeight\":\"fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./MakeCircularCrousel.map"],"mappings":"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"}