{"version":3,"file":"ProjectCard.DF5hANrn.mjs","names":["useRef","useState","__esmMin","init_npm_react_18_3_1","init_ssg_sandbox_shims","window","_e","p","ce","de","init_framer_BWFVvmND","ControlType","addPropertyControls","coverPath","m","open","R","B","h","TT","tw","w","f","ProjectCard","props","ref","size","setSize","ready","setReady","inView","setInView","el","fit","ro","t","io","es","en","src","srcOf","cover","pal","PALETTE","hashOf","title","hh","vars","style","CSS","WAVE","summary","category","RED","BLUE","LIGHT","EASE","DUR","init_ProjectCard","init_jsx_runtime","img","i","n"],"sources":["https:/framerusercontent.com/modules/hqRDBZnDYia9MxoxFFDX/wI7l1pUpawaLXubS2hOA/ProjectCard.js"],"sourcesContent":["// Bisqit Studio · Project card\n// The card is solid red underneath. The cover sits on top and is cut by ONE shape (clip path):\n// at rest it covers the whole card; on hover the shape eases in, leaving a red frame and a red tab at the bottom\n// where the title and summary rise into view. Because it is a single shape, there are no pieces or seams.\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useEffect,useRef,useState}from\"react\";import{addPropertyControls,ControlType}from\"framer\";const RED=\"#ed1c24\";const BLUE=\"#00418e\";const LIGHT=\"#dae6ea\";const WAVE=\"M0 0 H400 V38 C 380 62, 352 62, 332 38 S 286 14, 266 38 S 220 62, 200 38 S 154 14, 134 38 S 88 62, 68 38 S 22 14, 0 40 Z\";const EASE=\"cubic-bezier(.16,.84,.3,1)\";const DUR=\"1.2s\";const POP=\"linear(0, 0.08, 0.27, 0.5, 0.72, 0.89, 1.01, 1.07, 1.09, 1.08, 1.05, 1.02, 1, 0.99, 0.985, 0.99, 1, 1.004, 1)\";const PALETTE=[{bg:RED,fg:LIGHT,wave:BLUE},{bg:BLUE,fg:LIGHT,wave:RED},{bg:LIGHT,fg:RED,wave:BLUE}];const srcOf=img=>!img?\"\":typeof img===\"string\"?img:img.src||\"\";const hashOf=t=>{let h=0;for(let i=0;i<t.length;i++)h=(h*31+t.charCodeAt(i))%9973;return h;};const f=n=>n.toFixed(2);// The cover's outline. Same commands in both states so the browser can morph smoothly between them.\nfunction coverPath(w,h,open){const m=open?10:-2;const R=open?24:32;const strip=50;const tabh=50;const B=open?h-m-strip:h+2;const TT=open?B-tabh:h+2;const tw=Math.min(Math.max(w*.46,180),w*.72);const cw=40;return\"path('\"+[\"M\",f(m+R),f(m),\"L\",f(w-m-R),f(m),\"Q\",f(w-m),f(m),f(w-m),f(m+R),\"L\",f(w-m),f(B-R),\"Q\",f(w-m),f(B),f(w-m-R),f(B),\"L\",f(tw+cw),f(B),\"C\",f(tw+cw*.45),f(B),f(tw+cw*.55),f(TT),f(tw),f(TT),\"L\",f(m+R),f(TT),\"Q\",f(m),f(TT),f(m),f(TT-R),\"L\",f(m),f(m+R),\"Q\",f(m),f(m),f(m+R),f(m),\"Z\"].join(\" \")+\"')\";}const CSS=\".bqpc{position:relative;display:block;width:100%;height:100%;min-height:220px;border-radius:30px;background:\"+RED+\";box-shadow:0 30px 60px -42px rgba(0,30,70,.55);overflow:hidden;isolation:isolate;font-family:'DM Sans',system-ui,sans-serif;color:\"+LIGHT+\"}\"+\".bqpc .media{position:absolute;inset:0;z-index:1;clip-path:var(--rest)}\"+\".bqpc.ready .media{transition:clip-path \"+DUR+\" \"+EASE+\"}\"+\".bqpc{opacity:0}\"+\".bqpc.in{animation:bqcardin 1.1s cubic-bezier(.16,.84,.3,1) var(--d,0s) both}\"+\"@keyframes bqcardin{0%{opacity:0;transform:translateY(120px)}30%{opacity:1}100%{opacity:1;transform:none}}\"+\"@media (prefers-reduced-motion:reduce){.bqpc{opacity:1}.bqpc.in{animation:none}}\"+\".bqpc .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s \"+EASE+\"}\"+\".bqpc .ttl{position:absolute;left:26px;right:40%;bottom:58px;z-index:2;font-family:'Coolvetica','DM Sans',sans-serif;font-weight:700;font-size:clamp(22px,2.2vw,30px);line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform:translateY(115px);transition:transform \"+DUR+\" \"+EASE+\"}\"+\".bqpc .sum{position:absolute;left:26px;right:26px;bottom:18px;z-index:2;margin:0;font-size:14px;line-height:1.4;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform:translateY(70px);transition:transform \"+DUR+\" \"+EASE+\"}\"+\".bqpc .tag{position:absolute;top:22px;right:22px;z-index:3;background:#f3f7f8;color:\"+BLUE+\";border-radius:999px;padding:6px 14px;font-weight:700;font-size:13px;white-space:nowrap;transition:background-color \"+DUR+\" \"+EASE+\",color \"+DUR+\" \"+EASE+\"}\"+\".bqpc:hover .media{clip-path:var(--open)}\"+\".bqpc:hover .media img{transform:scale(1.035)}\"+\".bqpc:hover .ttl,.bqpc:hover .sum{transform:none}\"+\".bqpc:hover .tag{background:\"+RED+\";color:\"+LIGHT+\"}\"+\"@media (hover:none){.bqpc .media{clip-path:var(--open)}.bqpc .ttl,.bqpc .sum{transform:none}}\"+\"@media (max-width:809px){.bqpc{height:auto!important;min-height:0;padding:0 0 16px}.bqpc .media,.bqpc:hover .media{position:relative;inset:auto;aspect-ratio:2/1;clip-path:none;border-radius:30px 30px 0 0}.bqpc .media img{position:absolute;transform:none!important}.bqpc .ttl,.bqpc .sum{position:static;transform:none!important;display:block;padding:0 20px}.bqpc .ttl{margin-top:14px}.bqpc .sum{margin-top:6px}}\"+\".bq-tc{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:16px}\"+\".bq-tc svg{position:absolute;left:0;top:0;width:100%;height:20%}\"+\".bq-tc b{position:relative;font-family:'Coolvetica','DM Sans',sans-serif;font-weight:700;line-height:.92;letter-spacing:-.01em}\";/**\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n * @framerIntrinsicWidth 380\n * @framerIntrinsicHeight 300\n */export default function ProjectCard(props){const{title=\"Project\",category=\"\",summary=\"\",cover,style}=props;const ref=useRef(null);const[size,setSize]=useState({w:380,h:300});const[ready,setReady]=useState(false);const[inView,setInView]=useState(false);useEffect(()=>{const el=ref.current;if(!el)return;const fit=()=>setSize({w:Math.max(120,el.clientWidth),h:Math.max(120,el.clientHeight)});fit();const ro=new ResizeObserver(fit);ro.observe(el);// allow the cover-shape animation only after the first real measurement\nconst t=window.setTimeout(()=>setReady(true),120);let io=null;if(\"IntersectionObserver\"in window){io=new IntersectionObserver(es=>es.forEach(en=>{if(en.isIntersecting){setInView(true);io&&io.disconnect();}}),{threshold:.12});io.observe(el);}else setInView(true);return()=>{ro.disconnect();window.clearTimeout(t);if(io)io.disconnect();};},[]);const src=srcOf(cover);const pal=PALETTE[hashOf(title)%PALETTE.length];const hh=hashOf(title);const vars={...style,[\"--rest\"]:coverPath(size.w,size.h,false),[\"--open\"]:coverPath(size.w,size.h,true),[\"--r\"]:(hh%9-4)*1.4+\"deg\",[\"--d\"]:hh%5*.07+\"s\"};return /*#__PURE__*/_jsxs(\"div\",{className:\"bqpc\"+(ready?\" ready\":\"\")+(inView?\" in\":\"\"),ref:ref,style:vars,children:[/*#__PURE__*/_jsx(\"style\",{children:CSS}),/*#__PURE__*/_jsx(\"div\",{className:\"media\",children:src?/*#__PURE__*/_jsx(\"img\",{src:src,srcSet:typeof cover===\"object\"?cover.srcSet:undefined,alt:title,loading:\"lazy\"}):/*#__PURE__*/_jsxs(\"div\",{className:\"bq-tc\",style:{background:pal.bg},children:[/*#__PURE__*/_jsx(\"svg\",{viewBox:\"0 0 400 70\",preserveAspectRatio:\"none\",\"aria-hidden\":\"true\",children:/*#__PURE__*/_jsx(\"path\",{d:WAVE,fill:pal.wave})}),/*#__PURE__*/_jsx(\"b\",{style:{color:pal.fg,fontSize:\"clamp(34px,4.2vw,62px)\"},children:title})]})}),/*#__PURE__*/_jsx(\"div\",{className:\"ttl\",children:title}),summary?/*#__PURE__*/_jsx(\"p\",{className:\"sum\",children:summary}):null,category?/*#__PURE__*/_jsx(\"span\",{className:\"tag\",children:category}):null]});}addPropertyControls(ProjectCard,{title:{type:ControlType.String,title:\"Title\",defaultValue:\"Project\"},category:{type:ControlType.String,title:\"Category\",defaultValue:\"Branding\"},summary:{type:ControlType.String,title:\"Summary\",defaultValue:\"\",displayTextArea:true},cover:{type:ControlType.ResponsiveImage,title:\"Cover\"},variant:{type:ControlType.Enum,title:\"Style\",options:[\"card\",\"folder\"],optionTitles:[\"Card\",\"Card\"],defaultValue:\"card\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ProjectCard\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"any\",\"framerIntrinsicHeight\":\"300\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"any\",\"framerIntrinsicWidth\":\"380\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ProjectCard.map"],"mappings":"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"}