{"version":3,"file":"WorkCard.OX_b7Cyt.mjs","names":["useState","useRef"],"sources":["https:/framerusercontent.com/modules/1NbJGfkhcy3mRwiwk2LG/g3Yd7tGviLMZIuZ2AWh4/WorkCard.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import{useState,useEffect,useRef}from\"react\";const CARDS={nike:{image:\"https://framerusercontent.com/images/HAshXiWSqNYjJ2gEiG5mkZDPdQ.jpg\",title:\"nike: tiempo legend vii\",subtitle:\"visual identity\",focalX:.5,focalY:.5,zoom:1},\"motion-awards\":{image:\"https://framerusercontent.com/images/tX7Yb07ZjxAuz5jr3fQaQqsTc.png\",title:\"motion awards 2021\",subtitle:\"motion design \\xb7 3d \\xb7 sound\",focalX:.5,focalY:.5,zoom:1},\"sarasota-orchestra\":{image:\"https://framerusercontent.com/images/Q9VG5j100Vhz8UWMTs6eon4qH8.webp\",title:\"sarasota orchestra rebrand\",subtitle:\"brand identity \\xb7 visual systems\",focalX:.5,focalY:.5,zoom:1},\"in-sync\":{image:\"https://framerusercontent.com/images/UGvpeTrafKmjIPvDbtLPV07auU.webp\",title:\"in sync\",subtitle:\"stop motion \\xb7 3d \\xb7 art direction\",focalX:.5,focalY:.5,zoom:1},\"ally-ai-video\":{image:\"https://framerusercontent.com/images/2vW070ANouUgcZulZP8ASeUVG0.png\",title:\"ally financial: ai video concept\",subtitle:\"creative direction \\xb7 motion design\",// zoomed in to crop out the black letterbox bars top/bottom\nfocalX:.5,focalY:.5,zoom:1.3},\"olympics\":{image:\"https://framerusercontent.com/images/qQnnNlWLP0lRInCVmLjMvLzRCE.png\",title:\"paris 2024 olympics\",subtitle:\"broadcast design \\xb7 motion graphics\",focalX:0,focalY:.5,zoom:1},\"coming-soon\":{image:\"\",title:\"coming soon\",subtitle:\"new case study\",focalX:.5,focalY:.5,zoom:1}};const PIXEL_STEPS=[32,16,8,4,2,1];const STEP_DURATION=80;export default function WorkCard({project=\"nike\",style}){const card=CARDS[project];const[onImage,setOnImage]=useState(false);const imgRef=useRef(null);const stepRef=useRef(0);const timerRef=useRef(null);const canvasRef=useRef(null);const containerRef=useRef(null);function drawStep(step){const canvas=canvasRef.current;const img=imgRef.current;if(!canvas||!img)return;const ctx=canvas.getContext(\"2d\");if(!ctx)return;const cw=canvas.width,ch=canvas.height;const coverScale=Math.max(cw/img.naturalWidth,ch/img.naturalHeight);const zoom=card.zoom??1;const scale=coverScale*zoom;const sw=img.naturalWidth*scale,sh=img.naturalHeight*scale;const focalX=card.focalX??.5;const focalY=card.focalY??.5;const sx=(cw-sw)*focalX;const sy=(ch-sh)*focalY;if(step>=PIXEL_STEPS.length){ctx.imageSmoothingEnabled=true;ctx.clearRect(0,0,cw,ch);ctx.drawImage(img,sx,sy,sw,sh);return;}const pxSize=PIXEL_STEPS[step];const smallW=Math.max(1,Math.floor(cw/pxSize));const smallH=Math.max(1,Math.floor(ch/pxSize));const off=document.createElement(\"canvas\");off.width=smallW;off.height=smallH;const octx=off.getContext(\"2d\");octx.imageSmoothingEnabled=true;octx.drawImage(img,sx*smallW/cw,sy*smallH/ch,sw*smallW/cw,sh*smallH/ch);ctx.imageSmoothingEnabled=false;ctx.clearRect(0,0,cw,ch);ctx.drawImage(off,0,0,cw,ch);}function startReveal(){clearInterval(timerRef.current);stepRef.current=0;const el=containerRef.current;const dpr=window.devicePixelRatio||1;const canvas=canvasRef.current;if(canvas&&el){canvas.width=el.clientWidth*dpr;canvas.height=el.clientHeight*dpr;}timerRef.current=setInterval(()=>{drawStep(stepRef.current);stepRef.current++;if(stepRef.current>PIXEL_STEPS.length)clearInterval(timerRef.current);},STEP_DURATION);}useEffect(()=>{if(!card.image)return;const img=new Image;img.onload=()=>{imgRef.current=img;startReveal();};img.src=card.image;return()=>clearInterval(timerRef.current);},[card.image]);useEffect(()=>{const el=containerRef.current;if(!el)return;const observer=new ResizeObserver(()=>{if(imgRef.current)startReveal();});observer.observe(el);return()=>observer.disconnect();},[]);return /*#__PURE__*/_jsxs(\"div\",{style:{width:\"100%\",height:\"100%\",display:\"flex\",flexDirection:\"column\",gap:12,fontFamily:\"'Funnel Sans', sans-serif\",...style},onMouseEnter:()=>setOnImage(true),onMouseLeave:()=>setOnImage(false),children:[/*#__PURE__*/_jsx(\"div\",{ref:containerRef,\"data-cursor\":\"hover\",style:{flex:1,borderRadius:8,overflow:\"hidden\",position:\"relative\",backgroundColor:\"rgb(31,31,31)\"},children:card.image?/*#__PURE__*/_jsx(\"canvas\",{ref:canvasRef,style:{width:\"100%\",height:\"100%\",display:\"block\",imageRendering:\"pixelated\",transform:onImage?\"scale(1.04)\":\"scale(1)\",transition:\"transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)\"}}):/*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",height:\"100%\",backgroundColor:\"rgb(31,31,31)\"}})}),/*#__PURE__*/_jsxs(\"div\",{children:[/*#__PURE__*/_jsx(\"p\",{style:{margin:0,fontSize:20,fontWeight:500,letterSpacing:\"-0.02em\",textTransform:\"lowercase\",color:\"rgb(236,232,223)\",lineHeight:1.2},children:card.title}),/*#__PURE__*/_jsx(\"p\",{style:{margin:\"4px 0 0\",fontSize:14,opacity:.5,letterSpacing:\"-0.02em\",textTransform:\"lowercase\",color:\"rgb(236,232,223)\",lineHeight:1.2},children:card.subtitle})]})]});}addPropertyControls(WorkCard,{project:{type:ControlType.Enum,title:\"Project\",options:Object.keys(CARDS),optionTitles:[\"Nike\",\"Motion Awards\",\"Sarasota Orchestra\",\"In Sync\",\"Ally AI Video\",\"Olympics\",\"Coming Soon\"],defaultValue:\"nike\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"WorkCard\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./WorkCard.map"],"mappings":"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"}