{"version":3,"file":"ScrollBlurEssential.BXCdAGrQ.mjs","names":["useRef","useLayoutEffect","useEffect"],"sources":["https:/framerusercontent.com/modules/7h893CFUQDQiyaDDnTzN/ngsXVtBuYXJxX6gUqXKG/ScrollBlurEssential.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,RenderTarget}from\"framer\";import{useEffect,useLayoutEffect,useRef}from\"react\";import{animate,useMotionValue}from\"framer-motion\";// Locked default settings (the paid controls in the full version).\nconst BLUR=12;const FADE_IN={type:\"spring\",stiffness:300,damping:30};const FADE_OUT={type:\"spring\",stiffness:80,damping:26};const LAYERS=6;// Where the \"full version\" link points.\nconst FULL_VERSION_URL=\"https://buy.polar.sh/polar_cl_7CwEW1iCPM4xJVpmRbzgcZkgUnbbNd14Zc2Gl4VIj2M\";// Avoids the SSR warning for useLayoutEffect on Framer's published export.\nconst useIsoLayoutEffect=typeof window!==\"undefined\"?useLayoutEffect:useEffect;/**\n * SCROLL BLUR ESSENTIAL\n *\n * The free version of Scroll Blur. Direction is adjustable; Blur strength and\n * the Fade In/Out transitions are locked to the defaults (those are the paid\n * controls in the full version).\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n * @framerIntrinsicWidth 1200\n * @framerIntrinsicHeight 200\n */export default function ScrollBlurEssential(props){const{direction=\"bottom\"}=props;const isCanvas=RenderTarget.current()===RenderTarget.canvas;const containerRef=useRef(null);const sb=useMotionValue(0)// 0..1 blur strength\n;const active=useRef(false)// currently scrolling?\n;const idle=useRef(null);const controls=useRef(null);// Mirror the motion value onto a CSS variable (clamped >= 0 so a spring\n// undershoot can't produce an invalid negative blur radius). On the canvas\n// we hold it at full strength so the blur is visible while editing.\nuseIsoLayoutEffect(()=>{const node=containerRef.current;if(!node)return;const write=v=>node.style.setProperty(\"--sb\",String(Math.max(0,v)));write(sb.get());const unsub=sb.on(\"change\",write);if(isCanvas)sb.set(1);return unsub;},[isCanvas,sb]);useEffect(()=>{if(isCanvas)return;const HOLD_MS=180;const clearIdle=()=>{if(idle.current){clearTimeout(idle.current);idle.current=null;}};const onScroll=()=>{if(!active.current){active.current=true;controls.current=animate(sb,1,FADE_IN);}clearIdle();idle.current=setTimeout(()=>{active.current=false;controls.current=animate(sb,0,FADE_OUT);},HOLD_MS);};const opts={passive:true,capture:true};window.addEventListener(\"scroll\",onScroll,opts);return()=>{window.removeEventListener(\"scroll\",onScroll,opts);clearIdle();if(controls.current)controls.current.stop();};},[isCanvas,sb]);const gradientDir=direction===\"top\"?\"to bottom\":\"to top\";const layers=[];const step=100/LAYERS;for(let i=0;i