{"version":3,"file":"ScrollBackdrop.KKj-RdL4.mjs","names":["useState","useRef"],"sources":["https:/framerusercontent.com/modules/gwvxH1BKor5BGPR1CY7I/mNXnpNYliPcn91Elbwhm/ScrollBackdrop.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import{useEffect,useRef,useState}from\"react\";import{addPropertyControls,ControlType}from\"framer\";function resolveColor(value,fallback){if(typeof window===\"undefined\"||!value)return fallback;const probe=document.createElement(\"span\");probe.style.display=\"none\";probe.style.color=value;document.body.appendChild(probe);const computed=window.getComputedStyle(probe).color;document.body.removeChild(probe);const open=computed.indexOf(\"(\");const close=computed.lastIndexOf(\")\");if(open<0||close<0)return fallback;const parts=computed.substring(open+1,close).split(\",\").map(function(p){return parseFloat(p.trim());});return[parts[0]||0,parts[1]||0,parts[2]||0,parts.length>3?parts[3]:1];}function mix(a,b,t){return[Math.round(a[0]+(b[0]-a[0])*t),Math.round(a[1]+(b[1]-a[1])*t),Math.round(a[2]+(b[2]-a[2])*t),a[3]+(b[3]-a[3])*t];}function toCss(c){return\"rgba(\"+c[0]+\", \"+c[1]+\", \"+c[2]+\", \"+c[3]+\")\";}// Property controls can arrive undefined (Framer keys controls off the control\n// title, not the object key), so every numeric read needs a hard fallback.\nfunction pick(v,fallback){return typeof v===\"number\"&&isFinite(v)?v:fallback;}// Framer emits one instance of a code component with one prop set, so a\n// per-breakpoint prop override in the project never reaches published output.\n// The breakpoint is resolved here instead. Strings: \"\" means inherit.\nfunction numOr(v,fallback){const n=parseFloat(v);return isFinite(n)?n:fallback;}// Matches the project breakpoints: 1200 / 744 / 0.\nfunction breakpointOf(w){return w>=1200?\"desktop\":w>=744?\"tablet\":\"phone\";}function clamp01(v){return v<0?0:v>1?1:v;}/**\n * Fixed full-viewport layer whose colour is driven by page scroll.\n * Each transition is centred on a real DOM element found by elementId, so\n * section height changes cannot break the choreography.\n *\n * Every value has a hard fallback, so the component behaves correctly even\n * when no props are supplied.\n *\n * @framerIntrinsicWidth 80\n * @framerIntrinsicHeight 80\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n */export default function ScrollBackdrop(props){const[css,setCss]=useState(null);const anchorsRef=useRef([]);const startColor=props.startColor||\"#141414\";const anchorA=props.anchorA||\"zone-a\";const colorA=props.colorA||\"#ededed\";const anchorB=props.anchorB||\"zone-b\";const colorB=props.colorB||\"#141414\";const anchorC=props.anchorC||\"zone-c\";const colorC=props.colorC||\"#ff4545\";const zoneVh=pick(props.zoneVh,25);const offsetVh=pick(props.offsetVh,0);// Anchors A and B each need their own window. Both transitions have to begin\n// while the case visual above them is still centred in the viewport (BASE for\n// the grey, the collage for the dark), which is far earlier than the shared\n// 25vh window allows. C stays on the globals.\nconst greyZoneVh=pick(props.greyZoneVh,zoneVh);const greyOffsetVh=pick(props.greyOffsetVh,offsetVh);const darkZoneVh=pick(props.darkZoneVh,zoneVh);const darkOffsetVh=pick(props.darkOffsetVh,offsetVh);const tabletGreyOffsetVh=props.tabletGreyOffsetVh;const phoneGreyOffsetVh=props.phoneGreyOffsetVh;const tabletDarkOffsetVh=props.tabletDarkOffsetVh;const phoneDarkOffsetVh=props.phoneDarkOffsetVh;useEffect(function(){if(typeof window===\"undefined\")return;const base=resolveColor(startColor,[20,20,20,1]);const targets=[{id:anchorA,color:resolveColor(colorA,[237,237,237,1]),zone:greyZoneVh,offset:greyOffsetVh,offsetT:tabletGreyOffsetVh,offsetP:phoneGreyOffsetVh},{id:anchorB,color:resolveColor(colorB,[20,20,20,1]),zone:darkZoneVh,offset:darkOffsetVh,offsetT:tabletDarkOffsetVh,offsetP:phoneDarkOffsetVh},{id:anchorC,color:resolveColor(colorC,[255,69,69,1]),zone:zoneVh,offset:offsetVh}];function measure(){anchorsRef.current=targets.map(function(t){if(!t.id)return null;const el=document.getElementById(t.id);if(!el)return null;return el.getBoundingClientRect().top+window.scrollY;});}function update(){const vh=window.innerHeight;const bp=breakpointOf(window.innerWidth);let current=base;for(let i=0;i<targets.length;i++){const top=anchorsRef.current[i];if(top==null)continue;const zonePx=Math.max(1,targets[i].zone/100*vh);const tg=targets[i];const offEff=bp===\"tablet\"?numOr(tg.offsetT,tg.offset):bp===\"phone\"?numOr(tg.offsetP,tg.offset):tg.offset;const ref=window.scrollY+vh*.5-offEff/100*vh;const t=clamp01((ref-top)/zonePx+.5);if(t>0)current=mix(current,targets[i].color,t);}setCss(toCss(current));}function onScroll(){update();}function onResize(){measure();update();}measure();update();window.addEventListener(\"scroll\",onScroll,{passive:true});window.addEventListener(\"resize\",onResize);document.addEventListener(\"visibilitychange\",onResize);const t0=window.setTimeout(onResize,300);const t1=window.setTimeout(onResize,1200);return function(){window.removeEventListener(\"scroll\",onScroll);window.removeEventListener(\"resize\",onResize);document.removeEventListener(\"visibilitychange\",onResize);window.clearTimeout(t0);window.clearTimeout(t1);};},[startColor,colorA,colorB,colorC,anchorA,anchorB,anchorC,zoneVh,offsetVh,greyZoneVh,greyOffsetVh,darkZoneVh,darkOffsetVh,tabletGreyOffsetVh,phoneGreyOffsetVh,tabletDarkOffsetVh,phoneDarkOffsetVh]);return /*#__PURE__*/_jsx(\"div\",{style:{position:\"fixed\",top:0,left:0,right:0,bottom:0,zIndex:0,pointerEvents:\"none\",backgroundColor:css||startColor}});}addPropertyControls(ScrollBackdrop,{startColor:{type:ControlType.Color,title:\"startColor\",defaultValue:\"#141414\"},anchorA:{type:ControlType.String,title:\"anchorA\",defaultValue:\"zone-a\"},colorA:{type:ControlType.Color,title:\"colorA\",defaultValue:\"#ededed\"},anchorB:{type:ControlType.String,title:\"anchorB\",defaultValue:\"zone-b\"},colorB:{type:ControlType.Color,title:\"colorB\",defaultValue:\"#141414\"},anchorC:{type:ControlType.String,title:\"anchorC\",defaultValue:\"zone-c\"},colorC:{type:ControlType.Color,title:\"colorC\",defaultValue:\"#ff4545\"},zoneVh:{type:ControlType.Number,title:\"zoneVh\",defaultValue:25,min:1,max:200,step:1},offsetVh:{type:ControlType.Number,title:\"offsetVh\",defaultValue:0,min:-100,max:100,step:1},tabletGreyOffsetVh:{type:ControlType.String,title:\"tabletGreyOffsetVh\",defaultValue:\"\"},phoneGreyOffsetVh:{type:ControlType.String,title:\"phoneGreyOffsetVh\",defaultValue:\"\"},tabletDarkOffsetVh:{type:ControlType.String,title:\"tabletDarkOffsetVh\",defaultValue:\"\"},phoneDarkOffsetVh:{type:ControlType.String,title:\"phoneDarkOffsetVh\",defaultValue:\"\"},greyZoneVh:{type:ControlType.Number,title:\"greyZoneVh\",defaultValue:25,min:1,max:200,step:.5},greyOffsetVh:{type:ControlType.Number,title:\"greyOffsetVh\",defaultValue:0,min:-200,max:200,step:.5},darkZoneVh:{type:ControlType.Number,title:\"darkZoneVh\",defaultValue:25,min:1,max:200,step:.5},darkOffsetVh:{type:ControlType.Number,title:\"darkOffsetVh\",defaultValue:0,min:-200,max:200,step:.5}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ScrollBackdrop\",\"slots\":[],\"annotations\":{\"framerIntrinsicHeight\":\"80\",\"framerSupportedLayoutWidth\":\"any\",\"framerIntrinsicWidth\":\"80\",\"framerSupportedLayoutHeight\":\"any\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ScrollBackdrop.map"],"mappings":"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"}