{"version":3,"file":"ACBCFlowLine.2thzx0pg.mjs","names":["React.useRef","React.useState"],"sources":["https:/framerusercontent.com/modules/WamXZK54zYMlYO13pPGf/KKbZGJDxKaXDYsAcrbG5/ACBCFlowLine.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{motion,useInView,useReducedMotion,useScroll,useSpring,useTransform,animate,useMotionValue}from\"framer-motion\";// Each shape has its own drawing space; wide shapes use a wide space so curves keep their proportions.\nconst SHAPES={// Chao Phraya current: a main current and a softer echo beneath it\nriver:{paths:[{d:\"M0,560 C160,470 320,650 500,560 S820,440 1000,520\",role:\"main\"},{d:\"M0,660 C200,590 340,730 520,660 S840,560 1000,620\",role:\"echo\"}],nodes:[]},// Molecular pathway: one line with reaction nodes along it\npathway:{paths:[{d:\"M0,520 C140,520 190,300 340,300 S560,700 700,660 S880,420 1000,440\",role:\"main\"}],nodes:[.18,.42,.66,.9]},// Protein ribbon: two strands twisting around each other\nribbon:{paths:[{d:\"M0,500 C125,300 250,300 375,500 S625,700 750,500 S875,300 1000,500\",role:\"main\"},{d:\"M0,500 C125,700 250,700 375,500 S625,300 750,500 S875,700 1000,500\",role:\"accent\"}],nodes:[]},// Routes converging on Bangkok\nroute:{paths:[{d:\"M0,180 C380,180 620,500 1000,500\",role:\"echo\"},{d:\"M0,500 C340,520 660,480 1000,500\",role:\"main\"},{d:\"M0,820 C380,820 620,500 1000,500\",role:\"echo\"}],nodes:[1]},// Suphannahong-inspired prow: a long low hull rising into a curled prow, with a faint reflection\nsweep:{vb:[3e3,500],paths:[{d:\"M0,420 C700,440 1500,440 2150,400 C2450,380 2640,320 2740,220 C2810,150 2830,80 2790,50 C2755,25 2710,45 2715,85 C2720,120 2765,130 2790,105\",role:\"main\"},{d:\"M120,462 C800,476 1600,472 2200,442 C2450,428 2600,404 2700,366\",role:\"echo\"}],nodes:[]}};const EASE=[.22,.61,.36,1];/**\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n * @framerIntrinsicWidth 1000\n * @framerIntrinsicHeight 200\n */export default function ACBCFlowLine(props){const{shape=\"river\",mode=\"scroll\",orientation=\"horizontal\",mirror=false,lineColor=\"#B18B3D\",accentColor=\"#087E91\",strokeWidth=1.25,lineOpacity=.9,showNodes=true,duration=2.4,style}=props;const ref=React.useRef(null);const mainPathRef=React.useRef(null);const isStatic=useIsStaticRenderer();const prefersReduced=useReducedMotion();const fullyDrawn=isStatic||prefersReduced||mode===\"static\";// Scroll-linked progress: starts as the frame enters the bottom of the viewport,\n// completes when it reaches the middle. Smoothed so it feels like water, not a scrubber.\nconst{scrollYProgress}=useScroll({target:ref,offset:[\"start end\",\"center center\"]});const smooth=useSpring(scrollYProgress,{stiffness:60,damping:22,mass:.6});// In-view progress: one calm draw when the line first enters the viewport.\nconst inView=useInView(ref,{once:true,amount:.3});const inViewProgress=useMotionValue(0);React.useEffect(()=>{if(mode!==\"inView\"||fullyDrawn||!inView)return;const controls=animate(inViewProgress,1,{duration,ease:EASE});return()=>controls.stop();},[mode,fullyDrawn,inView,duration,inViewProgress]);const progress=mode===\"scroll\"?smooth:inViewProgress;const echoProgress=useTransform(progress,[0,1],[0,1]);const fade=useTransform(progress,[0,.08],[0,1]);// Node positions are measured from this component's own path once mounted.\nconst spec=SHAPES[shape]||SHAPES.river;const[vbW,vbH]=spec.vb||[1e3,1e3];const[nodePoints,setNodePoints]=React.useState([]);React.useEffect(()=>{const path=mainPathRef.current;if(!path||!showNodes||spec.nodes.length===0){setNodePoints([]);return;}const total=path.getTotalLength();setNodePoints(spec.nodes.map(at=>{const p=path.getPointAtLength(total*at);return{x:p.x/vbW*100,y:p.y/vbH*100,at};}));},[shape,showNodes,spec.nodes,vbW,vbH]);// Vertical threads swap axes, which only makes sense in the square drawing space.\nconst vertical=orientation===\"vertical\"&&vbW===vbH;// Swap axes for vertical threads, then optionally mirror horizontally (SVG applies right to left).\nconst transform=[mirror?`translate(${vbW},0) scale(-1,1)`:\"\",vertical?\"matrix(0,1,1,0,0,0)\":\"\"].filter(Boolean).join(\" \");const strokeFor=role=>role===\"accent\"?accentColor:lineColor;const opacityFor=role=>role===\"main\"?1:role===\"accent\"?.55:.4;const widthFor=role=>role===\"main\"?strokeWidth:Math.max(.6,strokeWidth*.7);const mapPoint=pt=>{// pt is in percent of the 1000 space (0–100); apply the same axis swap / mirror as the SVG\nlet x=pt.x;let y=pt.y;if(vertical)[x,y]=[y,x];if(mirror)x=100-x;return{left:`${x}%`,top:`${y}%`};};return /*#__PURE__*/_jsxs(\"div\",{ref:ref,\"aria-hidden\":\"true\",style:{position:\"relative\",width:\"100%\",height:\"100%\",pointerEvents:\"none\",opacity:lineOpacity,overflow:\"visible\",...style},children:[/*#__PURE__*/_jsx(\"svg\",{viewBox:`0 0 ${vbW} ${vbH}`,preserveAspectRatio:\"none\",width:\"100%\",height:\"100%\",style:{position:\"absolute\",inset:0,overflow:\"visible\"},focusable:\"false\",children:/*#__PURE__*/_jsx(\"g\",{transform:transform||undefined,children:spec.paths.map((p,i)=>{const isMain=p.role===\"main\";const common={d:p.d,fill:\"none\",stroke:strokeFor(p.role),strokeWidth:widthFor(p.role),strokeLinecap:\"round\",vectorEffect:\"non-scaling-stroke\",opacity:opacityFor(p.role)};if(fullyDrawn){return /*#__PURE__*/_jsx(\"path\",{ref:isMain?mainPathRef:undefined,...common},i);}return /*#__PURE__*/_jsx(motion.path,{ref:isMain?mainPathRef:undefined,...common,style:{pathLength:isMain?progress:echoProgress,opacity:fade},initial:false},i);})})}),nodePoints.map((pt,i)=>/*#__PURE__*/_jsx(FlowNode,{position:mapPoint(pt),at:pt.at,progress:progress,color:accentColor,ring:lineColor,drawn:fullyDrawn},i))]});}function FlowNode(props){const{position,at,progress,color,ring,drawn}=props;const opacity=useTransform(progress,[Math.max(0,at-.04),at],[0,1]);const scale=useTransform(progress,[Math.max(0,at-.04),at],[.6,1]);return /*#__PURE__*/_jsx(motion.span,{style:{position:\"absolute\",left:position.left,top:position.top,width:7,height:7,marginLeft:-3.5,marginTop:-3.5,borderRadius:\"50%\",background:color,boxShadow:`0 0 0 3px #FFFFFF, 0 0 0 4px ${ring}`,opacity:drawn?1:opacity,scale:drawn?1:scale}});}addPropertyControls(ACBCFlowLine,{shape:{type:ControlType.Enum,title:\"Shape\",options:[\"river\",\"pathway\",\"ribbon\",\"route\",\"sweep\"],optionTitles:[\"River\",\"Pathway\",\"Ribbon\",\"Route\",\"Sweep\"],defaultValue:\"river\"},mode:{type:ControlType.Enum,title:\"Motion\",options:[\"scroll\",\"inView\",\"static\"],optionTitles:[\"Draw on scroll\",\"Draw once\",\"Static\"],defaultValue:\"scroll\"},orientation:{type:ControlType.Enum,title:\"Direction\",options:[\"horizontal\",\"vertical\"],optionTitles:[\"Horizontal\",\"Vertical\"],displaySegmentedControl:true,defaultValue:\"horizontal\"},mirror:{type:ControlType.Boolean,title:\"Mirror\",defaultValue:false},lineColor:{type:ControlType.Color,title:\"Line\",defaultValue:\"#B18B3D\"},accentColor:{type:ControlType.Color,title:\"Accent\",defaultValue:\"#087E91\"},strokeWidth:{type:ControlType.Number,title:\"Stroke\",defaultValue:1.25,min:.5,max:4,step:.25,unit:\"px\"},lineOpacity:{type:ControlType.Number,title:\"Opacity\",defaultValue:.9,min:.1,max:1,step:.05},showNodes:{type:ControlType.Boolean,title:\"Nodes\",defaultValue:true},duration:{type:ControlType.Number,title:\"Draw Time\",defaultValue:2.4,min:.6,max:6,step:.2,unit:\"s\",hidden:p=>p.mode!==\"inView\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ACBCFlowLine\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"fixed\",\"framerIntrinsicHeight\":\"200\",\"framerIntrinsicWidth\":\"1000\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ACBCFlowLine.map"],"mappings":"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"}