{"version":3,"file":"ChangeFramesPerScroll.FZE3XTbF.mjs","names":["useRef","useState"],"sources":["https:/framerusercontent.com/modules/IorPYb8b2QZb0GDWod9X/Iv3EAZQSZER97p3CV71L/ChangeFramesPerScroll.js"],"sourcesContent":["// Change frames per scroll - A component that plays video frame by frame based on scroll direction\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useEffect,useRef,useState,startTransition}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{useInView}from\"framer-motion\";/**\n * Change Frames Per Scroll\n *\n * @framerIntrinsicWidth 800\n * @framerIntrinsicHeight 450\n *\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n */export default function ChangeFramesPerScroll(props){const{videoFile=\"https://framerusercontent.com/assets/MLWPbW1dUQawJLhhun3dBwpgJak.mp4\",animationSpeed=1}=props;const containerRef=useRef(null);const videoRef=useRef(null);const[isVideoReady,setIsVideoReady]=useState(false);const lastScrollY=useRef(0);const isStatic=useIsStaticRenderer();const isInView=useInView(containerRef,{amount:.3});const rafId=useRef(null);const targetTime=useRef(0);const isSeekingRef=useRef(false);// Reset scroll position when component enters viewport\nuseEffect(()=>{if(isInView){lastScrollY.current=window.scrollY;}},[isInView]);useEffect(()=>{if(isStatic)return;const video=videoRef.current;if(!video)return;const handleLoadedMetadata=()=>{startTransition(()=>setIsVideoReady(true));video.currentTime=0;targetTime.current=0;};const handleSeeking=()=>{isSeekingRef.current=true;};const handleSeeked=()=>{isSeekingRef.current=false;};video.addEventListener(\"loadedmetadata\",handleLoadedMetadata);video.addEventListener(\"seeking\",handleSeeking);video.addEventListener(\"seeked\",handleSeeked);return()=>{video.removeEventListener(\"loadedmetadata\",handleLoadedMetadata);video.removeEventListener(\"seeking\",handleSeeking);video.removeEventListener(\"seeked\",handleSeeked);};},[isStatic,videoFile]);useEffect(()=>{if(isStatic||!isVideoReady||!isInView)return;const video=videoRef.current;if(!video)return;let lastScrollTime=0;const scrollThrottle=16// ~60fps\n;const handleScroll=()=>{const now=Date.now();if(now-lastScrollTime<scrollThrottle)return;lastScrollTime=now;const currentScrollY=window.scrollY;const scrollDelta=currentScrollY-lastScrollY.current;lastScrollY.current=currentScrollY;if(video.duration){const frameIncrement=scrollDelta*animationSpeed/100;targetTime.current=targetTime.current+frameIncrement;// Clamp between 0 and duration\ntargetTime.current=Math.max(0,Math.min(targetTime.current,video.duration));}};const updateVideoFrame=()=>{if(!video||!video.duration){rafId.current=requestAnimationFrame(updateVideoFrame);return;}// Only update if not currently seeking and there's a difference\nif(!isSeekingRef.current&&Math.abs(video.currentTime-targetTime.current)>.01){video.currentTime=targetTime.current;}rafId.current=requestAnimationFrame(updateVideoFrame);};window.addEventListener(\"scroll\",handleScroll,{passive:true});rafId.current=requestAnimationFrame(updateVideoFrame);return()=>{window.removeEventListener(\"scroll\",handleScroll);if(rafId.current!==null){cancelAnimationFrame(rafId.current);}};},[isStatic,isVideoReady,animationSpeed,isInView]);return /*#__PURE__*/_jsxs(\"div\",{ref:containerRef,style:{width:\"100%\",height:\"100%\",position:\"relative\",overflow:\"hidden\",backgroundColor:\"#000\"},children:[/*#__PURE__*/_jsx(\"video\",{ref:videoRef,src:videoFile,style:{width:\"100%\",height:\"100%\",objectFit:\"cover\"},muted:true,playsInline:true,preload:\"auto\",disablePictureInPicture:true,disableRemotePlayback:true}),isStatic&&/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:\"50%\",left:\"50%\",transform:\"translate(-50%, -50%)\",color:\"#fff\",fontSize:14,textAlign:\"center\",padding:20,backgroundColor:\"rgba(0,0,0,0.5)\",borderRadius:8},children:\"Scroll to play video\"})]});}addPropertyControls(ChangeFramesPerScroll,{videoFile:{type:ControlType.File,title:\"Video\",allowedFileTypes:[\"mp4\",\"webm\",\"mov\"]},animationSpeed:{type:ControlType.Number,title:\"Animation Speed\",defaultValue:1,min:.1,max:5,step:.1}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ChangeFramesPerScroll\",\"slots\":[],\"annotations\":{\"framerIntrinsicHeight\":\"450\",\"framerSupportedLayoutWidth\":\"fixed\",\"framerIntrinsicWidth\":\"800\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ChangeFramesPerScroll.map"],"mappings":"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"}