{"version":3,"file":"FocusWord.CYUcAlMu.mjs","names":["useRef"],"sources":["https:/framerusercontent.com/modules/rPx1Ss4l3UtEjIh29kXY/7Jnd1T2UIXLdKA5plMjf/FocusWord.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{useEffect,useRef}from\"react\";const clamp=(v,a,b)=>Math.min(b,Math.max(a,v));const SHEET=`\n.fw{position:relative;width:100%;container-type:inline-size;overflow:hidden}\n.fw-box{position:relative;font-size:var(--fs);line-height:.86;white-space:nowrap;padding:.06em 0 .1em}\n.fw-s{display:block;margin:0;font:inherit;opacity:var(--k)}\n.fw-b{position:absolute;left:0;top:0;padding:inherit;filter:blur(max(8px,1.6cqw));opacity:var(--bo);pointer-events:none}\n.fw-probe{position:absolute;left:0;top:0;visibility:hidden;font-size:100px;white-space:nowrap;pointer-events:none}\n`;/**\n * Focus Word\n *\n * One line of type fitted to the full width. It is out of focus until it\n * is fully in view, then pulls sharp. Made for a name at the foot of a\n * page.\n *\n * @framerIntrinsicWidth 1120\n * @framerIntrinsicHeight 180\n *\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight auto\n */export default function FocusWord(props){const{text=\"Elin Vasstrand\",fontFamily=\"Switzer\",weight=400,tracking=-.05,ink=\"#ECE9E2\"}=props;const isStatic=useIsStaticRenderer();const root=useRef(null);const probe=useRef(null);// Fit the line to the width, and again when the typeface arrives.\nuseEffect(()=>{const host=root.current;const p=probe.current;if(!host||!p)return;let alive=true;const fit=()=>{if(!alive)return;const w=host.clientWidth;const natural=p.getBoundingClientRect().width;if(!w||!natural)return;// Negative tracking also pulls in after the last letter; add it\n// back so the last letter is not clipped.\nconst overhang=Math.abs(Math.min(0,tracking))*100;host.style.setProperty(\"--fs\",(w/(natural+overhang)*100).toFixed(2)+\"px\");};fit();const ro=new ResizeObserver(fit);ro.observe(host);const fonts=document.fonts;if(fonts){fonts.ready?.then(fit);fonts.load?.(`${weight} 100px \"${fontFamily}\"`).then(fit,()=>{});fonts.addEventListener?.(\"loadingdone\",fit);}return()=>{alive=false;ro.disconnect();fonts?.removeEventListener?.(\"loadingdone\",fit);};},[text,fontFamily,weight,tracking]);// Pull focus once the whole line is in view. It sits at the foot of the\n// page, so it must be sharp as soon as it is fully visible.\nuseEffect(()=>{const host=root.current;if(!host||isStatic)return;if(window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches)return;let raf=0;let last=0;let goal=1;let k=-1;const read=()=>{const r=host.getBoundingClientRect();const vh=window.innerHeight;// 0 while only the top edge shows, 1 once the bottom edge is in.\nconst f=r.height>0?clamp((vh-r.top-r.height*.25)/(r.height*.75),0,1):1;goal=f*f*(3-2*f);};const tick=time=>{raf=0;const dt=Math.min(64,Math.max(1,time-last));last=time;k=k<0?goal:k+(goal-k)*(1-Math.exp(-dt/160));if(Math.abs(goal-k)<.002)k=goal;host.style.setProperty(\"--k\",k.toFixed(3));host.style.setProperty(\"--bo\",(1-Math.pow(k,4)).toFixed(3));if(k!==goal)raf=requestAnimationFrame(tick);};const wake=()=>{read();if(!raf){last=performance.now();raf=requestAnimationFrame(tick);}};wake();window.addEventListener(\"scroll\",wake,{passive:true});window.addEventListener(\"resize\",wake);return()=>{window.removeEventListener(\"scroll\",wake);window.removeEventListener(\"resize\",wake);if(raf)cancelAnimationFrame(raf);};},[isStatic]);const font=`\"${fontFamily}\", \"Inter\", system-ui, sans-serif`;const estimate=`calc(100cqw / ${Math.max(4,text.length*.5).toFixed(2)})`;const vars={\"--fs\":estimate,\"--k\":\"1\",\"--bo\":\"0\"};const type={fontFamily:font,fontWeight:weight,letterSpacing:`${tracking}em`};return /*#__PURE__*/_jsxs(\"div\",{ref:root,className:\"fw\",style:{...props.style,...vars,color:ink},children:[/*#__PURE__*/_jsx(\"style\",{dangerouslySetInnerHTML:{__html:SHEET}}),/*#__PURE__*/_jsx(\"span\",{ref:probe,className:\"fw-probe\",style:type,\"aria-hidden\":\"true\",children:text}),/*#__PURE__*/_jsxs(\"div\",{className:\"fw-box\",style:type,children:[/*#__PURE__*/_jsx(\"span\",{className:\"fw-b\",\"aria-hidden\":\"true\",children:text}),/*#__PURE__*/_jsx(\"p\",{className:\"fw-s\",children:text})]})]});}addPropertyControls(FocusWord,{text:{type:ControlType.String,title:\"Text\",defaultValue:\"Elin Vasstrand\"},fontFamily:{type:ControlType.String,title:\"Font family\",defaultValue:\"Switzer\",description:\"Use the family name of your text styles.\"},weight:{type:ControlType.Number,title:\"Weight\",defaultValue:400,min:100,max:900,step:100},tracking:{type:ControlType.Number,title:\"Letter spacing\",defaultValue:-.05,min:-.1,max:.1,step:.005,unit:\"em\"},ink:{type:ControlType.Color,title:\"Text colour\",defaultValue:\"#ECE9E2\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"FocusWord\",\"slots\":[],\"annotations\":{\"framerIntrinsicHeight\":\"180\",\"framerSupportedLayoutWidth\":\"fixed\",\"framerIntrinsicWidth\":\"1120\",\"framerSupportedLayoutHeight\":\"auto\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./FocusWord.map"],"mappings":"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"}