{"version":3,"file":"DepthImageEffect.DP0kjl51.mjs","names":["useRef"],"sources":["https:/framerusercontent.com/modules/MMWKrXJ1P4oBlGjfn5Ue/XwwoP8Ee4Xoaw7gkaHsF/DepthImageEffect.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import{useEffect,useRef}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";/**\n * Fake 3D Image Effect\n *\n * @framerIntrinsicWidth 800\n * @framerIntrinsicHeight 600\n *\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n */export default function DepthImageEffect(props){const{originalImage={src:\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",alt:\"Original Image\"},depthMap={src:\"https://framerusercontent.com/images/aNsAT3jCvt4zglbWCUoFe33Q.jpg\",alt:\"Depth Map\"},xThreshold=20,yThreshold=35,mouseSensitivity=.5,style}=props;const canvasRef=useRef(null);const glRef=useRef(null);const programRef=useRef(null);const cursorRef=useRef({x:0,y:0,lerpX:0,lerpY:0});const animationFrameRef=useRef(null);const texturesRef=useRef({original:null,depth:null});const isStatic=useIsStaticRenderer();useEffect(()=>{if(!canvasRef.current||isStatic)return;const canvas=canvasRef.current;const gl=canvas.getContext(\"webgl\",{alpha:false,antialias:true});if(!gl)return;glRef.current=gl;const vertexShader=`\n\t\t\tattribute vec2 a_position;\n\t\t\tattribute vec2 a_texCoord;\n\t\t\tvarying vec2 v_texCoord;\n\t\t\tvoid main() {\n\t\t\t\tgl_Position = vec4(a_position, 0.0, 1.0);\n\t\t\t\tv_texCoord = a_texCoord;\n\t\t\t}\n\t\t`;const fragmentShader=`\n\t\t\tprecision mediump float;\n\t\t\tuniform sampler2D u_originalTexture;\n\t\t\tuniform sampler2D u_depthTexture;\n\t\t\tuniform vec2 u_mouse;\n\t\t\tuniform vec2 u_threshold;\n\t\t\tvarying vec2 v_texCoord;\n\n\t\t\tvec2 mirrored(vec2 v) {\n\t\t\t\tvec2 m = mod(v, 2.0);\n\t\t\t\treturn mix(m, 2.0 - m, step(1.0, m));\n\t\t\t}\n\n\t\t\tvoid main() {\n\t\t\t\tvec4 depthMap = texture2D(u_depthTexture, mirrored(v_texCoord));\n\t\t\t\tvec2 fake3d = vec2(\n\t\t\t\t\tv_texCoord.x + (depthMap.r - 0.5) * u_mouse.x / u_threshold.x,\n\t\t\t\t\tv_texCoord.y + (depthMap.r - 0.5) * u_mouse.y / u_threshold.y\n\t\t\t\t);\n\t\t\t\tgl_FragColor = texture2D(u_originalTexture, mirrored(fake3d));\n\t\t\t}\n\t\t`;const compileShader=(type,source)=>{const shader=gl.createShader(type);if(!shader)return null;gl.shaderSource(shader,source);gl.compileShader(shader);return shader;};const vs=compileShader(gl.VERTEX_SHADER,vertexShader);const fs=compileShader(gl.FRAGMENT_SHADER,fragmentShader);if(!vs||!fs)return;const program=gl.createProgram();if(!program)return;gl.attachShader(program,vs);gl.attachShader(program,fs);gl.linkProgram(program);gl.useProgram(program);programRef.current=program;const setupBuffer=(data,attribName)=>{const buffer=gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER,buffer);gl.bufferData(gl.ARRAY_BUFFER,data,gl.STATIC_DRAW);const location=gl.getAttribLocation(program,attribName);gl.enableVertexAttribArray(location);gl.vertexAttribPointer(location,2,gl.FLOAT,false,0,0);};setupBuffer(new Float32Array([-1,-1,1,-1,-1,1,1,1]),\"a_position\");setupBuffer(new Float32Array([0,1,1,1,0,0,1,0]),\"a_texCoord\");const loadTexture=url=>{return new Promise((resolve,reject)=>{const texture=gl.createTexture();if(!texture)return reject();const image=new Image;image.onload=()=>{gl.bindTexture(gl.TEXTURE_2D,texture);gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,gl.RGBA,gl.UNSIGNED_BYTE,image);gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_S,gl.CLAMP_TO_EDGE);gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_T,gl.CLAMP_TO_EDGE);gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.LINEAR);gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER,gl.LINEAR);resolve(texture);};image.onerror=reject;image.crossOrigin=\"anonymous\";image.src=url;});};Promise.all([loadTexture(originalImage.src),loadTexture(depthMap.src)]).then(([originalTex,depthTex])=>{texturesRef.current={original:originalTex,depth:depthTex};gl.uniform1i(gl.getUniformLocation(program,\"u_originalTexture\"),0);gl.uniform1i(gl.getUniformLocation(program,\"u_depthTexture\"),1);// Set canvas size based on container\nconst updateSize=()=>{const dpr=Math.min(window.devicePixelRatio||1,2);const rect=canvas.getBoundingClientRect();canvas.width=rect.width*dpr;canvas.height=rect.height*dpr;gl.viewport(0,0,canvas.width,canvas.height);};updateSize();let lastTime=0;const animate=time=>{const deltaTime=(time-lastTime)/1e3;lastTime=time;const parallaxX=cursorRef.current.x*mouseSensitivity;const parallaxY=-cursorRef.current.y*mouseSensitivity;cursorRef.current.lerpX+=(parallaxX-cursorRef.current.lerpX)*5*deltaTime;cursorRef.current.lerpY+=(parallaxY-cursorRef.current.lerpY)*5*deltaTime;gl.uniform2f(gl.getUniformLocation(program,\"u_mouse\"),cursorRef.current.lerpX,cursorRef.current.lerpY);gl.uniform2f(gl.getUniformLocation(program,\"u_threshold\"),xThreshold,yThreshold);gl.activeTexture(gl.TEXTURE0);gl.bindTexture(gl.TEXTURE_2D,originalTex);gl.activeTexture(gl.TEXTURE1);gl.bindTexture(gl.TEXTURE_2D,depthTex);gl.viewport(0,0,canvas.width,canvas.height);gl.clearColor(0,0,0,1);gl.clear(gl.COLOR_BUFFER_BIT);gl.drawArrays(gl.TRIANGLE_STRIP,0,4);animationFrameRef.current=requestAnimationFrame(animate);};animationFrameRef.current=requestAnimationFrame(animate);});return()=>{if(animationFrameRef.current)cancelAnimationFrame(animationFrameRef.current);if(texturesRef.current.original)gl.deleteTexture(texturesRef.current.original);if(texturesRef.current.depth)gl.deleteTexture(texturesRef.current.depth);if(programRef.current)gl.deleteProgram(programRef.current);};},[originalImage.src,depthMap.src,xThreshold,yThreshold,mouseSensitivity,isStatic]);// Mouse/Touch handlers\nconst handleMouseMove=event=>{if(!canvasRef.current)return;const rect=canvasRef.current.getBoundingClientRect();cursorRef.current.x=(event.clientX-rect.left)/rect.width-.5;cursorRef.current.y=(event.clientY-rect.top)/rect.height-.5;};const handleMouseLeave=()=>{cursorRef.current.x=0;cursorRef.current.y=0;};const handleTouchMove=event=>{if(!canvasRef.current)return;const rect=canvasRef.current.getBoundingClientRect();const touch=event.touches[0];cursorRef.current.x=(touch.clientX-rect.left)/rect.width-.5;cursorRef.current.y=(touch.clientY-rect.top)/rect.height-.5;};if(isStatic){return /*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",height:\"100%\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",backgroundColor:\"#000\"},children:/*#__PURE__*/_jsx(\"img\",{src:originalImage.src,alt:originalImage.alt,style:{width:\"100%\",height:\"100%\",objectFit:\"fill\"}})});}return /*#__PURE__*/_jsx(\"canvas\",{ref:canvasRef,style:{...style,width:\"100%\",height:\"100%\",display:\"block\",touchAction:\"none\"},onMouseMove:handleMouseMove,onMouseLeave:handleMouseLeave,onTouchMove:handleTouchMove,onTouchEnd:handleMouseLeave});}addPropertyControls(DepthImageEffect,{originalImage:{type:ControlType.ResponsiveImage,title:\"Original Image\"},depthMap:{type:ControlType.ResponsiveImage,title:\"Depth Map\"},xThreshold:{type:ControlType.Number,title:\"X Threshold\",defaultValue:20,min:0,max:50,step:1},yThreshold:{type:ControlType.Number,title:\"Y Threshold\",defaultValue:35,min:0,max:50,step:1},mouseSensitivity:{type:ControlType.Number,title:\"Mouse Sensitivity\",defaultValue:.5,min:0,max:2,step:.1,description:\"component made by [1042 Studio](https://www.1042.studio/)\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"DepthImageEffect\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"fixed\",\"framerSupportedLayoutWidth\":\"fixed\",\"framerIntrinsicHeight\":\"600\",\"framerIntrinsicWidth\":\"800\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./DepthImageEffect.map"],"mappings":"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"}