{"version":3,"file":"GradientDottedLine.DymROE2v.mjs","names":["React.useRef","React.useMemo"],"sources":["https:/framerusercontent.com/modules/aIc3mRhIHMMK2O2WjzKE/zeGe5tpI9PBQFPWyVM8H/GradientDottedLine.js"],"sourcesContent":["// User request: created dotted line with animating gradient (to the RHS)\nimport{jsx as _jsx}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{motion,useInView}from\"framer-motion\";/**\n * Gradient Dotted Line\n *\n * @framerIntrinsicWidth 300\n * @framerIntrinsicHeight 8\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight fixed\n */export default function GradientDottedLine(props){const{thickness,dotSize,dotSpacing,speed,direction,color1,color2,color3,backgroundColor,gradientWidth,opacity,style}=props;const isStatic=useIsStaticRenderer();const ref=React.useRef(null);const inView=useInView(ref,{amount:.2});const safeThickness=Number.isFinite(thickness)?Math.max(1,thickness):8;const safeDotSize=Number.isFinite(dotSize)?Math.max(1,dotSize):3;const safeDotSpacing=Number.isFinite(dotSpacing)?Math.max(safeDotSize+1,dotSpacing):12;const safeGradientWidth=Number.isFinite(gradientWidth)?Math.max(20,gradientWidth):220;const safeSpeed=Number.isFinite(speed)?Math.max(0,speed):6;const backgroundImage=React.useMemo(()=>{// A slightly complex gradient reads well while animating.\nreturn`linear-gradient(90deg, ${color1} 0%, ${color2} 40%, ${color3} 70%, ${color1} 100%)`;},[color1,color2,color3]);const maskImage=React.useMemo(()=>{// Single dot centered in each tile; repeated in X.\nconst r=safeDotSize/2;// Use a tiny transition edge to reduce shimmering.\nconst edge=Math.max(.5,r*.15);return`radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 0px, rgba(0,0,0,1) ${Math.max(0,r-edge)}px, rgba(0,0,0,0) ${r+edge}px)`;},[safeDotSize]);const shouldAnimate=!isStatic&&inView&&safeSpeed>0;// Move one full gradient tile per loop for a seamless cycle.\nconst distance=direction===\"right\"?safeGradientWidth:-safeGradientWidth;return /*#__PURE__*/_jsx(motion.div,{ref:ref,\"aria-hidden\":true,style:{...style,position:\"relative\",width:\"100%\",height:safeThickness,borderRadius:safeThickness/2,backgroundColor,opacity,overflow:\"hidden\"},children:/*#__PURE__*/_jsx(motion.div,{style:{position:\"absolute\",inset:0,backgroundImage,backgroundSize:`${safeGradientWidth}px 100%`,backgroundRepeat:\"repeat\",// Dots via CSS mask\nWebkitMaskImage:maskImage,WebkitMaskSize:`${safeDotSpacing}px 100%`,WebkitMaskRepeat:\"repeat\",WebkitMaskPosition:\"0 50%\",maskImage,maskSize:`${safeDotSpacing}px 100%`,maskRepeat:\"repeat\",maskPosition:\"0 50%\"},animate:shouldAnimate?{backgroundPositionX:[0,distance]}:{backgroundPositionX:0},transition:shouldAnimate?{duration:safeSpeed,ease:\"linear\",repeat:Infinity}:undefined})});}addPropertyControls(GradientDottedLine,{thickness:{type:ControlType.Number,title:\"Thickness\",defaultValue:8,min:1,max:60,step:1,unit:\"px\"},dotSize:{type:ControlType.Number,title:\"Dot Size\",defaultValue:3,min:1,max:40,step:1,unit:\"px\"},dotSpacing:{type:ControlType.Number,title:\"Dot Spacing\",defaultValue:12,min:2,max:80,step:1,unit:\"px\"},gradientWidth:{type:ControlType.Number,title:\"Gradient\",defaultValue:220,min:20,max:800,step:1,unit:\"px\"},speed:{type:ControlType.Number,title:\"Speed\",defaultValue:6,min:0,max:30,step:.1,unit:\"s\"},direction:{type:ControlType.Enum,title:\"Direction\",options:[\"right\",\"left\"],optionTitles:[\"Right\",\"Left\"],defaultValue:\"right\",displaySegmentedControl:true},color1:{type:ControlType.Color,title:\"Color 1\",defaultValue:\"#000000\"},color2:{type:ControlType.Color,title:\"Color 2\",defaultValue:\"#CCCCCC\"},color3:{type:ControlType.Color,title:\"Color 3\",defaultValue:\"#000000\"},backgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"#FFFFFF\"},opacity:{type:ControlType.Number,title:\"Opacity\",defaultValue:1,min:0,max:1,step:.05}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"GradientDottedLine\",\"slots\":[],\"annotations\":{\"framerIntrinsicWidth\":\"300\",\"framerIntrinsicHeight\":\"8\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"fixed\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./GradientDottedLine.map"],"mappings":"kPASG,SAAwB,EAAmB,EAAM,CAAC,GAAK,CAAC,YAAU,UAAQ,aAAW,QAAM,YAAU,SAAO,SAAO,SAAO,kBAAgB,gBAAc,UAAQ,SAAO,EAAY,EAAS,GAAqB,CAAO,EAAIA,EAAa,KAAK,CAAO,EAAO,EAAU,EAAI,CAAC,OAAO,GAAG,CAAC,CAAO,EAAc,OAAO,SAAS,EAAU,CAAC,KAAK,IAAI,EAAE,EAAU,CAAC,EAAQ,EAAY,OAAO,SAAS,EAAQ,CAAC,KAAK,IAAI,EAAE,EAAQ,CAAC,EAAQ,EAAe,OAAO,SAAS,EAAW,CAAC,KAAK,IAAI,EAAY,EAAE,EAAW,CAAC,GAAS,EAAkB,OAAO,SAAS,EAAc,CAAC,KAAK,IAAI,GAAG,EAAc,CAAC,IAAU,EAAU,OAAO,SAAS,EAAM,CAAC,KAAK,IAAI,EAAE,EAAM,CAAC,EAAQ,EAAgBC,MAC1pB,0BAA0B,EAAO,OAAO,EAAO,QAAQ,EAAO,QAAQ,EAAO,QAAU,CAAC,EAAO,EAAO,EAAO,CAAC,CAAO,EAAUA,MAAkB,CACvJ,IAAM,EAAE,EAAY,EACd,EAAK,KAAK,IAAI,GAAG,EAAE,IAAI,CAAC,MAAM,uEAAuE,KAAK,IAAI,EAAE,EAAE,EAAK,CAAC,oBAAoB,EAAE,EAAK,MAAO,CAAC,EAAY,CAAC,CAAO,EAAc,CAAC,GAAU,GAAQ,EAAU,EAC1N,EAAS,IAAY,QAAQ,EAAkB,CAAC,EAAkB,OAAoB,EAAK,EAAO,IAAI,CAAK,MAAI,cAAc,GAAK,MAAM,CAAC,GAAG,EAAM,SAAS,WAAW,MAAM,OAAO,OAAO,EAAc,aAAa,EAAc,EAAE,kBAAgB,UAAQ,SAAS,SAAS,CAAC,SAAsB,EAAK,EAAO,IAAI,CAAC,MAAM,CAAC,SAAS,WAAW,MAAM,EAAE,kBAAgB,eAAe,GAAG,EAAkB,SAAS,iBAAiB,SAC9a,gBAAgB,EAAU,eAAe,GAAG,EAAe,SAAS,iBAAiB,SAAS,mBAAmB,QAAQ,YAAU,SAAS,GAAG,EAAe,SAAS,WAAW,SAAS,aAAa,QAAQ,CAAC,QAAQ,EAAc,CAAC,oBAAoB,CAAC,EAAE,EAAS,CAAC,CAAC,CAAC,oBAAoB,EAAE,CAAC,WAAW,EAAc,CAAC,SAAS,EAAU,KAAK,SAAS,OAAO,IAAS,CAAC,IAAA,GAAU,CAAC,CAAC,CAAC,kBAbhV,IAA4B,IAAwE,IAA4C,CAakM,EAAoB,EAAmB,CAAC,UAAU,CAAC,KAAK,EAAY,OAAO,MAAM,YAAY,aAAa,EAAE,IAAI,EAAE,IAAI,GAAG,KAAK,EAAE,KAAK,KAAK,CAAC,QAAQ,CAAC,KAAK,EAAY,OAAO,MAAM,WAAW,aAAa,EAAE,IAAI,EAAE,IAAI,GAAG,KAAK,EAAE,KAAK,KAAK,CAAC,WAAW,CAAC,KAAK,EAAY,OAAO,MAAM,cAAc,aAAa,GAAG,IAAI,EAAE,IAAI,GAAG,KAAK,EAAE,KAAK,KAAK,CAAC,cAAc,CAAC,KAAK,EAAY,OAAO,MAAM,WAAW,aAAa,IAAI,IAAI,GAAG,IAAI,IAAI,KAAK,EAAE,KAAK,KAAK,CAAC,MAAM,CAAC,KAAK,EAAY,OAAO,MAAM,QAAQ,aAAa,EAAE,IAAI,EAAE,IAAI,GAAG,KAAK,GAAG,KAAK,IAAI,CAAC,UAAU,CAAC,KAAK,EAAY,KAAK,MAAM,YAAY,QAAQ,CAAC,QAAQ,OAAO,CAAC,aAAa,CAAC,QAAQ,OAAO,CAAC,aAAa,QAAQ,wBAAwB,GAAK,CAAC,OAAO,CAAC,KAAK,EAAY,MAAM,MAAM,UAAU,aAAa,UAAU,CAAC,OAAO,CAAC,KAAK,EAAY,MAAM,MAAM,UAAU,aAAa,UAAU,CAAC,OAAO,CAAC,KAAK,EAAY,MAAM,MAAM,UAAU,aAAa,UAAU,CAAC,gBAAgB,CAAC,KAAK,EAAY,MAAM,MAAM,aAAa,aAAa,UAAU,CAAC,QAAQ,CAAC,KAAK,EAAY,OAAO,MAAM,UAAU,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC,CAAC"}