{"version":3,"file":"AnimationForSonora.GG7TTbfJ.mjs","names":["useState","useRef"],"sources":["https:/framerusercontent.com/modules/9ps6m9Wwec9XZdaZMi0m/KpARyZxDv6txuOT6Cfpb/AnimationForSonora.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useState,useEffect,useRef}from\"react\";import{addPropertyControls,ControlType}from\"framer\";function useWindowSize(){const isBrowser=typeof window!==\"undefined\";const[size,setSize]=useState({width:isBrowser?window.innerWidth:0,height:isBrowser?window.innerHeight:0});useEffect(()=>{if(!isBrowser)return;const onResize=()=>setSize({width:window.innerWidth,height:window.innerHeight});window.addEventListener(\"resize\",onResize);return()=>window.removeEventListener(\"resize\",onResize);},[isBrowser]);return size;}export function AnimationForSonora({backgroundColor=\"#f1f8e9\",sectionHeight=500,phase1Duration=.25,phase2Duration=.5,spacingIntensity=4}){const[scrollProgress,setScrollProgress]=useState(0);const containerRef=useRef(null);const{height:windowHeight}=useWindowSize();useEffect(()=>{const handleScroll=()=>{if(!containerRef.current)return;const container=containerRef.current;const rect=container.getBoundingClientRect();const containerHeight=container.offsetHeight;const viewportHeight=window.innerHeight;const scrollStart=-rect.top;const scrollEnd=containerHeight-viewportHeight;const scrollRange=Math.max(scrollEnd,1);const progress=Math.max(0,Math.min(1,scrollStart/scrollRange));setScrollProgress(progress);};handleScroll();window.addEventListener(\"scroll\",handleScroll,{passive:true});window.addEventListener(\"resize\",handleScroll,{passive:true});return()=>{window.removeEventListener(\"scroll\",handleScroll);window.removeEventListener(\"resize\",handleScroll);};},[windowHeight]);const tiles=[{id:0,title:\"AI\",text:\"Automate, optimize, and personalize your account management process at scale.\",activeImg:\"https://res.cloudinary.com/dlhwfesiz/image/upload/v1762844561/ai_daq1a9.png\",dullImg:\"https://res.cloudinary.com/dlhwfesiz/image/upload/v1762844561/Ai_dull_c3w07s.png\"},{id:1,title:\"Tools\",text:\"Use built-in tools to better understand risk, identify upsell opportunities, and capture the voice of the customer.\",activeImg:\"https://res.cloudinary.com/dlhwfesiz/image/upload/v1762844561/tool_p8nlts.png\",dullImg:\"https://res.cloudinary.com/dlhwfesiz/image/upload/v1762844561/tool-dull_mess3t.png\"},{id:2,title:\"Customer Groups\",text:\"Organize and manage your customers easily.\",activeImg:\"https://res.cloudinary.com/dlhwfesiz/image/upload/v1762844562/customer_group_qsl1ty.png\",dullImg:\"https://res.cloudinary.com/dlhwfesiz/image/upload/v1762844561/customer-dull_rih7mt.png\"},{id:3,title:\"Integrations\",text:\"Connect with your favorite tools seamlessly.\",activeImg:\"https://res.cloudinary.com/dlhwfesiz/image/upload/v1762844561/integeration_hl39f5.png\",dullImg:\"https://res.cloudinary.com/dlhwfesiz/image/upload/v1762844568/integeration_dull_awb1ge.png\"}];const phase1End=phase1Duration;const phase1Progress=Math.min(scrollProgress/phase1End,1);const phase2Start=phase1Duration;const phase2End=phase1Duration+phase2Duration;const phase2Progress=Math.max(0,Math.min(1,(scrollProgress-phase2Start)/(phase2End-phase2Start)));// Determine active tile based on which one is closest to center during phase 2\nconst progressPerTile=1/tiles.length;let activeTileIndex=-1;if(scrollProgress>=phase2Start&&scrollProgress<=phase2End){// Calculate which tile should be active based on scroll position\nactiveTileIndex=Math.min(tiles.length-1,Math.floor(phase2Progress/progressPerTile));}else if(scrollProgress>phase2End){// After phase 2, last tile stays active\nactiveTileIndex=tiles.length-1;}const getTileStyle=index=>{const initialStackSpacing=60;const cardGap=35;const additionalSpacing=100*spacingIntensity;const separation=phase1Progress*additionalSpacing;let yOffset=-150;let zOffset=-index*initialStackSpacing;let rotateX=0;let opacity=1;let scale=1;// Equal spacing for each card\nyOffset=yOffset+index*cardGap;// Phase 1: Separate tiles by moving them DOWN\nconst separationAmount=separation*index;yOffset=yOffset+separationAmount;zOffset=zOffset+separation*index*.5;rotateX=phase1Progress*index*2;// Phase 2: Wide open spread with center-based activation\nif(scrollProgress>=phase2Start){// Calculate the spacing needed to spread tiles across viewport\nconst totalTiles=tiles.length;const spreadHeight=600// Total vertical space for spreading\n;// Position tiles evenly across the spread height\nconst tileSpacing=spreadHeight/(totalTiles-1);const centerOffset=-spreadHeight/2;// Additional Y offset based on phase 2 progress (spread wide open)\nconst spreadYOffset=centerOffset+index*tileSpacing;// Start with first tile 200px below center\nconst initialOffset=200;yOffset=spreadYOffset+initialOffset;// Scroll through tiles - bring active tile to center\nconst scrollOffset=phase2Progress*spreadHeight*.8;yOffset=yOffset-scrollOffset;// Scale down non-active tiles slightly\nif(activeTileIndex>=0&&activeTileIndex!==index){scale=.85;opacity=.4;}else{scale=1;opacity=1;// Add extra spacing below active tile for text\nif(activeTileIndex===index){yOffset=yOffset-80// Move active tile up to make room for text\n;}}// Reset rotation for phase 2\nrotateX=0;zOffset=0;}return{position:\"absolute\",left:\"50%\",top:\"50%\",transform:`translateX(-50%) translateY(calc(-50% + ${yOffset}px)) translateZ(${zOffset}px) rotateX(${rotateX}deg) scale(${scale})`,transition:\"transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.6s ease\",opacity,width:\"100%\",maxWidth:\"350px\",zIndex:activeTileIndex===index?10:4-index};};const getTileTextOpacity=index=>{// Text only appears for the active tile during phase 2\nif(scrollProgress<phase2Start){return 0;}if(activeTileIndex===index){// Fade in text for active tile\nconst tileProgress=(phase2Progress-index*progressPerTile)/progressPerTile;return Math.max(0,Math.min(1,tileProgress*3));}return 0;};const isImageActive=index=>{if(scrollProgress<phase2Start){return true// All active during phase 1\n;}return activeTileIndex===index// Only active tile is bright in phase 2\n;};return /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{width:\"100%\",height:`${sectionHeight}vh`,position:\"relative\"},children:/*#__PURE__*/_jsx(\"div\",{style:{position:\"sticky\",top:0,width:\"100%\",height:\"100vh\",display:\"flex\",justifyContent:\"center\",alignItems:\"center\",overflow:\"hidden\",background:backgroundColor},children:/*#__PURE__*/_jsx(\"div\",{style:{position:\"relative\",width:\"100%\",maxWidth:\"400px\",height:\"700px\",perspective:\"1500px\",perspectiveOrigin:\"center center\"},children:tiles.map((tile,index)=>/*#__PURE__*/_jsx(\"div\",{style:getTileStyle(index),children:/*#__PURE__*/_jsxs(\"div\",{style:{textAlign:\"center\"},children:[/*#__PURE__*/_jsx(\"img\",{src:isImageActive(index)?tile.activeImg:tile.dullImg,alt:tile.title,style:{width:\"280px\",height:\"280px\",objectFit:\"contain\",margin:\"0 auto\",display:\"block\",transition:\"opacity 0.4s ease\"}}),/*#__PURE__*/_jsxs(\"div\",{style:{opacity:getTileTextOpacity(index),transition:\"opacity 0.6s ease-out\",marginTop:\"20px\",padding:\"0 20px\",textAlign:\"left\",maxWidth:\"350px\",margin:\"-50px auto 0\",pointerEvents:getTileTextOpacity(index)===0?\"none\":\"auto\",visibility:getTileTextOpacity(index)===0?\"hidden\":\"visible\"},children:[/*#__PURE__*/_jsx(\"h3\",{style:{fontSize:\"18px\",fontWeight:600,margin:\"0 0 8px 0\",color:isImageActive(index)?\"#000000\":\"#9CA3AF\",transition:\"color 0.4s ease\"},children:tile.title}),/*#__PURE__*/_jsx(\"p\",{style:{fontSize:\"14px\",margin:0,lineHeight:\"1.5\",color:isImageActive(index)?\"#000000\":\"#9CA3AF\",transition:\"color 0.4s ease\"},children:tile.text})]})]})},tile.id))})})});}AnimationForSonora.displayName=\"Mobile Animation Section\";addPropertyControls(AnimationForSonora,{backgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"#f1f8e9\"},sectionHeight:{type:ControlType.Number,title:\"Section Height (vh)\",defaultValue:500,min:200,max:800,step:10},phase1Duration:{type:ControlType.Number,title:\"Phase 1: Stack Separation\",defaultValue:.25,min:.1,max:.5,step:.05},phase2Duration:{type:ControlType.Number,title:\"Phase 2: Sequential Tiles\",defaultValue:.5,min:.2,max:.6,step:.05},spacingIntensity:{type:ControlType.Number,title:\"Tile Spacing\",defaultValue:4,min:.5,max:5,step:.1}});\nexport const __FramerMetadata__ = {\"exports\":{\"AnimationForSonora\":{\"type\":\"reactComponent\",\"name\":\"AnimationForSonora\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./AnimationForSonora.map"],"mappings":"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"}