{"version":3,"file":"ScrollVideo.BpvPoI-Q.mjs","names":["useRef","useState"],"sources":["https:/framerusercontent.com/modules/rqHu2bc3hiTpSmoL5BY5/dvMiyRwEiLaZ0KwhR9M4/ScrollVideo.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import{useRef,useEffect,useState}from\"react\";/**\n * ScrollVideo — Scroll-scrubbed video player (Apple-style).\n * Shows a poster <img> on top until the user scrolls, then switches to video.\n *\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n */export default function ScrollVideo(props){const{videoUrl=\"\",posterUrl=\"\",stickyOffset=80,backgroundColor=\"transparent\"}=props;const containerRef=useRef(null);const videoRef=useRef(null);const[hasScrolled,setHasScrolled]=useState(false);useEffect(()=>{const video=videoRef.current;const container=containerRef.current;if(!video||!container)return;// Wait for video data\nconst onReady=()=>{let trackEl=container.parentElement;while(trackEl){const s=getComputedStyle(trackEl);if(s.position!==\"sticky\"&&(s.overflow===\"clip\"||s.overflow===\"hidden\")&&trackEl.offsetHeight>window.innerHeight*1.5)break;trackEl=trackEl.parentElement;}if(!trackEl)return;let ticking=false;const update=()=>{const rect=trackEl.getBoundingClientRect();const vh=window.innerHeight;const scrollable=Math.max(rect.height-vh,1);const progress=Math.max(0,Math.min(1,-rect.top/scrollable));if(progress>.001&&!hasScrolled){setHasScrolled(true);}const targetTime=progress*video.duration;if(isFinite(targetTime)&&Math.abs(video.currentTime-targetTime)>.01){video.currentTime=targetTime;}ticking=false;};const onScroll=()=>{if(!ticking){ticking=true;requestAnimationFrame(update);}};window.addEventListener(\"scroll\",onScroll,{passive:true});window.addEventListener(\"resize\",onScroll,{passive:true});update();return()=>{window.removeEventListener(\"scroll\",onScroll);window.removeEventListener(\"resize\",onScroll);};};video.addEventListener(\"loadeddata\",onReady);if(video.readyState>=2)onReady();return()=>video.removeEventListener(\"loadeddata\",onReady);},[videoUrl,hasScrolled]);const isTransparent=c=>!c||c===\"transparent\"||c===\"rgba(0, 0, 0, 0)\"||c===\"rgba(0,0,0,0)\";const innerStyle={position:\"sticky\",top:stickyOffset,width:\"100%\",height:`calc(100vh - ${stickyOffset}px)`,display:\"flex\",alignItems:\"center\",justifyContent:\"center\",overflow:\"hidden\"};const mediaStyle={width:\"100%\",height:\"100%\",objectFit:\"contain\",display:\"block\",position:\"absolute\",top:0,left:0};return /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{width:\"100%\",height:\"100%\",position:\"relative\",backgroundColor:isTransparent(backgroundColor)?\"transparent\":backgroundColor,overflow:\"visible\"},children:/*#__PURE__*/_jsx(\"div\",{style:innerStyle,children:/*#__PURE__*/_jsxs(\"div\",{style:{position:\"relative\",width:\"100%\",height:\"100%\"},children:[/*#__PURE__*/_jsx(\"video\",{ref:videoRef,src:videoUrl,muted:true,playsInline:true,preload:\"auto\",style:{...mediaStyle,opacity:hasScrolled?1:0}}),posterUrl&&/*#__PURE__*/_jsx(\"img\",{src:posterUrl,alt:\"\",style:{...mediaStyle,opacity:hasScrolled?0:1,transition:\"opacity 0.15s ease\"}})]})})});}addPropertyControls(ScrollVideo,{videoUrl:{title:\"Video URL\",type:ControlType.String,defaultValue:\"\",description:\"URL of the scroll-scrubbed video (MP4 or WebM)\"},posterUrl:{title:\"Poster Image\",type:ControlType.String,defaultValue:\"\",description:\"First frame image — shows instantly before video loads\"},stickyOffset:{title:\"Sticky Top\",type:ControlType.Number,defaultValue:80,min:0,max:200,step:10,unit:\"px\",description:\"Top offset for the sticky video (e.g. nav height)\"},backgroundColor:{title:\"Background\",type:ControlType.Color,defaultValue:\"transparent\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ScrollVideo\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"any\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"any\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ScrollVideo.map"],"mappings":"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"}