{"version":3,"file":"ShimmerDot_Prod.5hsPvbC7.mjs","names":["useRef","useState","useMemo"],"sources":["https:/framerusercontent.com/modules/DUVzJQodDTCwiiMKuNbI/2yhbwm9XFCHvLs24O3wG/ShimmerDot_Prod.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useEffect,useRef,useMemo,useState}from\"react\";import{motion}from\"framer-motion\";import{addPropertyControls,ControlType}from\"framer\";const extractRGBColorFromString=str=>{const rgbRegex=/(rgba|rgb)\\(.*?\\)/g;const match=str.match(rgbRegex);return match?match[0]:\"rgb(255,255,255)\";};// Perlin noise implementation\nfunction noise(x,y){const X=Math.floor(x)&255;const Y=Math.floor(y)&255;x-=Math.floor(x);y-=Math.floor(y);const u=fade(x);const v=fade(y);const A=p[X]+Y,B=p[X+1]+Y;return lerp(v,lerp(u,grad(p[A],x,y),grad(p[B],x-1,y)),lerp(u,grad(p[A+1],x,y-1),grad(p[B+1],x-1,y-1)));}function fade(t){return t*t*t*(t*(t*6-15)+10);}function lerp(t,a,b){return a+t*(b-a);}function grad(hash,x,y){const h=hash&15;const u=h<8?x:y;const v=h<4?y:h===12||h===14?x:0;return((h&1)===0?u:-u)+((h&2)===0?v:-v);}const p=new Array(512);for(let i=0;i<256;i++)p[i]=p[i+256]=Math.floor(Math.random()*256);function generatePerlinNoise(width,height,cellSize){const canvas=document.createElement(\"canvas\");canvas.width=width;canvas.height=height;const ctx=canvas.getContext(\"2d\");const imageData=ctx.createImageData(width,height);const data=imageData.data;for(let y=0;y<height;y++){for(let x=0;x<width;x++){const value=(noise(x/cellSize,y/cellSize)+1)/2*255;const cell=(x+y*width)*4;data[cell]=data[cell+1]=data[cell+2]=value;data[cell+3]=255;}}ctx.putImageData(imageData,0,0);return canvas;}function createSeamlessPerlinNoise(width,height,cellSize){const singleNoise=generatePerlinNoise(width,height,cellSize);const canvas=document.createElement(\"canvas\");canvas.width=width*4;canvas.height=height;const ctx=canvas.getContext(\"2d\");// Draw the first noise pattern\nctx.drawImage(singleNoise,0,0);// Draw the flipped middle pattern\nctx.save();ctx.translate(width*2,0);ctx.scale(-1,1);ctx.drawImage(singleNoise,0,0);ctx.restore();// Draw the third noise pattern\nctx.drawImage(singleNoise,width*2,0);// Draw the flipped fourth image\nctx.save();ctx.translate(width*4,0);ctx.scale(-1,1);ctx.drawImage(singleNoise,0,0);ctx.restore();return canvas.toDataURL();}/*\n * @framerDisableUnlink\n *\n * @framerIntrinsicWidth 500\n * @framerIntrinsicHeight 500\n *\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n */export default function PerlinWall(props){const{shapeType,size,gap,colors,contrast,animation:{animate,speed},radius}=props;const containerRef=useRef(null);const canvasRef=useRef(null);const[isClient,setIsClient]=useState(false);const[dimensions,setDimensions]=useState({width:0,height:0});useEffect(()=>{setIsClient(true);},[]);const perlinNoiseDataUrl=useMemo(()=>{const{height,width}=dimensions;if(!isClient||height===0||width===0)return\"\";const cellSize=Math.max(25,size*2);return createSeamlessPerlinNoise(width,height,cellSize);},[size,isClient,dimensions]);// Calculate animation duration\nconst animationDuration=useMemo(()=>{const{height,width}=dimensions;if(height!==0&&width!==0){const maxSpeed=100;const minSpeed=1;const baseValue=width*2250;const powerFactor=Math.log(baseValue/(baseValue/100))/Math.log(maxSpeed);return Math.round(baseValue/Math.pow(speed,powerFactor));}},[speed,size,dimensions]);useEffect(()=>{if(!isClient)return;const container=containerRef.current;const canvas=canvasRef.current;if(!container||!canvas)return;const ctx=canvas.getContext(\"2d\");const resizeCanvas=()=>{canvas.width=container.offsetWidth;canvas.height=container.offsetHeight;drawShapes();};const drawShapes=()=>{ctx.clearRect(0,0,canvas.width,canvas.height);const colorBatch=colors.length>0?colors.map(extractRGBColorFromString):// black and white backgrounds.\n[\"rgb(128,128,128)\"];for(let y=0;y<canvas.height;y+=size+gap){for(let x=0;x<canvas.width;x+=size+gap){const color=colorBatch[Math.floor(Math.random()*colorBatch.length)];const opacity=getRandomOpacity();ctx.fillStyle=color.replace(\")\",`,${opacity})`);if(shapeType===\"Square\"){ctx.fillRect(x,y,size,size);}else{ctx.beginPath();ctx.arc(x+size/2,y+size/2,size/2,0,2*Math.PI);ctx.fill();}}}};const getRandomOpacity=()=>{let opacity=Math.random();if(contrast>0){opacity=Math.pow(opacity,1+contrast/5);}else if(contrast<0){opacity=1-Math.pow(1-opacity,1-contrast/5);}return opacity;};resizeCanvas();// const resizeObserver = new ResizeObserver(resizeCanvas)\nconst resizeObserver=new ResizeObserver(entries=>{for(let entry of entries){const{width,height}=entry.contentRect;setDimensions({width,height});}resizeCanvas();});resizeObserver.observe(container);return()=>{resizeObserver.disconnect();};},[shapeType,size,gap,colors,contrast,isClient]);if(!isClient){return /*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",height:\"100%\"}});}const animationStyles=animate?{mask:`url(${perlinNoiseDataUrl}) luminance`,WebkitMask:`url(${perlinNoiseDataUrl}) luminance`,maskImage:animate?`url(${perlinNoiseDataUrl})`:\"\",maskMode:\"luminance\",WebkitMaskImage:`url(${perlinNoiseDataUrl})`,WebkitMaskMode:\"luminance\",maskSize:\"300% 100%\",WebkitMaskSize:\"300% 100%\",maskRepeat:\"repeat-x\",WebkitMaskRepeat:\"repeat-x\",animation:`moveMask ${animationDuration}ms linear infinite`,willChange:\"mask-position\"}:{};return /*#__PURE__*/_jsxs(motion.div,{ref:containerRef,style:{width:\"100%\",height:\"100%\",borderRadius:radius,overflow:\"hidden\"},children:[/*#__PURE__*/_jsx(\"canvas\",{ref:canvasRef,style:{...animationStyles,width:\"100%\",height:\"100%\"}}),/*#__PURE__*/_jsx(\"style\",{children:`\n    @keyframes moveMask {\n        0% { \n            mask-position: 0% 0%;\n            -webkit-mask-position: 0% 0%;\n        }\n        100% { \n            mask-position: -${300*(size/10)}% 0%;\n            -webkit-mask-position: -${300*(size/10)}% 0%;\n        }\n    }\n    `})]});}PerlinWall.displayName=\"Shimmer Dot\";PerlinWall.defaultProps={shapeType:\"Square\",size:3,gap:8,colors:[],contrast:0,speed:15,radius:0};addPropertyControls(PerlinWall,{shapeType:{type:ControlType.Enum,options:[\"Square\",\"Circle\"],defaultValue:PerlinWall.defaultProps.shapeType,displaySegmentedControl:true,segmentedControlDirection:\"vertical\"},size:{type:ControlType.Number,defaultValue:PerlinWall.defaultProps.size,min:1,max:20,step:1},gap:{type:ControlType.Number,defaultValue:PerlinWall.defaultProps.gap,min:0,max:20,step:1},colors:{type:ControlType.Array,control:{type:ControlType.Color},defaultValue:PerlinWall.defaultProps.colors},contrast:{type:ControlType.Number,defaultValue:PerlinWall.defaultProps.contrast,min:-10,max:10,step:1,displayStepper:true},animation:{type:ControlType.Object,title:\"Animation\",controls:{animate:{type:ControlType.Boolean,defaultValue:true,title:\"Animate\"},speed:{type:ControlType.Number,defaultValue:PerlinWall.defaultProps.speed,min:1,max:100,step:1,title:\"Speed\",hidden:({animate})=>!animate}}},radius:{type:ControlType.Number,defaultValue:PerlinWall.defaultProps.radius,min:0,max:1e3,step:1,description:\"More components at [Framer University](https://frameruni.link/cc).\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"PerlinWall\",\"slots\":[],\"annotations\":{\"framerIntrinsicHeight\":\"500\",\"framerIntrinsicWidth\":\"500\",\"framerSupportedLayoutHeight\":\"fixed\",\"framerSupportedLayoutWidth\":\"fixed\",\"framerDisableUnlink\":\"*\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ShimmerDot_Prod.map"],"mappings":"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"}