{"version":3,"file":"GradientDottedLine.CEfR50_H.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":"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"}