{"version":3,"file":"DitherWave.BcAPhy_P.mjs","names":["useRef","useState","useMemo","useCallback"],"sources":["https:/framerusercontent.com/modules/XnwSdTbXEqoDnt0QZspf/VTiugUFkZs1YcjRqYCaf/DitherWave.js"],"sourcesContent":["// Optimized Dither Wave component with performance improvements\nimport{jsx as _jsx}from\"react/jsx-runtime\";import{useRef,useEffect,useState,useCallback,useMemo}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{useInView}from\"framer-motion\";/**\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n */export default function DitherWave(props){const{amplitude=80,frequency=.015,speed=.02,dotSize=3,backgroundColor=\"#000000\",primaryColor=\"#00FF88\",secondaryColor=\"#0088FF\",isPlaying=true,direction=\"forward\"}=props;const canvasRef=useRef(null);const animationRef=useRef();const timeRef=useRef(0);const lastFrameTime=useRef(0);const isStatic=useIsStaticRenderer();const isInView=useInView(canvasRef,{margin:\"100px\"});// Show animation in preview mode and when in view\nconst shouldAnimate=(isInView||typeof window!==\"undefined\")&&!isStatic;const[canvasSize,setCanvasSize]=useState({width:400,height:300});// Frame rate limiting - target 30fps instead of 60fps\nconst targetFPS=30;const frameInterval=1e3/targetFPS;// Update canvas size based on container\nuseEffect(()=>{const updateCanvasSize=()=>{const canvas=canvasRef.current;if(!canvas||!canvas.parentElement)return;const rect=canvas.parentElement.getBoundingClientRect();const newWidth=Math.max(rect.width,100);const newHeight=Math.max(rect.height,100);setCanvasSize({width:newWidth,height:newHeight});};updateCanvasSize();if(typeof window!==\"undefined\"){window.addEventListener(\"resize\",updateCanvasSize);return()=>window.removeEventListener(\"resize\",updateCanvasSize);}},[]);// Bayer matrix for ordered dithering\nconst bayerMatrix=useMemo(()=>[[0,8,2,10],[12,4,14,6],[3,11,1,9],[15,7,13,5]],[]);// Memoize grid calculations to avoid recalculating on every frame\nconst gridData=useMemo(()=>{const spacing=dotSize+1;const cols=Math.floor(canvasSize.width/spacing);const rows=Math.floor(canvasSize.height/spacing);const grid=[];for(let x=0;x<cols;x++){for(let y=0;y<rows;y++){grid.push({x,y,pixelX:x*spacing,pixelY:y*spacing,bayerX:x%4,bayerY:y%4});}}return{grid,cols,rows,spacing};},[canvasSize.width,canvasSize.height,dotSize]);// Pre-calculate blob positions to reduce calculations per frame\nconst calculateBlobPositions=useCallback(time=>{const{width,height}=canvasSize;return[{x:width*.3+Math.sin(time*.8)*amplitude*1.5,y:height*.4+Math.cos(time*.6)*amplitude*1.2,size:80+Math.sin(time*.9)*30},{x:width*.7+Math.cos(time*.7+Math.PI)*amplitude*1.3,y:height*.6+Math.sin(time*.5+Math.PI)*amplitude*1.1,size:70+Math.cos(time*1.1)*25},{x:width*.5+Math.sin(time*.4+Math.PI*.5)*amplitude*.8,y:height*.3+Math.cos(time*.8+Math.PI*.5)*amplitude*.9,size:60+Math.sin(time*1.3)*20}];},[canvasSize.width,canvasSize.height,amplitude]);const drawDitheredWave=useCallback((ctx,time)=>{const{width,height}=canvasSize;// Clear canvas\nctx.fillStyle=backgroundColor;ctx.fillRect(0,0,width,height);const blobs=calculateBlobPositions(time);const{grid}=gridData;// Batch drawing operations by color to reduce context switches\nconst primaryPixels=[];const secondaryPixels=[];const alphaPixels=[];for(const point of grid){const{pixelX,pixelY,bayerX,bayerY}=point;// Calculate intensity for all blobs\nlet intensity=0;// Primary blob\nconst dist1=Math.sqrt((pixelX-blobs[0].x)**2+(pixelY-blobs[0].y)**2);intensity=Math.max(intensity,Math.max(0,1-dist1/blobs[0].size));// Secondary blob\nconst dist2=Math.sqrt((pixelX-blobs[1].x)**2+(pixelY-blobs[1].y)**2);intensity=Math.max(intensity,Math.max(0,1-dist2/blobs[1].size));// Tertiary blob\nconst dist3=Math.sqrt((pixelX-blobs[2].x)**2+(pixelY-blobs[2].y)**2);intensity=Math.max(intensity,Math.max(0,1-dist3/blobs[2].size));// Add connecting tendrils between blobs (simplified)\nconst tendril1=Math.exp(-Math.abs(pixelY-(blobs[0].y+(blobs[1].y-blobs[0].y)*(pixelX/width)))/20);const tendril2=Math.exp(-Math.abs(pixelY-(blobs[1].y+(blobs[2].y-blobs[1].y)*(pixelX/width)))/15);intensity=Math.max(intensity,tendril1*.4,tendril2*.3);// Apply Bayer dithering\nconst bayerValue=bayerMatrix[bayerY][bayerX]/15;// Determine if pixel should be drawn based on Bayer threshold\nif(intensity>bayerValue){// Choose color based on intensity and blob proximity\nconst colorPhase=Math.sin(pixelX*.02+pixelY*.015+time*.5)*.5+.5;if(intensity>.7&&colorPhase>.6){primaryPixels.push({x:pixelX,y:pixelY});}else if(intensity>.4){secondaryPixels.push({x:pixelX,y:pixelY});}else{alphaPixels.push({x:pixelX,y:pixelY});}}}// Batch draw pixels by color to minimize context switches\nctx.fillStyle=primaryColor;for(const pixel of primaryPixels){ctx.fillRect(pixel.x,pixel.y,dotSize,dotSize);}ctx.fillStyle=secondaryColor;for(const pixel of secondaryPixels){ctx.fillRect(pixel.x,pixel.y,dotSize,dotSize);}ctx.fillStyle=primaryColor;ctx.globalAlpha=.5;for(const pixel of alphaPixels){ctx.fillRect(pixel.x,pixel.y,dotSize,dotSize);}ctx.globalAlpha=1;},[amplitude,frequency,backgroundColor,primaryColor,secondaryColor,dotSize,canvasSize,bayerMatrix,calculateBlobPositions,gridData]);const animate=useCallback(currentTime=>{const canvas=canvasRef.current;if(!canvas)return;const ctx=canvas.getContext(\"2d\");if(!ctx)return;// Frame rate limiting\nif(currentTime-lastFrameTime.current<frameInterval){if(isInView&&!isStatic){animationRef.current=requestAnimationFrame(animate);}return;}lastFrameTime.current=currentTime;if(isPlaying){const speedMultiplier=direction===\"reverse\"?-1:1;timeRef.current+=speed*speedMultiplier;}drawDitheredWave(ctx,timeRef.current);if(isInView&&!isStatic){animationRef.current=requestAnimationFrame(animate);}},[drawDitheredWave,speed,isInView,isStatic,isPlaying,direction,frameInterval]);const drawStaticPreview=useCallback(()=>{const canvas=canvasRef.current;if(!canvas)return;const ctx=canvas.getContext(\"2d\");if(!ctx)return;drawDitheredWave(ctx,0);},[drawDitheredWave]);useEffect(()=>{const canvas=canvasRef.current;if(!canvas)return;canvas.width=canvasSize.width;canvas.height=canvasSize.height;if(isStatic){drawStaticPreview();}else if(isInView){animationRef.current=requestAnimationFrame(animate);}return()=>{if(animationRef.current){cancelAnimationFrame(animationRef.current);}};},[animate,drawStaticPreview,isStatic,isInView,canvasSize]);useEffect(()=>{if(isInView&&!isStatic&&!animationRef.current){animationRef.current=requestAnimationFrame(animate);}else if(!isInView&&animationRef.current){cancelAnimationFrame(animationRef.current);animationRef.current=undefined;}},[isInView,isStatic,animate]);return /*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",height:\"100%\",display:\"flex\",justifyContent:\"center\",alignItems:\"center\",overflow:\"hidden\",...props.style},children:/*#__PURE__*/_jsx(\"canvas\",{ref:canvasRef,style:{width:\"100%\",height:\"100%\",objectFit:\"contain\"}})});}addPropertyControls(DitherWave,{amplitude:{type:ControlType.Number,title:\"Amplitude\",defaultValue:80,min:20,max:150,step:5},frequency:{type:ControlType.Number,title:\"Frequency\",defaultValue:.015,min:.005,max:.05,step:.005},speed:{type:ControlType.Number,title:\"Speed\",defaultValue:.02,min:0,max:.2,step:.005},isPlaying:{type:ControlType.Boolean,title:\"Animation\",defaultValue:true,enabledTitle:\"Playing\",disabledTitle:\"Paused\"},direction:{type:ControlType.Enum,title:\"Direction\",defaultValue:\"forward\",options:[\"forward\",\"reverse\"],optionTitles:[\"Forward\",\"Reverse\"],displaySegmentedControl:true},dotSize:{type:ControlType.Number,title:\"Dot Size\",defaultValue:3,min:1,max:8,step:1},backgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"#000000\"},primaryColor:{type:ControlType.Color,title:\"Primary Color\",defaultValue:\"#00FF88\"},secondaryColor:{type:ControlType.Color,title:\"Secondary Color\",defaultValue:\"#0088FF\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"DitherWave\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"fixed\",\"framerSupportedLayoutHeight\":\"fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./DitherWave.map"],"mappings":"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"}