{"version":3,"file":"Hover_Fill.0q35rdev.mjs","names":["useRef"],"sources":["https:/framerusercontent.com/modules/kjRKwtscJA2VO8uXJqol/7BQZ5oNMQBUz3iTrBYMF/Hover_Fill.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import{animate,useMotionValue,useReducedMotion}from\"framer-motion\";import{useEffect,useRef}from\"react\";/**\n * Hover Fill\n * Fill is hidden by default. On hover it wipes in from the left,\n * and on hover out it wipes away starting from the left.\n * While animating, the moving edge can break into stripes (same look as\n * Split Reveal's Stripes): thickest next to the edge, thinner and further\n * apart toward the outside, fading out as the wipe settles.\n *\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n * @framerIntrinsicWidth 200\n * @framerIntrinsicHeight 60\n */export default function HoverFill(props){const{fillColor,showBackground,backgroundColor,radius,transition:userTransition,stripes:stripesProp,style}=props;const stripes={on:true,strength:50,count:3,thickness:.55,taper:.5,hold:.7,minWidth:20,...stripesProp};const reduceMotion=useReducedMotion();const fillRef=useRef(null);// Wipe state, in % of the width. The fill covers [from, to].\n// Entering: `to` moves 0 → 100 with `from` at 0.\n// Leaving: `from` moves 0 → `to` (the width it had when the leave began).\nconst mode=useRef(\"idle\");const to=useRef(0);const leaveEnd=useRef(100);const t=useMotionValue(0)// progress of the current phase, 0 → 1\n;const running=useRef(null);// Uses Framer's built-in transition picker; instant when reduced motion is on\nconst transition=reduceMotion?{type:\"tween\",duration:0}:userTransition;const draw=()=>{const el=fillRef.current;if(!el)return;const p=t.get();let from=0;let end=0;let edge=0;let dir=1// stripes trail to the right (+1) or left (-1) of the edge\n;if(mode.current===\"enter\"){end=edge=to.current=100*p;}else if(mode.current===\"leave\"){end=leaveEnd.current;from=edge=100*p;dir=-1;}// Envelope: 0 at the start and end of the wipe, full in between.\n// `hold` widens the full-strength middle so stripes stay readable.\nconst hold=Math.min(.95,Math.max(0,stripes.hold??.7));const amount=stripes.on!==false&&!reduceMotion&&mode.current!==\"idle\"?Math.min(1,Math.sin(Math.PI*Math.min(1,Math.max(0,p)))/(1-hold)):0;const width=el.parentElement?.offsetWidth||100;const spans=[];if(end>from)spans.push([from,end]);if(amount>.01&&end>from){stripeSpans(edge,dir,amount*Math.max(0,stripes.strength??50),stripes.count??3,stripes.thickness??.55,stripes.taper??.5,// Floor follows the envelope so stripes grow in and fade out\namount*100*Math.max(0,stripes.minWidth??20)/width).forEach(s=>spans.push(s));}const v=combPolygon(spans);el.style.clipPath=v;el.style.webkitClipPath=v;};useEffect(()=>{draw();const unsub=t.on(\"change\",draw);return()=>{unsub();running.current?.stop();};// eslint-disable-next-line react-hooks/exhaustive-deps\n},[stripes.on,stripes.strength,stripes.count,stripes.thickness,stripes.taper,stripes.hold,stripes.minWidth,reduceMotion]);const handleEnter=()=>{running.current?.stop();// Hidden or mid-exit: restart from the left edge.\n// Mid-enter: keep going from where the edge is.\nif(mode.current!==\"enter\"){mode.current=\"enter\";t.set(0);}running.current=animate(t,1,transition);};const handleLeave=()=>{running.current?.stop();if(mode.current===\"idle\")return;// Retract from the left, then reset for the next hover\nleaveEnd.current=mode.current===\"enter\"?to.current:leaveEnd.current;mode.current=\"leave\";t.set(0);running.current=animate(t,leaveEnd.current/100,{...transition,onComplete:()=>{mode.current=\"idle\";to.current=0;t.set(0);}});};return /*#__PURE__*/_jsx(\"div\",{onMouseEnter:handleEnter,onMouseLeave:handleLeave,style:{...style,position:\"relative\",width:\"100%\",height:\"100%\",overflow:\"hidden\",borderRadius:radius,background:showBackground?backgroundColor:\"transparent\"},children:/*#__PURE__*/_jsx(\"div\",{ref:fillRef,style:{position:\"absolute\",inset:0,background:fillColor,clipPath:\"inset(0% 100% 0% 0%)\",WebkitClipPath:\"inset(0% 100% 0% 0%)\",pointerEvents:\"none\"}})});}/**\n * Stripes trailing outward from `edge` (in %) toward `dir` (+1 right, -1 left)\n * within `spread` %: gap, stripe, gap, stripe… Stripes get thinner further out\n * (by `taper`) and gaps get wider. `thickness` is the share covered by stripes.\n * Same layout as Split Reveal's stripes. Stripes and gaps are at least `minPct`\n * wide once the spread is large enough to hold them.\n */function stripeSpans(edge,dir,spread,count,thickness,taper,minPct=0){const n=Math.max(1,Math.round(count));const tp=Math.min(1,Math.max(0,taper));const wRel=[];const gRel=[];for(let i=1;i<=n;i++){wRel.push(1-tp*(n>1?(i-1)/(n-1):0));gRel.push(Math.pow(i,1.5));}const sum=v=>v.reduce((a,b)=>a+b,0);const th=Math.min(.95,Math.max(.05,thickness));const wScale=spread*th/sum(wRel);const gScale=spread*(1-th)/sum(gRel);const out=[];let d=0;// Scale the stripes with `spread`, but never below `minPct` (a pixel floor\n// converted to %). The floor wins even if the stripes then reach past\n// `spread`; anything beyond the item is clipped.\nfor(let i=0;i<n;i++){d+=Math.max(gRel[i]*gScale,minPct);const w=Math.max(wRel[i]*wScale,minPct);const a=edge+dir*d;const b=edge+dir*(d+w);out.push([Math.min(a,b),Math.max(a,b)]);d+=w;}return out;}/** Several vertical spans as one clip-path: a \"comb\" joined along the top edge. */function combPolygon(spans){const pts=[];spans.map(([a,b])=>[Math.max(0,a),Math.min(100,b)]).filter(([a,b])=>b-a>=.01).sort((p,q)=>p[0]-q[0]).forEach(([a,b])=>{const A=a.toFixed(3);const B=b.toFixed(3);pts.push(`${A}% 0%`,`${A}% 100%`,`${B}% 100%`,`${B}% 0%`);});return pts.length?`polygon(${pts.join(\", \")})`:\"inset(0% 100% 0% 0%)\";}HoverFill.defaultProps={fillColor:\"#FFFFFF\",showBackground:true,backgroundColor:\"rgba(0,0,0,0)\",radius:0,transition:{type:\"tween\",duration:.35,ease:[.65,0,.35,1]}};addPropertyControls(HoverFill,{fillColor:{type:ControlType.Color,title:\"Fill\"},showBackground:{type:ControlType.Boolean,title:\"Background\",enabledTitle:\"On\",disabledTitle:\"Off\"},backgroundColor:{type:ControlType.Color,title:\"BG Color\",hidden:p=>!p.showBackground},radius:{type:ControlType.Number,title:\"Radius\",min:0,max:100},transition:{type:ControlType.Transition,title:\"Animation\",defaultValue:{type:\"tween\",duration:.35,ease:[.65,0,.35,1]}},stripes:{type:ControlType.Object,title:\"Stripes\",controls:{on:{type:ControlType.Boolean,title:\"Enable\",defaultValue:true,description:\"The moving edge breaks into stripes while the fill animates.\"},strength:{type:ControlType.Number,title:\"Strength\",defaultValue:50,min:0,max:100,step:1,unit:\"%\",description:\"How far the stripes trail from the edge (% of the fill's width).\",hidden:p=>p.on===false},count:{type:ControlType.Number,title:\"Stripes\",defaultValue:3,min:1,max:12,step:1,displayStepper:true,hidden:p=>p.on===false},thickness:{type:ControlType.Number,title:\"Thickness\",defaultValue:.55,min:.1,max:.9,step:.05,description:\"Share of the stripe area covered by stripes (the rest is gaps).\",hidden:p=>p.on===false},taper:{type:ControlType.Number,title:\"Taper\",defaultValue:.5,min:0,max:.95,step:.05,description:\"How much thinner the outermost stripe is than the innermost. 0 = all equal.\",hidden:p=>p.on===false},hold:{type:ControlType.Number,title:\"Hold\",defaultValue:.7,min:0,max:.95,step:.05,description:\"How long stripes stay at full size during the wipe. 0 = brief peak mid-way.\",hidden:p=>p.on===false},minWidth:{type:ControlType.Number,title:\"Min Width\",defaultValue:20,min:0,max:60,step:1,unit:\"px\",description:\"Smallest stripe or gap width. Stripes may reach past Strength to keep it; the item's edge clips them.\",hidden:p=>p.on===false}}}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"HoverFill\",\"slots\":[],\"annotations\":{\"framerIntrinsicWidth\":\"200\",\"framerIntrinsicHeight\":\"60\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"fixed\",\"framerSupportedLayoutHeight\":\"fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Hover_Fill.map"],"mappings":"gPAYG,SAAwB,EAAU,EAAM,CAAC,GAAK,CAAC,YAAU,iBAAe,kBAAgB,SAAO,WAAW,EAAe,QAAQ,EAAY,SAAO,EAAY,EAAQ,CAAC,GAAG,GAAK,SAAS,GAAG,MAAM,EAAE,UAAU,IAAI,MAAM,GAAG,KAAK,GAAG,SAAS,GAAG,GAAG,CAAW,EAAQ,EAAa,EAAiB,EAAQ,EAAQA,EAAO,IAAI,EAG5T,EAAKA,EAAO,MAAM,EAAQ,EAAGA,EAAO,CAAC,EAAQ,EAASA,EAAO,GAAG,EAAQ,EAAE,EAAe,CAAC,EACzF,EAAQA,EAAO,IAAI,EACpB,EAAW,EAAa,CAAC,KAAK,QAAQ,SAAS,CAAC,EAAE,EAAqB,MAAS,CAAC,IAAM,EAAG,EAAQ,QAAQ,GAAG,CAAC,EAAG,OAAO,IAAM,EAAE,EAAE,IAAI,EAAM,EAAK,EAAM,EAAI,EAAM,EAAK,EAAM,EAAI,EAClL,EAAK,UAAU,QAAS,EAAI,EAAK,EAAG,QAAQ,IAAI,EAAW,EAAK,UAAU,UAAS,EAAI,EAAS,QAAQ,EAAK,EAAK,IAAI,EAAE,EAAI,IAEhI,IAAM,EAAK,KAAK,IAAI,IAAI,KAAK,IAAI,EAAE,EAAQ,MAAM,EAAE,CAAC,EAAQ,EAAO,EAAQ,KAAK,IAAO,CAAC,GAAc,EAAK,UAAU,OAAO,KAAK,IAAI,EAAE,KAAK,IAAI,KAAK,GAAG,KAAK,IAAI,EAAE,KAAK,IAAI,EAAE,CAAC,CAAC,CAAC,GAAG,EAAE,EAAK,EAAE,EAAQ,EAAM,EAAG,eAAe,aAAa,IAAU,EAAM,CAAC,EAAK,EAAI,GAAK,EAAM,KAAK,CAAC,EAAK,CAAG,CAAC,EAAK,EAAO,KAAK,EAAI,GAAM,EAAY,EAAK,EAAI,EAAO,KAAK,IAAI,EAAE,EAAQ,UAAU,EAAE,EAAE,EAAQ,OAAO,EAAE,EAAQ,WAAW,IAAI,EAAQ,OAAO,GAC7a,EAAO,IAAI,KAAK,IAAI,EAAE,EAAQ,UAAU,EAAE,EAAE,CAAK,CAAC,CAAC,QAAQ,GAAG,EAAM,KAAK,CAAC,CAAC,EAAG,IAAM,EAAE,EAAY,CAAK,EAAE,EAAG,MAAM,SAAS,EAAE,EAAG,MAAM,eAAe,CAAE,EAIyE,OAJvE,MAAc,CAAC,EAAK,EAAE,IAAM,EAAM,EAAE,GAAG,SAAS,CAAI,EAAE,UAAU,CAAC,EAAM,EAAE,EAAQ,SAAS,KAAK,CAAE,CAC1P,EAAE,CAAC,EAAQ,GAAG,EAAQ,SAAS,EAAQ,MAAM,EAAQ,UAAU,EAAQ,MAAM,EAAQ,KAAK,EAAQ,SAAS,CAAY,CAAC,EAG4H,EAAK,MAAM,CAAC,iBAHhH,CAAC,EAAQ,SAAS,KAAK,EAEpK,EAAK,UAAU,UAAS,EAAK,QAAQ,QAAQ,EAAE,IAAI,CAAC,GAAG,EAAQ,QAAQ,EAAQ,EAAE,EAAE,CAAU,CAAE,EACuL,iBAD/J,CAAC,EAAQ,SAAS,KAAK,EAAK,EAAK,UAAU,SACrK,EAAS,QAAQ,EAAK,UAAU,QAAQ,EAAG,QAAQ,EAAS,QAAQ,EAAK,QAAQ,QAAQ,EAAE,IAAI,CAAC,EAAE,EAAQ,QAAQ,EAAQ,EAAE,EAAS,QAAQ,IAAI,CAAC,GAAG,EAAW,eAAe,CAAC,EAAK,QAAQ,OAAO,EAAG,QAAQ,EAAE,EAAE,IAAI,CAAC,CAAE,CAAC,CAAC,EAAE,EAAoF,MAAM,CAAC,GAAG,EAAM,SAAS,WAAW,MAAM,OAAO,OAAO,OAAO,SAAS,SAAS,aAAa,EAAO,WAAW,EAAe,EAAgB,aAAa,EAAE,SAAsB,EAAK,MAAM,CAAC,IAAI,EAAQ,MAAM,CAAC,SAAS,WAAW,MAAM,EAAE,WAAW,EAAU,SAAS,uBAAuB,eAAe,uBAAuB,cAAc,MAAM,CAAC,CAAC,CAAC,CAAC,CAAE,CAMnpB,SAAS,EAAY,EAAK,EAAI,EAAO,EAAM,EAAU,EAAM,EAAO,EAAE,CAAC,IAAM,EAAE,KAAK,IAAI,EAAE,KAAK,MAAM,CAAK,CAAC,EAAQ,EAAG,KAAK,IAAI,EAAE,KAAK,IAAI,EAAE,CAAK,CAAC,EAAQ,EAAK,CAAC,EAAQ,EAAK,CAAC,EAAE,IAAI,IAAI,EAAE,EAAE,GAAG,EAAE,IAAK,EAAK,KAAK,EAAE,GAAI,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,EAAK,KAAc,GAAE,GAAI,EAAG,IAAM,EAAI,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,CAAC,EAAQ,EAAG,KAAK,IAAI,IAAI,KAAK,IAAI,IAAI,CAAS,CAAC,EAAQ,EAAO,EAAO,EAAG,EAAI,CAAI,EAAQ,EAAO,GAAQ,EAAE,GAAI,EAAI,CAAI,EAAQ,EAAI,CAAC,EAAM,EAAE,EAGnb,IAAI,IAAI,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,GAAG,KAAK,IAAI,EAAK,GAAG,EAAO,CAAM,EAAE,IAAM,EAAE,KAAK,IAAI,EAAK,GAAG,EAAO,CAAM,EAAQ,EAAE,EAAK,EAAI,EAAQ,EAAE,EAAK,GAAK,EAAE,GAAG,EAAI,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC,EAAE,KAAK,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG,CAAE,CAAC,OAAO,CAAI,CAAoF,SAAS,EAAY,EAAM,CAAC,IAAM,EAAI,CAAC,EAAgO,OAA9N,EAAM,KAAK,CAAC,EAAE,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC,EAAE,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,GAAG,GAAG,CAAC,CAAC,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,KAAK,CAAC,IAAM,EAAE,EAAE,QAAQ,CAAC,EAAQ,EAAE,EAAE,QAAQ,CAAC,EAAE,EAAI,KAAK,GAAG,EAAE,MAAM,GAAG,EAAE,QAAQ,GAAG,EAAE,QAAQ,GAAG,EAAE,KAAK,CAAE,CAAC,EAAS,EAAI,OAAO,WAAW,EAAI,KAAK,IAAI,EAAE,GAAG,sBAAuB,iBAlC1jB,IAAoD,IAAmE,IAAoC,EAkCga,EAAU,aAAa,CAAC,UAAU,UAAU,eAAe,GAAK,gBAAgB,gBAAgB,OAAO,EAAE,WAAW,CAAC,KAAK,QAAQ,SAAS,IAAI,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,EAAoB,EAAU,CAAC,UAAU,CAAC,KAAK,EAAY,MAAM,MAAM,MAAM,EAAE,eAAe,CAAC,KAAK,EAAY,QAAQ,MAAM,aAAa,aAAa,KAAK,cAAc,KAAK,EAAE,gBAAgB,CAAC,KAAK,EAAY,MAAM,MAAM,WAAW,OAAO,GAAG,CAAC,EAAE,cAAc,EAAE,OAAO,CAAC,KAAK,EAAY,OAAO,MAAM,SAAS,IAAI,EAAE,IAAI,GAAG,EAAE,WAAW,CAAC,KAAK,EAAY,WAAW,MAAM,YAAY,aAAa,CAAC,KAAK,QAAQ,SAAS,IAAI,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC,KAAK,EAAY,OAAO,MAAM,UAAU,SAAS,CAAC,GAAG,CAAC,KAAK,EAAY,QAAQ,MAAM,SAAS,aAAa,GAAK,YAAY,8DAA8D,EAAE,SAAS,CAAC,KAAK,EAAY,OAAO,MAAM,WAAW,aAAa,GAAG,IAAI,EAAE,IAAI,IAAI,KAAK,EAAE,KAAK,IAAI,YAAY,mEAAmE,OAAO,GAAG,EAAE,KAAK,EAAK,EAAE,MAAM,CAAC,KAAK,EAAY,OAAO,MAAM,UAAU,aAAa,EAAE,IAAI,EAAE,IAAI,GAAG,KAAK,EAAE,eAAe,GAAK,OAAO,GAAG,EAAE,KAAK,EAAK,EAAE,UAAU,CAAC,KAAK,EAAY,OAAO,MAAM,YAAY,aAAa,IAAI,IAAI,GAAG,IAAI,GAAG,KAAK,IAAI,YAAY,kEAAkE,OAAO,GAAG,EAAE,KAAK,EAAK,EAAE,MAAM,CAAC,KAAK,EAAY,OAAO,MAAM,QAAQ,aAAa,GAAG,IAAI,EAAE,IAAI,IAAI,KAAK,IAAI,YAAY,8EAA8E,OAAO,GAAG,EAAE,KAAK,EAAK,EAAE,KAAK,CAAC,KAAK,EAAY,OAAO,MAAM,OAAO,aAAa,GAAG,IAAI,EAAE,IAAI,IAAI,KAAK,IAAI,YAAY,8EAA8E,OAAO,GAAG,EAAE,KAAK,EAAK,EAAE,SAAS,CAAC,KAAK,EAAY,OAAO,MAAM,YAAY,aAAa,GAAG,IAAI,EAAE,IAAI,GAAG,KAAK,EAAE,KAAK,KAAK,YAAY,wGAAwG,OAAO,GAAG,EAAE,KAAK,EAAK,CAAC,CAAC,CAAC,CAAC"}