{"version":3,"file":"SillageNotePyramid.G3IiuMN3.mjs","names":["React.useRef","React.useState"],"sources":["https:/framerusercontent.com/modules/1IObhwcHWMsg84XLZxqk/DRxNymLXSVXYR7kAclSn/SillageNotePyramid.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType}from\"framer\";// SILLAGE — note pyramid: top / heart / base notes reveal staggered on scroll.\nconst BONE=\"#EDE4D3\";const GOLD=\"#B99659\";const SERIF=\"'Cormorant Garamond', 'Times New Roman', serif\";const SANS=\"'Switzer', -apple-system, 'Helvetica Neue', sans-serif\";const EASE=\"cubic-bezier(.16,1,.3,1)\";/**\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight auto\n * @framerIntrinsicWidth 640\n */export default function SillageNotePyramid(props){const{topNotes,heartNotes,baseNotes,concentration,size}=props;const rootRef=React.useRef(null);const spineRef=React.useRef(null);const[shown,setShown]=React.useState(false);const[isStatic,setIsStatic]=React.useState(false);// gold spine: a hairline that draws itself DOWN the pyramid, scrubbed by\n// scroll (stroke-dashoffset mutated directly — no re-renders).\nReact.useEffect(()=>{const rm=window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;const line=spineRef.current;if(!line)return;if(rm){line.style.strokeDashoffset=\"0\";return;}let raf=0;let queued=false;let cur=1;const update=()=>{queued=false;const el=rootRef.current;if(!el)return;const r=el.getBoundingClientRect();const vh=window.innerHeight;const p=Math.max(0,Math.min(1,(vh*.88-r.top)/(r.height*.95)));const target=1-p;cur+=(target-cur)*.16;if(Math.abs(target-cur)<.003)cur=target;line.style.strokeDashoffset=cur.toFixed(4);if(cur!==target&&!queued){queued=true;raf=requestAnimationFrame(update);}};const onScroll=()=>{if(!queued){queued=true;raf=requestAnimationFrame(update);}};window.addEventListener(\"scroll\",onScroll,{passive:true});window.addEventListener(\"resize\",onScroll);onScroll();const late=setTimeout(onScroll,800);return()=>{window.removeEventListener(\"scroll\",onScroll);window.removeEventListener(\"resize\",onScroll);cancelAnimationFrame(raf);clearTimeout(late);};},[]);React.useEffect(()=>{const rm=window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;if(rm){setIsStatic(true);setShown(true);return;}const el=rootRef.current;if(!el)return;let seenHidden=false;let done=false;const show=()=>{if(done)return;done=true;setShown(true);};const io=new IntersectionObserver(entries=>{const en=entries[0];if(!en.isIntersecting){seenHidden=true;return;}if(seenHidden){show();io.disconnect();}},{threshold:.3,rootMargin:\"0px 0px -10% 0px\"});io.observe(el);const settle=setTimeout(()=>{const r=el.getBoundingClientRect();const vh=window.innerHeight;if(r.top>vh||r.bottom<0)seenHidden=true;else if(r.top<vh*.9&&r.bottom>vh*.1)show();},420);const safety=setTimeout(()=>{const r=el.getBoundingClientRect();if(r.top<window.innerHeight&&r.bottom>0)show();},4200);return()=>{io.disconnect();clearTimeout(settle);clearTimeout(safety);};},[]);const rows=[{label:\"Top\",notes:topNotes,w:120},{label:\"Heart\",notes:heartNotes,w:210},{label:\"Base\",notes:baseNotes,w:300}];return /*#__PURE__*/_jsxs(\"div\",{ref:rootRef,style:{width:\"100%\",display:\"flex\",flexDirection:\"column\",alignItems:\"center\",gap:0,position:\"relative\",...props.style},children:[/*#__PURE__*/_jsx(\"svg\",{\"aria-hidden\":true,width:\"2\",height:\"100%\",viewBox:\"0 0 2 100\",preserveAspectRatio:\"none\",style:{position:\"absolute\",left:\"50%\",top:0,height:\"100%\",transform:\"translateX(-50%)\",pointerEvents:\"none\"},children:/*#__PURE__*/_jsx(\"line\",{ref:spineRef,x1:\"1\",y1:\"0\",x2:\"1\",y2:\"100\",pathLength:1,stroke:\"rgba(185,150,89,0.34)\",strokeWidth:\"1\",strokeDasharray:\"1\",strokeDashoffset:\"1\",vectorEffect:\"non-scaling-stroke\"})}),rows.map((r,i)=>/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",flexDirection:\"column\",alignItems:\"center\",zIndex:1,padding:\"26px 0\",opacity:shown?1:0,transform:shown?\"translateY(0px)\":\"translateY(30px)\",transition:isStatic?\"none\":`opacity 1.1s ${EASE} ${.18*i}s, transform 1.3s ${EASE} ${.18*i}s`},children:[/*#__PURE__*/_jsx(\"div\",{style:{fontFamily:SANS,fontSize:11,letterSpacing:\"0.3em\",textTransform:\"uppercase\",color:GOLD,marginBottom:12},children:r.label}),/*#__PURE__*/_jsx(\"div\",{style:{fontFamily:SERIF,fontWeight:400,fontSize:\"clamp(24px, 3vw, 34px)\",lineHeight:1.2,color:BONE,textAlign:\"center\"},children:r.notes}),/*#__PURE__*/_jsx(\"div\",{style:{width:r.w,maxWidth:\"70vw\",height:1,marginTop:24,background:\"rgba(185,150,89,0.5)\",transform:shown?\"scaleX(1)\":\"scaleX(0)\",transformOrigin:\"50% 50%\",transition:isStatic?\"none\":`transform 1.5s ${EASE} ${.22+.18*i}s`}})]},i)),/*#__PURE__*/_jsxs(\"div\",{style:{marginTop:22,fontFamily:SANS,fontSize:12,letterSpacing:\"0.18em\",textTransform:\"uppercase\",color:\"rgba(237,228,211,0.5)\",opacity:shown?1:0,transition:isStatic?\"none\":`opacity 1.2s ${EASE} 0.7s`},children:[concentration,\" \\xb7 \",size]})]});}SillageNotePyramid.defaultProps={topNotes:\"Bergamot, Pink Pepper\",heartNotes:\"Leather Accord, Iris Pallida\",baseNotes:\"Incense, Vetiver, Labdanum\",concentration:\"Extrait de Parfum\",size:\"50 ml\"};addPropertyControls(SillageNotePyramid,{topNotes:{type:ControlType.String,title:\"Top Notes\",defaultValue:\"Bergamot, Pink Pepper\"},heartNotes:{type:ControlType.String,title:\"Heart Notes\",defaultValue:\"Leather Accord, Iris Pallida\"},baseNotes:{type:ControlType.String,title:\"Base Notes\",defaultValue:\"Incense, Vetiver, Labdanum\"},concentration:{type:ControlType.String,title:\"Concentration\",defaultValue:\"Extrait de Parfum\"},size:{type:ControlType.String,title:\"Size\",defaultValue:\"50 ml\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"SillageNotePyramid\",\"slots\":[],\"annotations\":{\"framerIntrinsicWidth\":\"640\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"any\",\"framerSupportedLayoutHeight\":\"auto\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./SillageNotePyramid.map"],"mappings":"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"}