{"version":3,"file":"ScreenWall.BiLb0gMm.mjs","names":["useRef","useState","c","__esmMin","init_ssg_sandbox_shims","window","_e","de","p","init_npm_react_18_3_1","ce","init_framer_CaDWdxiz","ControlType","addPropertyControls","ScreenWall","props","box","card","shine","onMove","r","x","y","ry","rx","onLeave","run","setRun","seen","setSeen","list","screens","small","srcOf","s","el","inView","raf","on","covered","ys","t","update","next","tmr","onScroll","io","cols","columns","c","k","u","i","colW","style","radius","tint","angle","c$1","speed","items","tintStrength","logo","logoSize","init_ScreenWall","init_jsx_runtime"],"sources":["https:/framerusercontent.com/modules/Peo9hDqZOO4S1jSEX6aQ/XIxfRInUeAtMHPWr4Sy8/ScreenWall.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import{useEffect,useRef,useState}from\"react\";const srcOf=i=>typeof i===\"string\"?i:i?.src;// the screens show small: ask the image CDN for a 512px copy instead of the full file\nconst small=u=>u&&u.includes(\"framerusercontent.com\")&&!u.includes(\"scale-down-to\")?u.split(\"?\")[0]+\"?scale-down-to=512\":u;/**\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n */export default function ScreenWall(props){const{screens=[],logo,tint=\"#D3C4E6\",tintStrength=.35,angle=-18,columns=4,speed=18,logoSize=112,radius=32,style}=props;const box=useRef(null);const card=useRef(null);const shine=useRef(null);const MAX=14;const onMove=e=>{if(e.pointerType!==\"mouse\"||!box.current||!card.current)return;const r=box.current.getBoundingClientRect();const x=Math.min(1,Math.max(0,(e.clientX-r.left)/r.width));const y=Math.min(1,Math.max(0,(e.clientY-r.top)/r.height));const ry=(x-.5)*2*MAX;const rx=(.5-y)*2*MAX;card.current.style.transition=\"transform 0.18s ease-out, box-shadow 0.18s ease-out\";card.current.style.transform=`rotateX(${rx.toFixed(2)}deg) rotateY(${ry.toFixed(2)}deg)`;card.current.style.boxShadow=`${(-ry*1.2).toFixed(1)}px ${(18+rx*1.2).toFixed(1)}px 40px rgba(60,30,110,0.35)`;if(shine.current){shine.current.style.opacity=\"1\";shine.current.style.background=`radial-gradient(circle at ${(100-x*100).toFixed(0)}% ${(100-y*100).toFixed(0)}%, rgba(255,255,255,0.32), rgba(255,255,255,0) 60%)`;}};const onLeave=()=>{if(!card.current)return;card.current.style.transition=\"transform 0.6s cubic-bezier(.2,.8,.2,1), box-shadow 0.6s cubic-bezier(.2,.8,.2,1)\";card.current.style.transform=\"rotateX(0deg) rotateY(0deg)\";card.current.style.boxShadow=\"0 18px 40px rgba(60,30,110,0.35)\";if(shine.current)shine.current.style.opacity=\"0\";};const[run,setRun]=useState(false);const[seen,setSeen]=useState(false);const list=screens.map(s=>small(srcOf(s))).filter(Boolean);useEffect(()=>{const el=box.current;if(!el||typeof IntersectionObserver===\"undefined\"){setSeen(true);setRun(true);return;}const reduce=window.matchMedia?.(\"(prefers-reduced-motion: reduce)\").matches;if(reduce){setSeen(true);setRun(false);return;}// stacked sticky folders: one in view can still be covered by the next card. Then it pauses too,\n// tested with the topmost element at a few points of the wall (cheap, on scroll, at most once a frame)\nlet inView=false,raf=0,on=false;// the card this wall lives in: the nearest sticky ancestor (no sticky card = never covered)\nlet card=el.parentElement;while(card&&getComputedStyle(card).position!==\"sticky\")card=card.parentElement;const covered=()=>{if(!card)return false;const r=el.getBoundingClientRect();const ys=[r.top+r.height*.25,r.top+r.height*.5,r.top+r.height*.8].filter(y=>y>0&&y<window.innerHeight);if(!ys.length)return true;for(const y of ys){const t=document.elementFromPoint(r.left+r.width/2,y);if(!t||card.contains(t)||t.contains(card))return false;}return true;};const update=()=>{raf=0;const next=inView&&!covered();if(next!==on){on=next;setRun(next);}};// checked a few times a second, not every scroll frame: a paused wall a moment late costs nothing\nlet tmr=0;const onScroll=()=>{if(inView&&!tmr)tmr=window.setTimeout(()=>{tmr=0;if(!raf)raf=requestAnimationFrame(update);},200);};const io=new IntersectionObserver(([e])=>{inView=e.isIntersecting;if(inView)setSeen(true);update();},{rootMargin:\"100px\"});io.observe(el);window.addEventListener(\"scroll\",onScroll,{passive:true});return()=>{io.disconnect();cancelAnimationFrame(raf);clearTimeout(tmr);window.removeEventListener(\"scroll\",onScroll);};},[]);const cols=Array.from({length:columns},(_,c)=>{const items=list.length?Array.from({length:4},(_,k)=>list[(c*3+k)%list.length]):[];return items;});useEffect(()=>{for(const u of list){const i=new Image;i.src=u;}},[list.join(\"|\")]);const colW=100/(columns-.6);return /*#__PURE__*/_jsxs(\"div\",{ref:box,onPointerMove:onMove,onPointerLeave:onLeave,style:{...style,position:\"relative\",overflow:\"hidden\",borderRadius:radius,background:tint,contain:\"paint\",isolation:\"isolate\",WebkitMaskImage:\"-webkit-radial-gradient(white, black)\"},children:[/*#__PURE__*/_jsx(\"style\",{children:`\n                @keyframes sw-up { from { transform: translateY(0) } to { transform: translateY(-50%) } }\n                @keyframes sw-down { from { transform: translateY(-50%) } to { transform: translateY(0) } }\n            `}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",left:\"50%\",top:\"50%\",width:\"170%\",height:\"200%\",transform:`translate(-50%, -50%) rotate(${angle}deg)`,display:\"flex\",gap:\"3%\",justifyContent:\"center\"},children:cols.map((items,c)=>/*#__PURE__*/_jsx(\"div\",{style:{width:`${colW*.55}%`,flex:\"none\",marginTop:c%2?\"-12%\":0},children:/*#__PURE__*/_jsx(\"div\",{style:{display:\"flex\",flexDirection:\"column\",gap:18,animation:`${c%2?\"sw-down\":\"sw-up\"} ${speed*(1+c%3*.15)}s linear infinite`,animationPlayState:run?\"running\":\"paused\"},children:[...items,...items].map((s,k)=>/*#__PURE__*/_jsx(\"img\",{src:s,alt:\"\",draggable:false,loading:\"eager\",decoding:\"async\",style:{width:\"100%\",display:\"block\",borderRadius:18,boxShadow:\"0 6px 16px rgba(60,40,90,0.14)\"}},k))})},c))}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",inset:0,background:`radial-gradient(circle at 50% 50%, transparent 0%, ${tint} 95%)`,opacity:tintStrength+.35,pointerEvents:\"none\"}}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",inset:0,background:tint,opacity:tintStrength*.6,pointerEvents:\"none\"}}),srcOf(logo)&&/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",left:\"50%\",top:\"50%\",width:logoSize,height:logoSize,transform:\"translate(-50%, -50%)\",perspective:logoSize*5,pointerEvents:\"none\"},children:/*#__PURE__*/_jsxs(\"div\",{ref:card,style:{position:\"relative\",width:\"100%\",height:\"100%\",borderRadius:logoSize*.24,overflow:\"hidden\",transform:\"rotateX(0deg) rotateY(0deg)\",transition:\"transform 0.6s cubic-bezier(.2,.8,.2,1), box-shadow 0.6s cubic-bezier(.2,.8,.2,1)\",boxShadow:\"0 18px 40px rgba(60,30,110,0.35)\",willChange:\"transform\"},children:[/*#__PURE__*/_jsx(\"img\",{src:srcOf(logo),alt:\"\",loading:\"eager\",draggable:false,style:{width:\"100%\",height:\"100%\",display:\"block\"}}),/*#__PURE__*/_jsx(\"div\",{ref:shine,style:{position:\"absolute\",inset:0,opacity:0,transition:\"opacity 0.4s ease\",pointerEvents:\"none\",background:\"radial-gradient(circle at 50% 50%, rgba(255,255,255,0.35), rgba(255,255,255,0) 60%)\"}})]})})]});}addPropertyControls(ScreenWall,{screens:{type:ControlType.Array,title:\"Screens\",control:{type:ControlType.ResponsiveImage}},logo:{type:ControlType.ResponsiveImage,title:\"Logo\"},tint:{type:ControlType.Color,title:\"Tint\",defaultValue:\"#D3C4E6\"},tintStrength:{type:ControlType.Number,title:\"Tint\",min:0,max:1,step:.05,defaultValue:.35},angle:{type:ControlType.Number,title:\"Angle\",min:-45,max:45,defaultValue:-18,unit:\"\\xb0\"},columns:{type:ControlType.Number,title:\"Columns\",min:2,max:7,step:1,defaultValue:4},speed:{type:ControlType.Number,title:\"Loop (s)\",min:5,max:120,defaultValue:40},logoSize:{type:ControlType.Number,title:\"Logo Size\",min:40,max:240,defaultValue:112},radius:{type:ControlType.Number,title:\"Radius\",min:0,max:80,defaultValue:32}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ScreenWall\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"fixed\",\"framerSupportedLayoutHeight\":\"fixed\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ScreenWall.map"],"mappings":"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"}