{"version":3,"file":"RouteDraw.CEf7b5YA.mjs","names":["useRef","useState"],"sources":["https:/framerusercontent.com/modules/AcOBvbzIwrXqMYcucYXq/MCAoWMk58AwsWu5kzQ9M/RouteDraw.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useEffect,useRef,useState}from\"react\";import{motion,useInView,useReducedMotion,animate}from\"framer-motion\";import{addPropertyControls,ControlType}from\"framer\";// Route traced from a real 5.4 km foot loop (Regent's Park + Primrose Hill,\n// OpenStreetMap routing). Coordinates live in the map image's own pixel space\n// (phone 393 x 594, desktop 633 x 876), so image and route stay locked together.\nconst DEFAULT_PATH=\"M90.9,402.9 L93.1,404.6 L93.4,405.1 L93.7,404.1 L93.4,403.2 L91.6,397.3 L91.6,397.2 L91.5,397.1 L91.4,396.8 L91.3,396.4 L90.2,392.8 L88.0,387.9 L87.8,387.6 L87.7,387.3 L87.7,387.2 L86.3,385.5 L86.0,385.0 L85.6,383.9 L85.0,382.6 L84.9,382.3 L84.3,380.9 L83.8,379.4 L83.3,378.5 L81.1,373.7 L78.8,369.7 L77.3,367.8 L76.6,366.9 L72.7,362.8 L67.0,357.4 L65.9,356.3 L64.1,354.7 L63.6,354.2 L59.1,349.1 L58.5,348.7 L58.2,348.3 L58.1,348.2 L58.0,348.1 L57.6,347.7 L40.5,330.6 L40.2,330.3 L40.1,330.2 L39.9,330.0 L36.8,327.0 L36.6,326.8 L36.0,326.5 L35.6,326.4 L35.0,326.5 L34.5,326.7 L34.4,326.4 L34.1,325.6 L33.7,324.8 L33.7,324.6 L33.7,324.3 L33.7,324.1 L33.8,323.9 L33.7,323.8 L33.7,323.5 L33.6,323.4 L29.9,319.8 L28.3,318.1 L27.7,317.4 L26.9,316.4 L25.9,315.0 L25.3,314.1 L24.7,313.2 L24.1,312.3 L23.6,311.4 L23.2,310.7 L22.7,309.4 L22.1,308.1 L21.7,306.9 L21.1,305.2 L20.7,303.7 L20.2,302.2 L20.0,301.3 L18.8,301.5 L18.8,301.5 L20.0,301.3 L19.7,300.3 L18.7,296.4 L18.3,294.5 L18.0,293.1 L17.7,291.9 L17.4,290.3 L17.2,289.2 L17.0,287.7 L16.9,286.8 L16.7,285.5 L16.7,284.1 L16.6,282.1 L16.6,281.1 L16.7,280.0 L16.8,279.1 L16.9,278.1 L17.1,277.1 L17.3,276.0 L17.8,274.6 L18.2,273.4 L18.7,272.3 L19.0,271.7 L19.6,270.6 L21.1,268.0 L25.3,260.5 L28.5,254.8 L32.4,248.0 L38.3,237.5 L40.4,233.9 L41.1,232.7 L43.9,228.5 L45.0,227.0 L45.6,226.1 L45.9,225.6 L46.1,225.3 L46.1,224.9 L46.0,224.5 L45.8,224.0 L45.5,223.3 L45.3,223.0 L45.1,222.5 L43.0,219.7 L37.7,211.9 L37.5,211.5 L37.3,211.3 L37.2,211.1 L36.9,210.9 L36.6,210.7 L37.1,210.3 L37.3,210.1 L37.6,209.8 L38.0,209.5 L38.0,209.3 L38.0,209.1 L38.1,209.0 L38.2,208.9 L38.3,208.8 L38.1,208.6 L37.5,207.9 L37.6,207.8 L38.6,207.1 L42.5,204.5 L43.7,203.7 L47.3,201.5 L50.1,199.7 L53.4,197.8 L52.7,196.9 L46.2,187.7 L49.9,185.8 L56.8,182.5 L64.8,178.6 L60.8,171.4 L63.8,169.8 L65.9,168.8 L69.0,167.3 L73.6,165.0 L74.2,164.7 L74.7,164.4 L75.7,163.6 L75.8,163.0 L75.9,162.4 L76.2,161.9 L83.4,151.2 L90.8,140.3 L85.6,136.8 L80.4,133.1 L75.9,129.7 L73.1,127.3 L71.7,125.9 L71.2,125.4 L70.2,124.3 L69.6,123.4 L68.9,123.1 L68.1,123.1 L66.8,123.0 L65.8,123.4 L64.8,123.7 L64.0,124.1 L63.2,124.6 L62.6,125.1 L62.1,125.9 L61.7,126.8 L61.4,128.1 L61.2,129.0 L61.1,137.1 L60.8,139.7 L65.3,147.1 L68.7,152.7 L68.8,152.8 L70.6,155.6 L74.3,161.5 L74.6,161.9 L75.7,163.6 L77.1,165.6 L80.0,169.8 L83.2,174.4 L83.5,174.8 L83.9,175.3 L84.5,176.0 L85.4,176.8 L86.3,177.4 L87.6,178.3 L88.7,179.0 L89.2,180.0 L89.3,180.4 L88.2,180.8 L88.7,182.0 L95.3,179.3 L103.7,176.2 L112.0,173.1 L118.2,170.9 L124.1,169.0 L124.6,168.9 L132.5,166.5 L137.9,165.0 L138.7,164.8 L139.4,164.6 L141.0,164.2 L142.5,163.8 L143.3,163.6 L144.0,163.5 L146.8,163.0 L148.7,162.6 L151.7,162.2 L158.6,161.3 L160.4,161.1 L161.1,161.1 L161.9,161.0 L162.1,162.2 L163.9,162.0 L164.1,163.8 L165.9,170.4 L167.7,176.3 L167.8,176.7 L166.8,177.0 L166.9,177.2 L167.1,178.1 L167.4,179.1 L167.4,179.3 L168.5,179.0 L168.6,179.2 L168.6,179.4 L170.6,187.0 L170.9,188.2 L179.1,216.8 L186.5,243.4 L186.8,245.1 L187.8,244.9 L188.8,245.2 L188.9,245.2 L189.7,245.7 L190.4,246.5 L190.8,247.4 L190.9,248.5 L190.6,249.5 L190.1,250.4 L191.5,250.5 L194.5,252.6 L195.9,254.7 L207.1,295.5 L214.4,321.7 L212.6,323.8 L208.8,324.9 L208.7,324.7 L208.1,325.0 L206.5,325.5 L206.3,325.6 L205.0,326.0 L203.8,326.2 L201.9,326.7 L199.0,327.5 L199.1,328.3 L199.5,330.1 L199.7,330.9 L200.0,332.3 L196.2,333.3 L196.4,334.1 L196.5,334.2 L198.2,340.1 L198.4,345.5 L198.1,349.1 L197.5,352.3 L196.8,355.1 L196.0,358.3 L193.1,365.5 L193.1,365.5 L189.9,372.2 L182.3,384.9 L182.1,385.9 L178.2,391.8 L175.8,395.3 L173.8,397.9 L171.9,399.6 L167.7,402.6 L164.5,404.6 L162.0,406.2 L160.1,406.4 L160.0,406.4 L159.8,406.5 L159.7,406.5 L159.6,406.5 L159.1,406.6 L158.7,406.6 L158.4,406.6 L159.4,410.4 L159.5,411.1 L159.4,411.4 L159.3,411.6 L158.5,411.9 L142.5,416.4 L135.7,418.3 L132.9,419.0 L131.2,418.9 L130.3,418.8 L129.3,418.5 L128.2,418.0 L101.6,401.1 L101.5,401.3 L101.0,402.1 L100.5,402.9 L100.3,403.1 L97.6,401.5 L96.8,401.7 L96.2,402.1 L96.0,402.7 L96.0,403.3 L97.1,407.4 L96.6,407.4 L95.9,406.7 L95.5,406.5 L95.3,406.4 L94.9,406.1 L94.2,405.7 L94.1,405.6 L93.9,405.5 L93.4,405.1 L93.1,404.6 L90.9,402.9\";const DEFAULT_START=[90.9,402.9];/**\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n * @framerDisableUnlink\n */export default function RouteDraw({map,path=DEFAULT_PATH,startX=DEFAULT_START[0],startY=DEFAULT_START[1],color=\"#BE185D\",strokeWidth=4,duration=2.4,delay=.9,showHead=true,showStart=true,replay=false,viewWidth=393,viewHeight=594,style}){const VIEW_W=viewWidth;const VIEW_H=viewHeight;const ref=useRef(null);const pathRef=useRef(null);const inView=useInView(ref,{once:!replay,amount:.4});const reduce=useReducedMotion();const[progress,setProgress]=useState(reduce?1:0);const[head,setHead]=useState({x:startX,y:startY});useEffect(()=>{if(reduce){setProgress(1);return;}if(!inView){if(replay)setProgress(0);return;}const controls=animate(0,1,{duration,delay,ease:[.65,0,.35,1],onUpdate:v=>{setProgress(v);const p=pathRef.current;if(p){const pt=p.getPointAtLength(v*p.getTotalLength());setHead({x:pt.x,y:pt.y});}}});return()=>controls.stop();},[inView,reduce,duration,delay,replay]);const done=progress>=.999;return /*#__PURE__*/_jsx(\"div\",{ref:ref,style:{width:\"100%\",height:\"100%\",...style,position:\"relative\",overflow:\"hidden\"},children:/*#__PURE__*/_jsxs(\"svg\",{viewBox:`0 0 ${VIEW_W} ${VIEW_H}`,preserveAspectRatio:\"xMidYMid slice\",width:\"100%\",height:\"100%\",style:{display:\"block\"},children:[map?.src&&/*#__PURE__*/_jsx(\"image\",{href:map.src,x:\"0\",y:\"0\",width:VIEW_W,height:VIEW_H,preserveAspectRatio:\"xMidYMid slice\"}),/*#__PURE__*/_jsx(\"path\",{ref:pathRef,d:path,fill:\"none\",stroke:\"none\"}),/*#__PURE__*/_jsx(motion.path,{d:path,fill:\"none\",stroke:color,strokeWidth:strokeWidth,strokeLinecap:\"round\",strokeLinejoin:\"round\",style:{pathLength:progress,filter:\"drop-shadow(0 1px 1.5px rgba(0,0,0,0.25))\"}}),showHead&&progress>0&&!done&&/*#__PURE__*/_jsx(\"circle\",{cx:head.x,cy:head.y,r:strokeWidth*1.4,fill:\"#fff\",stroke:color,strokeWidth:2}),showStart&&/*#__PURE__*/_jsx(motion.circle,{cx:startX,cy:startY,r:7,fill:\"#030712\",stroke:\"#fff\",strokeWidth:3,initial:{scale:reduce?1:0},animate:{scale:inView||reduce?1:0},transition:{delay:reduce?0:Math.max(0,delay-.2),duration:.3},style:{transformOrigin:`${startX}px ${startY}px`}})]})});}addPropertyControls(RouteDraw,{map:{type:ControlType.ResponsiveImage,title:\"Map image\"},color:{type:ControlType.Color,title:\"Route\",defaultValue:\"#BE185D\"},strokeWidth:{type:ControlType.Number,title:\"Width\",defaultValue:4,min:1,max:12,step:.5},duration:{type:ControlType.Number,title:\"Draw time\",defaultValue:2.4,min:.2,max:10,step:.1,unit:\"s\"},delay:{type:ControlType.Number,title:\"Delay\",defaultValue:.9,min:0,max:5,step:.05,unit:\"s\",description:\"0.9s starts the draw once the phones have risen into place.\"},showHead:{type:ControlType.Boolean,title:\"Runner dot\",defaultValue:true},showStart:{type:ControlType.Boolean,title:\"Start dot\",defaultValue:true},replay:{type:ControlType.Boolean,title:\"Replay in view\",defaultValue:false},viewWidth:{type:ControlType.Number,title:\"Map width\",defaultValue:393,description:\"393 phone \\xb7 633 desktop\"},viewHeight:{type:ControlType.Number,title:\"Map height\",defaultValue:594,description:\"594 phone \\xb7 876 desktop\"},path:{type:ControlType.String,title:\"SVG path\",defaultValue:DEFAULT_PATH,displayTextArea:true,description:\"From route-paths.json, in the map image's pixel space.\"},startX:{type:ControlType.Number,title:\"Start X\",defaultValue:DEFAULT_START[0]},startY:{type:ControlType.Number,title:\"Start Y\",defaultValue:DEFAULT_START[1]}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"RouteDraw\",\"slots\":[],\"annotations\":{\"framerDisableUnlink\":\"\",\"framerSupportedLayoutHeight\":\"fixed\",\"framerSupportedLayoutWidth\":\"fixed\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./RouteDraw.map"],"mappings":"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"}