{"version":3,"file":"ScrollProgressIndicator.C4FErVM7.mjs","names":["useState","useRef","_Fragment"],"sources":["https:/framerusercontent.com/modules/qVHbCGoqwKS3gmEWtvsB/Qn0UCVxPKnpPQ0nRadt3/ScrollProgressIndicator.js"],"sourcesContent":["// Page Scroll Progress Indicator\n// Horizontal line at the top that fills as user scrolls, with solid or gradient fill\nimport{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from\"react/jsx-runtime\";import{useEffect,useRef,useState,startTransition}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer,RenderTarget}from\"framer\";/**\n * Page Scroll Progress Indicator\n *\n * @framerIntrinsicWidth 600\n * @framerIntrinsicHeight 8\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight fixed\n */export default function ScrollProgressIndicator(props){const{fillType,solidColor,gradientStart,gradientEnd,height,background,borderRadius,velocityBased,celebrationEffect,style}=props;const[progress,setProgress]=useState(0);const[velocity,setVelocity]=useState(0);const[showCelebration,setShowCelebration]=useState(false);const isStatic=useIsStaticRenderer();const requestRef=useRef();const lastScrollRef=useRef(0);const lastTimeRef=useRef(0);const celebrationTimeoutRef=useRef();const hasReachedEndRef=useRef(false);// Calculate scroll progress with velocity tracking\nuseEffect(()=>{if(isStatic||typeof window===\"undefined\")return;function updateProgress(){const scrollTop=window.scrollY||window.pageYOffset;const docHeight=document.documentElement.scrollHeight-window.innerHeight;const percent=docHeight>0?Math.min(Math.max(scrollTop/docHeight,0),1):0;// Trigger celebration effect when reaching 100% for the first time only\nif(celebrationEffect&&percent>=1&&!hasReachedEndRef.current){hasReachedEndRef.current=true;startTransition(()=>setShowCelebration(true));celebrationTimeoutRef.current=window.setTimeout(()=>{startTransition(()=>setShowCelebration(false));},2e3);}// Reset celebration flag when scrolling back up significantly\nif(percent<.95){hasReachedEndRef.current=false;}startTransition(()=>setProgress(percent));}// Set up scroll listener\nwindow.addEventListener(\"scroll\",updateProgress,{passive:true});// Initial calculation\nupdateProgress();return()=>{window.removeEventListener(\"scroll\",updateProgress);if(celebrationTimeoutRef.current)clearTimeout(celebrationTimeoutRef.current);};},[isStatic,celebrationEffect]);// Calculate dynamic transition duration based on velocity\nconst getTransitionDuration=()=>{if(!velocityBased)return\"0.25s\";// Map velocity to duration (higher velocity = shorter duration)\nconst baseMs=250;const velocityFactor=Math.min(velocity*100,1)// Normalize velocity\n;const dynamicMs=baseMs*(1-velocityFactor*.7)// Reduce duration by up to 70%\n;return`${Math.max(dynamicMs,50)}ms`// Minimum 50ms\n;};// Fill style\nconst fillStyle={position:\"absolute\",top:0,left:0,height,width:`${progress*100}%`,borderRadius,transition:`width 0.25s cubic-bezier(0.4,0,0.2,1)`,background:fillType===\"solid\"?solidColor:`linear-gradient(90deg, ${gradientStart}, ${gradientEnd})`};// Container style\nconst containerStyle={position:\"relative\",width:\"100%\",height,background,borderRadius,overflow:\"visible\",...style};// Hide in thumbnail\nif(RenderTarget.current()===RenderTarget.thumbnail)return null;return /*#__PURE__*/_jsxs(\"div\",{style:containerStyle,\"aria-label\":\"Scroll progress bar\",role:\"progressbar\",\"aria-valuenow\":Math.round(progress*100),\"aria-valuemin\":0,\"aria-valuemax\":100,children:[/*#__PURE__*/_jsx(\"div\",{style:fillStyle}),celebrationEffect&&showCelebration&&/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:-4,left:-4,right:-4,bottom:-4,borderRadius:borderRadius+4,background:fillType===\"solid\"?solidColor:`linear-gradient(90deg, ${gradientStart}, ${gradientEnd})`,opacity:.8,filter:\"blur(8px)\",animation:\"celebrationGlow 1.5s ease-out\",pointerEvents:\"none\"}}),Array.from({length:20}).map((_,i)=>{const angle=i/20*Math.PI*2;const distance=30+i%3*10;const x=Math.cos(angle)*distance;const y=Math.sin(angle)*distance;return /*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:\"50%\",left:\"100%\",width:6,height:6,borderRadius:\"50%\",background:fillType===\"solid\"?solidColor:gradientEnd,transform:\"translate(-50%, -50%)\",animation:`celebrationParticle 1.5s ease-out`,animationDelay:`${i*.05}s`,opacity:0,pointerEvents:\"none\",\"--particle-x\":`${x}px`,\"--particle-y\":`${y}px`}},i);}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:0,left:0,right:0,bottom:0,borderRadius,background:fillType===\"solid\"?solidColor:`linear-gradient(90deg, ${gradientStart}, ${gradientEnd})`,animation:\"celebrationPulse 1.5s ease-out\",pointerEvents:\"none\"}})]}),/*#__PURE__*/_jsx(\"style\",{children:`\n        @keyframes celebrationGlow {\n          0% { opacity: 0; transform: scale(1); }\n          30% { opacity: 0.8; transform: scale(1.15); }\n          100% { opacity: 0; transform: scale(1.3); }\n        }\n        \n        @keyframes celebrationPulse {\n          0%, 100% { opacity: 1; transform: scale(1); }\n          50% { opacity: 0.6; transform: scale(1.08); }\n        }\n        \n        @keyframes celebrationParticle {\n          0% { \n            opacity: 1; \n            transform: translate(-50%, -50%) translate(0, 0) scale(1); \n          }\n          100% { \n            opacity: 0; \n            transform: translate(-50%, -50%) translate(var(--particle-x), var(--particle-y)) scale(0); \n          }\n        }\n      `})]});}addPropertyControls(ScrollProgressIndicator,{fillType:{type:ControlType.Enum,title:\"Fill Type\",options:[\"solid\",\"gradient\"],optionTitles:[\"Solid\",\"Gradient\"],defaultValue:\"solid\",displaySegmentedControl:true},solidColor:{type:ControlType.Color,title:\"Solid Color\",defaultValue:\"#0099FF\",hidden:({fillType})=>fillType!==\"solid\"},gradientStart:{type:ControlType.Color,title:\"Gradient Start\",defaultValue:\"#0099FF\",hidden:({fillType})=>fillType!==\"gradient\"},gradientEnd:{type:ControlType.Color,title:\"Gradient End\",defaultValue:\"#8855FF\",hidden:({fillType})=>fillType!==\"gradient\"},velocityBased:{type:ControlType.Boolean,title:\"Velocity Animation\",defaultValue:true,enabledTitle:\"Adaptive\",disabledTitle:\"Fixed\"},celebrationEffect:{type:ControlType.Boolean,title:\"100% Celebration\",defaultValue:true,enabledTitle:\"Enabled\",disabledTitle:\"Disabled\"},height:{type:ControlType.Number,title:\"Height\",defaultValue:8,min:2,max:32,unit:\"px\"},background:{type:ControlType.Color,title:\"Background\",defaultValue:\"#EEEEEE\"},borderRadius:{type:ControlType.Number,title:\"Radius\",defaultValue:4,min:0,max:32,unit:\"px\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ScrollProgressIndicator\",\"slots\":[],\"annotations\":{\"framerIntrinsicWidth\":\"600\",\"framerIntrinsicHeight\":\"8\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ScrollProgressIndicator.map"],"mappings":"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"}