{"version":3,"file":"BlogdeckTopicFan.WAdWe62K.mjs","names":["React"],"sources":["https:/framerusercontent.com/modules/DvVpvLa85K6QgU7dYPEg/v1gWoGlMK47JoqZqzzpP/BlogdeckTopicFan.js"],"sourcesContent":["// Blogdeck · Topic tile: a small fanned deck of the topic's three latest covers.\n// The fan opens as the tile scrolls into view and spreads further on hover. Bind the props to the\n// Topics collection (Name, Colour, Stories, Cover 1–3). Wrap the instance in a linked frame.\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";const{useEffect,useRef,useState}=React;const F_DISPLAY=`\"Bricolage Grotesque\", \"Inter Display\", system-ui, sans-serif`;const F_MONO=`\"JetBrains Mono\", ui-monospace, monospace`;let fontsInjected=false;function injectFonts(){if(fontsInjected||typeof document===\"undefined\")return;fontsInjected=true;const l=document.createElement(\"link\");l.rel=\"stylesheet\";l.href=\"https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wdth,wght@12..96,75..100,400..800&family=Instrument+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap\";document.head.appendChild(l);}const img=v=>(typeof v===\"string\"?v:v&&v.src)||\"\";const rgba=(c,a)=>{const m=String(c).match(/rgba?\\(([^)]+)\\)/);if(m){const p=m[1].split(\",\").map(x=>parseFloat(x));return`rgba(${p[0]},${p[1]},${p[2]},${a})`;}const h=String(c).replace(\"#\",\"\");return`rgba(${parseInt(h.slice(0,2),16)},${parseInt(h.slice(2,4),16)},${parseInt(h.slice(4,6),16)},${a})`;};/**\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */export default function BlogdeckTopicFan(props){const{name=\"Design\",colour=\"#FF5A1F\",stories=42,image1,image2,image3,blurb=\"\",dark=false,previewOpen=-1}=props;const isStatic=useIsStaticRenderer();const root=useRef(null);const[open,setOpen]=useState(true);const[hover,setHover]=useState(false);useEffect(()=>{injectFonts();if(isStatic||previewOpen>=0)return;const el=root.current;if(!el)return;const r0=el.getBoundingClientRect();if(r0.top>window.innerHeight*.92)setOpen(false);const check=()=>{const r=el.getBoundingClientRect();if(r.top<window.innerHeight*.85&&r.bottom>0){setOpen(true);clearInterval(iv);window.removeEventListener(\"scroll\",check);}};const iv=setInterval(check,220);window.addEventListener(\"scroll\",check,{passive:true});return()=>{clearInterval(iv);window.removeEventListener(\"scroll\",check);};},[isStatic,previewOpen]);const o=previewOpen>=0?previewOpen:open?1:0;const spread=o*(hover?1.45:1);const ims=[image3,image2,image1].map(img);const ink=dark?\"#F2F3F5\":\"#0B0C0F\";const ease=\"cubic-bezier(.2,.8,.2,1)\";return /*#__PURE__*/_jsxs(\"div\",{ref:root,onPointerEnter:()=>setHover(true),onPointerLeave:()=>setHover(false),style:{position:\"relative\",width:\"100%\",height:\"100%\",minHeight:260,borderRadius:20,overflow:\"hidden\",cursor:\"pointer\",background:dark?\"#15171C\":\"#FFFFFF\",boxShadow:hover?`0 24px 50px -24px ${rgba(colour,.55)}, 0 0 0 1px ${rgba(colour,.5)} inset`:`0 1px 0 rgba(255,255,255,0.8) inset, 0 0 0 1px ${dark?\"rgba(255,255,255,0.08)\":\"rgba(11,12,15,0.07)\"} inset`,transition:`box-shadow .45s ${ease}, transform .45s ${ease}`,transform:hover?\"translateY(-4px)\":\"none\",fontFamily:F_DISPLAY,color:ink},children:[/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",inset:0,background:`radial-gradient(90% 70% at 50% 30%, ${rgba(colour,hover?.22:.12)}, ${rgba(colour,0)} 70%)`,transition:`background .45s ${ease}`}}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",left:\"50%\",top:\"46%\",width:0,height:0},children:ims.map((src,i)=>{const k=i-1// -1, 0, 1 (back, middle, front)\n;const rot=k*11*spread;const tx=k*34*spread;const ty=-Math.abs(k)*6*spread+(i===2?0:4)-(hover&&i===2?8:0);return /*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",width:118,height:150,left:-59,top:-112,borderRadius:12,overflow:\"hidden\",transformOrigin:\"50% 120%\",transform:`translate(${tx}px, ${ty}px) rotate(${rot}deg)`,transition:`transform .7s ${ease} ${i*.04}s`,boxShadow:\"0 16px 30px -12px rgba(11,12,15,0.45), 0 0 0 1px rgba(255,255,255,0.18) inset\",background:colour},children:src&&/*#__PURE__*/_jsx(\"img\",{src:src,alt:\"\",draggable:false,style:{width:\"100%\",height:\"100%\",objectFit:\"cover\",display:\"block\",filter:i===2?\"none\":`brightness(${.78+i*.1})`}})},i);})}),/*#__PURE__*/_jsxs(\"div\",{style:{position:\"absolute\",left:18,right:18,bottom:16,display:\"flex\",alignItems:\"flex-end\",justifyContent:\"space-between\",gap:12},children:[/*#__PURE__*/_jsxs(\"div\",{children:[/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",alignItems:\"center\",gap:8},children:[/*#__PURE__*/_jsx(\"span\",{style:{width:9,height:9,borderRadius:3,background:colour}}),/*#__PURE__*/_jsx(\"span\",{style:{fontWeight:700,fontSize:24,letterSpacing:\"-0.02em\",fontVariationSettings:'\"wdth\" 94, \"opsz\" 48'},children:name})]}),blurb?/*#__PURE__*/_jsx(\"div\",{style:{marginTop:6,fontFamily:`\"Instrument Sans\", system-ui, sans-serif`,fontSize:13.5,lineHeight:1.4,opacity:.66,maxWidth:260},children:blurb}):null]}),/*#__PURE__*/_jsxs(\"div\",{style:{flex:\"none\",fontFamily:F_MONO,fontSize:11.5,letterSpacing:\"0.04em\",padding:\"6px 10px\",borderRadius:999,background:hover?colour:dark?\"rgba(255,255,255,0.08)\":\"rgba(11,12,15,0.05)\",color:hover?\"#fff\":ink,transition:`background .3s ${ease}, color .3s`},children:[stories,\" stories →\"]})]})]});}addPropertyControls(BlogdeckTopicFan,{name:{type:ControlType.String,title:\"Name\",defaultValue:\"Design\"},colour:{type:ControlType.Color,title:\"Colour\",defaultValue:\"#FF5A1F\"},stories:{type:ControlType.Number,title:\"Stories\",defaultValue:42,min:0,step:1},blurb:{type:ControlType.String,title:\"Blurb\",defaultValue:\"\",displayTextArea:true},image1:{type:ControlType.ResponsiveImage,title:\"Cover 1\"},image2:{type:ControlType.ResponsiveImage,title:\"Cover 2\"},image3:{type:ControlType.ResponsiveImage,title:\"Cover 3\"},dark:{type:ControlType.Boolean,title:\"Dark\",defaultValue:false},previewOpen:{type:ControlType.Number,title:\"Preview Open\",defaultValue:-1,min:-1,max:1,step:.1}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"BlogdeckTopicFan\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./BlogdeckTopicFan.map"],"mappings":"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"}