{"version":3,"file":"ProcessStages.C1Qot2sJ.mjs","names":["useRef"],"sources":["https:/framerusercontent.com/modules/LF5Rwapa0wnsEFbwZitd/d5QjYzDbIhiARbiKgeqC/ProcessStages.js"],"sourcesContent":["/**\n * ProcessStages\n * Three stages shown as paper stacks. The stacks grow from left to right and a\n * sheet travels from stage to stage. Hover or tap lifts a stage, shows its title\n * and lets the others step back; a click sends a sheet on at once. The\n * background is transparent so the section sets the colour.\n */import{jsx as _jsx}from\"react/jsx-runtime\";import{useEffect,useRef}from\"react\";import{addPropertyControls,ControlType}from\"framer\";export default function ProcessStages(props){const{papier=\"#F1EDE4\",petrol=\"#1F3A44\",akzent=\"#8FB8C2\",text=\"#1F3A44\",titel=\"Understand, Test, Expand\",takt=2.4,style}=props;const ref=useRef(null);useEffect(()=>{const cv=ref.current;if(!cv)return;const ctx=cv.getContext(\"2d\");if(!ctx)return;const reduce=window.matchMedia&&window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;const host=cv.parentElement;const DPR=Math.min(window.devicePixelRatio||1,2);const labels=String(titel).split(\",\").map(s=>s.trim()).filter(Boolean);while(labels.length<3)labels.push(\"\");let W=0,H=0,raf=0,running=true;let hover=-1,lift=[0,0,0],hx=-1,hy=-1;let flights=[];let nextAuto=performance.now()+1200,autoFrom=0;const heights=[.34,.54,.76];const ease=t=>t<.5?4*t*t*t:1-Math.pow(-2*t+2,3)/2;function resize(){const r=host.getBoundingClientRect();W=Math.max(1,Math.round(r.width));H=Math.max(1,Math.round(r.height));cv.width=Math.round(W*DPR);cv.height=Math.round(H*DPR);cv.style.width=W+\"px\";cv.style.height=H+\"px\";}function stackGeo(i){const colW=W/3;const w=Math.min(colW*.62,190);const x=colW*i+colW/2-w/2;const base=H-42;const h=(H-70)*heights[i];return{x,w,base,h,cx:x+w/2};}function frame(now){if(!running)return;if(!reduce&&now>nextAuto){flights.push({from:autoFrom,t0:now});autoFrom=(autoFrom+1)%2;nextAuto=now+takt*1e3;}ctx.setTransform(DPR,0,0,DPR,0,0);ctx.clearRect(0,0,W,H);ctx.strokeStyle=akzent;ctx.globalAlpha=.35;ctx.lineWidth=1.5;ctx.setLineDash([6,8]);ctx.lineDashOffset=-(now/40)%14;ctx.beginPath();for(let i=0;i<3;i++){const g=stackGeo(i);const y=g.base-g.h-26;if(i===0)ctx.moveTo(g.cx,y);else ctx.lineTo(g.cx,y);}ctx.stroke();ctx.setLineDash([]);ctx.globalAlpha=1;for(let i=0;i<3;i++){const g=stackGeo(i);const target=hover===i?1:0;lift[i]+=(target-lift[i])*.15;const dim=hover>=0&&hover!==i?.55:1;const up=lift[i]*14;const sheets=Math.max(6,Math.round(g.h/4));const topY=g.base-g.h-up;ctx.save();ctx.globalAlpha=dim*.28;ctx.shadowColor=\"rgba(31,58,68,0.55)\";ctx.shadowBlur=18;ctx.shadowOffsetY=8;ctx.fillStyle=papier;ctx.fillRect(g.x,topY-4,g.w,g.h+4);ctx.restore();for(let s=0;s.5?\"600 \":\"500 \")+\"13px Inter, system-ui, sans-serif\";ctx.fillText(labels[i],g.cx,g.base+35);ctx.globalAlpha=1;}const keep=[];for(const f of flights){const k=(now-f.t0)/1100;if(k>=1)continue;keep.push(f);const a=stackGeo(f.from),b=stackGeo(f.from+1);const e=ease(k);const x=a.cx+(b.cx-a.cx)*e;const y0=a.base-a.h-8,y1=b.base-b.h-8;const y=y0+(y1-y0)*e-Math.sin(e*Math.PI)*70;ctx.save();ctx.translate(x,y);ctx.rotate(Math.sin(e*Math.PI)*.4);ctx.fillStyle=papier;ctx.fillRect(-16,-11,32,22);ctx.strokeStyle=petrol;ctx.lineWidth=1;ctx.globalAlpha=.6;ctx.strokeRect(-15.5,-10.5,31,21);ctx.globalAlpha=1;ctx.fillStyle=petrol;ctx.globalAlpha=.5;ctx.fillRect(-10,-4,14,2);ctx.fillRect(-10,1,18,2);ctx.globalAlpha=1;ctx.restore();}flights=keep;if(!reduce||flights.length)raf=requestAnimationFrame(frame);}function pick(x,y){for(let i=0;i<3;i++){const g=stackGeo(i);if(x>=g.x-20&&x<=g.x+g.w+20&&y>=g.base-g.h-40&&y<=H)return i;}return-1;}const onMove=e=>{const r=host.getBoundingClientRect();hx=e.clientX-r.left;hy=e.clientY-r.top;hover=pick(hx,hy);};const onLeave=()=>{hover=-1;};const onDown=e=>{const r=host.getBoundingClientRect();const i=pick(e.clientX-r.left,e.clientY-r.top);hover=i;if(i>=0&&i<2){flights.push({from:i,t0:performance.now()});nextAuto=performance.now()+takt*1e3;}if(!raf)raf=requestAnimationFrame(frame);};const io=new IntersectionObserver(es=>{const vis=es[0].isIntersecting;if(vis&&!running){running=true;raf=requestAnimationFrame(frame);}if(!vis){running=false;cancelAnimationFrame(raf);}});io.observe(host);const ro=new ResizeObserver(resize);ro.observe(host);resize();host.addEventListener(\"pointermove\",onMove,{passive:true});host.addEventListener(\"pointerleave\",onLeave);host.addEventListener(\"pointerdown\",onDown);raf=requestAnimationFrame(frame);return()=>{running=false;cancelAnimationFrame(raf);io.disconnect();ro.disconnect();host.removeEventListener(\"pointermove\",onMove);host.removeEventListener(\"pointerleave\",onLeave);host.removeEventListener(\"pointerdown\",onDown);};},[papier,petrol,akzent,text,titel,takt]);// The canvas sits in its own full size wrapper. Framer can place an element\n// with display: contents around a component that has breakpoint overrides,\n// so the canvas measures this wrapper and never that element.\nreturn /*#__PURE__*/_jsx(\"div\",{style:{position:\"relative\",width:\"100%\",height:\"100%\",...style},children:/*#__PURE__*/_jsx(\"canvas\",{ref:ref,\"aria-label\":\"Three growing paper stacks: understand, test, expand. Click a stack to send a sheet.\",role:\"img\",style:{display:\"block\",width:\"100%\",height:\"100%\",cursor:\"pointer\"}})});}addPropertyControls(ProcessStages,{papier:{type:ControlType.Color,title:\"Paper\",defaultValue:\"#F1EDE4\"},petrol:{type:ControlType.Color,title:\"Petrol\",defaultValue:\"#1F3A44\"},akzent:{type:ControlType.Color,title:\"Accent\",defaultValue:\"#8FB8C2\"},text:{type:ControlType.Color,title:\"Text\",defaultValue:\"#1F3A44\"},titel:{type:ControlType.String,title:\"Labels (3, comma separated)\",defaultValue:\"Understand, Test, Expand\"},takt:{type:ControlType.Number,title:\"Pace (s)\",min:.8,max:8,step:.2,defaultValue:2.4}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ProcessStages\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ProcessStages.map"],"mappings":"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"}