dash-parallax-scroll - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

dist/index.d.ts

 export { default as ParallaxProvider, useParallaxScrollContext } from './ParallaxProvider';
 export { default as useParallaxScroll } from './useParallaxScroll';
 export { useBrightness } from './useBrightness';
-export { useParallax } from './useParallax';
-export { useParallaxProvider, useParallaxContext } from './useParallaxProvider';
 export type { ParallaxOptions, BrightnessOptions, ParallaxContextValue, UseParallaxReturn, UseParallaxProviderReturn, UseParallaxScrollReturn, Position, ElementCache, BrightnessElementCache, } from './utils/types';
 export { lerp, calculateParallaxTargetPosition, calculateScaleValue, calculateBrightness, } from './utils/calculations';
 export { applyParallaxTransform, applyBrightnessTransform, } from './utils/transforms';

dist/index.js

@@ -1,10 +0,1 @@
-import e,{useRef as t,useCallback as r,useEffect as n,useMemo as s,createContext as a,useContext as i,useState as o}from"react";import{useLenis as c}from"lenis/react";var l,u={exports:{}},g={};var h,f={};
-/**
- * @license React
- * react-jsx-runtime.development.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */"production"===process.env.NODE_ENV?u.exports=function(){if(l)return g;l=1;var e=Symbol.for("react.transitional.element"),t=Symbol.for("react.fragment");function r(t,r,n){var s=null;if(void 0!==n&&(s=""+n),void 0!==r.key&&(s=""+r.key),"key"in r)for(var a in n={},r)"key"!==a&&(n[a]=r[a]);else n=r;return r=n.ref,{$$typeof:e,type:t,key:s,ref:void 0!==r?r:null,props:n}}return g.Fragment=t,g.jsx=r,g.jsxs=r,g}():u.exports=(h||(h=1,"production"!==process.env.NODE_ENV&&function(){function t(e){if(null==e)return null;if("function"==typeof e)return e.$$typeof===E?null:e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case b:return"Fragment";case p:return"Profiler";case d:return"StrictMode";case S:return"Suspense";case x:return"SuspenseList";case w:return"Activity"}if("object"==typeof e)switch(e.tag,e.$$typeof){case h:return"Portal";case y:return(e.displayName||"Context")+".Provider";case m:return(e._context.displayName||"Context")+".Consumer";case v:var r=e.render;return(e=e.displayName)||(e=""!==(e=r.displayName||r.name||"")?"ForwardRef("+e+")":"ForwardRef"),e;case O:return null!==(r=e.displayName||null)?r:t(e.type)||"Memo";case M:r=e._payload,e=e._init;try{return t(e(r))}catch(e){}}return null}function r(e){return""+e}function n(e){try{r(e);var t=!1}catch(e){t=!0}if(t){var n=(t=console).error,s="function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n.call(t,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",s),r(e)}}function s(e){if(e===b)return"<>";if("object"==typeof e&&null!==e&&e.$$typeof===M)return"<...>";try{var r=t(e);return r?"<"+r+">":"<...>"}catch(e){return"<...>"}}function a(){return Error("react-stack-top-frame")}function i(){var e=t(this.type);return F[e]||(F[e]=!0),void 0!==(e=this.props.ref)?e:null}function o(e,r,s,a,o,u,h,f){var b,d=r.children;if(void 0!==d)if(a){if(A(d)){for(a=0;a<d.length;a++)c(d[a]);Object.freeze&&Object.freeze(d)}}else c(d);if(B.call(r,"key")){d=t(e);var p=Object.keys(r).filter(function(e){return"key"!==e});a=0<p.length?"{key: someKey, "+p.join(": ..., ")+": ...}":"{key: someKey}",I[d+a]||(p=0<p.length?"{"+p.join(": ..., ")+": ...}":"{}",I[d+a]=!0)}if(d=null,void 0!==s&&(n(s),d=""+s),function(e){if(B.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return void 0!==e.key}(r)&&(n(r.key),d=""+r.key),"key"in r)for(var m in s={},r)"key"!==m&&(s[m]=r[m]);else s=r;return d&&function(e){function t(){l||(l=!0)}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}(s,"function"==typeof e&&(e.displayName||e.name)),function(e,t,r,n,s,a,o,c){return r=a.ref,e={$$typeof:g,type:e,key:t,props:a,_owner:s},null!==(void 0!==r?r:null)?Object.defineProperty(e,"ref",{enumerable:!1,get:i}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:o}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:c}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}(e,d,u,0,null===(b=P.A)?null:b.getOwner(),s,h,f)}function c(e){"object"==typeof e&&null!==e&&e.$$typeof===g&&e._store&&(e._store.validated=1)}var l,u=e,g=Symbol.for("react.transitional.element"),h=Symbol.for("react.portal"),b=Symbol.for("react.fragment"),d=Symbol.for("react.strict_mode"),p=Symbol.for("react.profiler"),m=Symbol.for("react.consumer"),y=Symbol.for("react.context"),v=Symbol.for("react.forward_ref"),S=Symbol.for("react.suspense"),x=Symbol.for("react.suspense_list"),O=Symbol.for("react.memo"),M=Symbol.for("react.lazy"),w=Symbol.for("react.activity"),E=Symbol.for("react.client.reference"),P=u.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,B=Object.prototype.hasOwnProperty,A=Array.isArray,j=console.createTask?console.createTask:function(){return null},F={},k=(u={"react-stack-bottom-frame":function(e){return e()}})["react-stack-bottom-frame"].bind(u,a)(),_=j(s(a)),I={};f.Fragment=b,f.jsx=function(e,t,r,n,a){var i=1e4>P.recentlyCreatedOwnerStacks++;return o(e,t,r,!1,0,a,i?Error("react-stack-top-frame"):k,i?j(s(e)):_)},f.jsxs=function(e,t,r,n,a){var i=1e4>P.recentlyCreatedOwnerStacks++;return o(e,t,r,!0,0,a,i?Error("react-stack-top-frame"):k,i?j(s(e)):_)}}()),f);var b=u.exports;const d=(e,t,r,n)=>{let s=r.get(e);if(!s){const t=[n,".picture","picture","img","video",'[class*="image"]','[class*="Image"]','[class*="video"]','[class*="Video"]'];let a=null;for(const r of t)if(r&&(a=e.querySelector(r),a))break;a||(a=e),s={targetElement:a,lastBrightness:-1},r.set(e,s)}if(Math.abs(t-s.lastBrightness)>.001){const e=`brightness(${t.toFixed(4)})`;s.targetElement.style.filter=e,s.targetElement.style.webkitFilter=e,s.targetElement.style.transition="filter 0.1s ease-out",s.lastBrightness=t}};function useBrightness(){const e=t(new Map),n=t(new Map),s=t(new Map);return{updateBrightness:r((t,r,a=!0,i="default")=>{const{minBrightness:o=.7,maxBrightness:c=1,imageSelector:l=".picture, picture, video",scrubStrength:u=.25}=r,g={minBrightness:o,maxBrightness:c};t.forEach((t,r)=>{if(!t)return;const o=t;if(!o)return;const c=o.parentElement;if(!c)return;const u=((e,t)=>{const{minBrightness:r,maxBrightness:n}=t,s=window.innerHeight,a=e.top+e.height,i=s/1.5;return a>=i?n:r+Math.max(0,Math.min(1,a/i))*(n-r)})(c.getBoundingClientRect(),g),h=`${i}_${r}`;a?(e.current.set(h,u),n.current.has(h)||n.current.set(h,u)):d(o,u,s.current,l)})},[]),animateBrightness:r((t,r,a="default")=>{const{imageSelector:i=".picture, picture, video",scrubStrength:o=.25}=r;let c=!1;return t.forEach((t,r)=>{var l;if(!t)return;const u=t;if(!u)return;const g=`${a}_${r}`,h=e.current.get(g);if(void 0!==h){const e=null!==(l=n.current.get(g))&&void 0!==l?l:h,t=(f=e)+(h-f)*o;Math.abs(t-e)>.001?(n.current.set(g,t),d(u,t,s.current,i),c=!0):Math.abs(h-e)<.001&&(n.current.set(g,h),d(u,h,s.current,i))}var f}),c},[]),clearBrightnessCache:r(()=>{s.current.clear()},[]),getBrightness:r((e=0,t=1,r="default")=>{const s=`${r}_${e}`;return n.current.get(s)||t},[])}}const p=a(null),m=(e,t,r)=>e+(t-e)*r,y=(e,t,r,n,s=!0)=>{const a=s?.01:.05;let i=n.get(e);i||(i={lastPosition:-9999,lastScale:-1},n.set(e,i));const o=Math.round(100*t)/100,c=Math.round(1e3*r)/1e3,l=Math.abs(o-i.lastPosition)>a,u=Math.abs(c-i.lastScale)>.001;if(l||u){const n=[];0!==t&&n.push(`translate3d(0, ${t.toFixed(2)}%, 0)`),1!==r&&n.push(`scale(${r.toFixed(3)})`),e.style.transform=n.join(" "),e.style.willChange="transform",i.lastPosition=o,i.lastScale=c}};function v({children:e}){const a=c(),i=useBrightness(),o=t(null),l=t(null),u=t(0),g=t(new Map),h=t(new Map),f=r((e,t,r={})=>{const n={id:e,refs:t,options:Object.assign({parallaxStrength:-20,parallaxOffset:0,throttleMs:2,enabled:!0,enableScrubbing:!0,scrubStrength:.15,scaleEnabled:!1,scaleFrom:1,scaleTo:1,brightnessEnabled:!1,brightnessRefs:null,brightnessOptions:{},highPrecision:!0,applyBrightness:!1},r),targetPositions:new Map,currentPositions:new Map,targetScales:new Map,currentScales:new Map,activeIndex:0};return h.current.set(e,n),()=>{h.current.delete(e)}},[]),d=r(()=>{const e=Array.from(h.current.values());if(0===e.length)return;let t=!1;e.forEach(e=>{const{refs:r,options:n,targetPositions:s,currentPositions:a,targetScales:o,currentScales:c}=e;if(!n.enabled||!n.enableScrubbing)return;const l=Array.isArray(r.current)?r.current:[r.current];if(0===l.length||!l[0])return;if(l.forEach((e,r)=>{var i,l;if(!e)return;const u=e;if(!u)return;const h=s.get(r),f=o.get(r);let b=!1;if(void 0!==h){const e=null!==(i=a.get(r))&&void 0!==i?i:h,s=m(e,h,n.scrubStrength);Math.abs(s-e)>.01?(a.set(r,s),b=!0,t=!0):Math.abs(h-e)<.01?(a.set(r,h),b=!0):t=!0}if(n.scaleEnabled&&void 0!==f){const e=null!==(l=c.get(r))&&void 0!==l?l:f,s=m(e,f,n.scrubStrength);Math.abs(s-e)>.001?(c.set(r,s),b=!0,t=!0):Math.abs(f-e)<.001?(c.set(r,f),b=!0):t=!0}if(b){const e=a.get(r)||0,t=n.scaleEnabled&&c.get(r)||1;y(u,e,t,g.current,n.highPrecision)}}),n.brightnessEnabled||n.applyBrightness){const s=n.brightnessRefs||r,a=Array.isArray(s.current)?s.current:[s.current];if(a.some(e=>e)){const r=i.animateBrightness(a,Object.assign(Object.assign({minBrightness:.3,maxBrightness:1,imageSelector:'.picture, picture, img, video, [class*="image"], [class*="Image"], [class*="video"], [class*="Video"]'},n.brightnessOptions),{scrubStrength:n.scrubStrength}),e.id);t=t||r}}}),o.current=t?requestAnimationFrame(d):null},[i]),v=r(()=>{const e=Array.from(h.current.values()).filter(e=>{var t;return e.options.enabled&&(null===(t=e.refs)||void 0===t?void 0:t.current)});if(0===e.length)return;const t=performance.now(),r=Math.min(...e.map(e=>e.options.throttleMs));if(t-u.current<r)return void(l.current||(l.current=requestAnimationFrame(()=>{l.current=null,v()})));u.current=t;const n=window.innerHeight;let s=!1;e.forEach(e=>{const{refs:t,options:r,targetPositions:a,currentPositions:o,targetScales:c,currentScales:l}=e,u=Array.isArray(t.current)?t.current:[t.current];if(0===u.length||!u[0])return;let h=0,f=1/0;if(u.forEach((e,t)=>{if(!e)return;const i=e;if(!i)return;const u=i.parentElement;if(!u)return;const b=u.getBoundingClientRect(),d=((e,t)=>{const{parallaxStrength:r}=t,n=window.innerHeight+e.height,s=e.top+e.height;return(.5-Math.max(0,Math.min(1,s/n)))*r})(b,{parallaxStrength:r.parallaxStrength,parallaxOffset:r.parallaxOffset}),p=r.scaleEnabled?((e,t)=>{const{scaleFrom:r,scaleTo:n}=t,s=window.innerHeight+e.height,a=e.top+e.height;return r+(n-r)*Math.max(0,Math.min(1,a/s))})(b,{scaleFrom:r.scaleFrom,scaleTo:r.scaleTo}):1;r.enableScrubbing?(a.set(t,d),o.has(t)||o.set(t,d),r.scaleEnabled&&(c.set(t,p),l.has(t)||l.set(t,p)),s=!0):y(i,d,p,g.current,r.highPrecision);const m=b.top+b.height/2,v=n/2,S=Math.abs(m-v);S<f&&(f=S,h=t)}),r.brightnessEnabled||r.applyBrightness){const n=r.brightnessRefs||t,s=Array.isArray(n.current)?n.current:[n.current];s.some(e=>e)&&i.updateBrightness(s,Object.assign({minBrightness:.3,maxBrightness:1,imageSelector:'.picture, picture, img, video, [class*="image"], [class*="Image"], [class*="video"], [class*="Video"]'},r.brightnessOptions),r.enableScrubbing,e.id)}e.activeIndex=h}),s&&null===o.current&&(o.current=requestAnimationFrame(d))},[d,i]);n(()=>{if(a)return a.on("scroll",v),v(),()=>{a.off("scroll",v),null!==o.current&&(cancelAnimationFrame(o.current),o.current=null),null!==l.current&&(cancelAnimationFrame(l.current),l.current=null),g.current.clear(),i.clearBrightnessCache()}},[a,v,i]);const S=s(()=>({addInstance:f,getScrollPosition:(e,t=0)=>{const r=h.current.get(e);return(null==r?void 0:r.currentPositions.get(t))||0},getActiveIndex:e=>{const t=h.current.get(e);return(null==t?void 0:t.activeIndex)||0},getBrightness:(e=0,t=1,r)=>i.getBrightness(e,t,r),getScale:(e,t=0)=>{const r=h.current.get(e);return(null==r?void 0:r.currentScales.get(t))||1}}),[f,i.getBrightness]);return b.jsx(p.Provider,{value:S,children:e})}const S=()=>{const e=i(p);if(!e)throw new Error("useParallaxScrollContext must be used within a ParallaxProvider");return e};"function"==typeof SuppressedError&&SuppressedError;let x=0;function O(e,a={}){const i=S(),o=t(null),{parallaxStrength:c=-20,parallaxOffset:l=0,throttleMs:u=2,enabled:g=!0,enableScrubbing:h=!0,scrubStrength:f=.65,scaleEnabled:b=!1,scaleFrom:d=1,scaleTo:p=1,brightnessEnabled:m=!1,brightnessRefs:y=null,brightnessOptions:v={},applyBrightness:O=!1}=a,M=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var s=0;for(n=Object.getOwnPropertySymbols(e);s<n.length;s++)t.indexOf(n[s])<0&&Object.prototype.propertyIsEnumerable.call(e,n[s])&&(r[n[s]]=e[n[s]])}return r}(a,["parallaxStrength","parallaxOffset","throttleMs","enabled","enableScrubbing","scrubStrength","scaleEnabled","scaleFrom","scaleTo","brightnessEnabled","brightnessRefs","brightnessOptions","applyBrightness"]),w=m||O,E=y||e,P=s(()=>Object.assign({parallaxStrength:c,parallaxOffset:l,throttleMs:u,enabled:g,enableScrubbing:h,scrubStrength:f,scaleEnabled:b,scaleFrom:d,scaleTo:p,brightnessEnabled:w,brightnessRefs:E,brightnessOptions:v,applyBrightness:O},M),[c,l,u,g,h,f,b,d,p,w,E,v,O,M]);o.current||(o.current="parallax-"+ ++x);const B=t(null);n(()=>{if(i)return B.current=i.addInstance(o.current,e,P),()=>{B.current&&B.current()}},[i,e,P]);const A=r((e=0)=>i&&o.current?i.getScrollPosition(o.current,e):0,[i]),j=r(()=>i&&o.current?i.getActiveIndex(o.current):0,[i]),F=r((e=0)=>i?i.getBrightness(e):1,[i]),k=r((e=0)=>i&&o.current?i.getScale(o.current,e):1,[i]);return s(()=>({getScrollPosition:A,getActiveIndex:j,getBrightness:F,getScale:k,isEnabled:g,isScrubbing:h}),[A,j,F,k,g,h])}const M=(e,t,r)=>e+(t-e)*r,w=(e,t)=>{const{parallaxStrength:r,parallaxOffset:n}=t,s=window.innerHeight+e.height,a=e.top+e.height;return(.5-Math.max(0,Math.min(1,a/s)))*r+n},E=(e,t)=>{const{scaleFrom:r,scaleTo:n}=t,s=window.innerHeight+e.height,a=e.top+e.height;return r+(n-r)*Math.max(0,Math.min(1,a/s))},P=(e,t)=>{const{minBrightness:r,maxBrightness:n}=t,s=window.innerHeight,a=e.top+e.height/2,i=s/2,o=Math.abs(a-i),c=s/2;return r+(n-r)*Math.max(0,Math.min(1,1-o/c))},B=(e,t,r,n,s=!0)=>{const a=s?.01:.05;let i=n.get(e);i||(i={lastPosition:-9999,lastScale:-1,lastBrightness:-1},n.set(e,i));const o=Math.round(100*t)/100,c=Math.round(1e3*r)/1e3,l=Math.abs(o-i.lastPosition)>a,u=Math.abs(c-i.lastScale)>.001;if(l||u){const n=[];0!==t&&n.push(`translate3d(0, ${t.toFixed(2)}%, 0)`),1!==r&&n.push(`scale(${r.toFixed(3)})`),e.style.transform=n.join(" "),e.style.willChange="transform",i.lastPosition=o,i.lastScale=c}},A=(e,t,r,n)=>{let s=r.get(e);s||(s={lastPosition:-9999,lastScale:-1,lastBrightness:-1},r.set(e,s));const a=Math.round(100*t)/100;if(Math.abs(a-s.lastBrightness)>.01){e.querySelectorAll(n).forEach(e=>{e.style.filter=`brightness(${t.toFixed(2)})`}),s.lastBrightness=a}},j=a(null),useParallaxProvider=(a={})=>{const{lenisInstance:i,globalThrottle:o=16}=a,c=useBrightness(),l=t(null),u=t(null),g=t(0),h=t(new Map),f=t(new Map),b=r((e,t,r={})=>{const n={id:e,refs:t,options:Object.assign({parallaxStrength:-20,parallaxOffset:0,throttleMs:2,enabled:!0,enableScrubbing:!0,scrubStrength:.15,scaleEnabled:!1,scaleFrom:1,scaleTo:1,brightnessEnabled:!1,brightnessOptions:{},highPrecision:!0},r),targetPositions:new Map,currentPositions:new Map,targetScales:new Map,currentScales:new Map,activeIndex:0};return f.current.set(e,n),()=>{f.current.delete(e)}},[]),d=r(()=>{const e=Array.from(f.current.values());if(0===e.length)return;let t=!1;e.forEach(e=>{const{refs:r,options:n,targetPositions:s,currentPositions:a,targetScales:i,currentScales:o}=e;if(!n.enabled||!n.enableScrubbing)return;const l=Array.isArray(r.current)?r.current:[r.current];if(0===l.length)return;if(l.forEach((e,r)=>{var c,l;if(!e)return;const u="current"in e?e.current:e;if(!u)return;const g=s.get(r),f=i.get(r);let b=!1;if(void 0!==g){const e=null!==(c=a.get(r))&&void 0!==c?c:g,s=M(e,g,n.scrubStrength);Math.abs(s-e)>.01?(a.set(r,s),b=!0,t=!0):Math.abs(g-e)<.01?(a.set(r,g),b=!0):t=!0}if(n.scaleEnabled&&void 0!==f){const e=null!==(l=o.get(r))&&void 0!==l?l:f,s=M(e,f,n.scrubStrength);Math.abs(s-e)>.001?(o.set(r,s),b=!0,t=!0):Math.abs(f-e)<.001?(o.set(r,f),b=!0):t=!0}if(b){const e=a.get(r)||0,t=n.scaleEnabled&&o.get(r)||1;B(u,e,t,h.current,n.highPrecision)}}),n.brightnessEnabled){const s=Array.isArray(r.current)?r.current:[r.current];if(s.some(e=>e)){const r=c.animateBrightness(s,Object.assign(Object.assign({minBrightness:.3,maxBrightness:1,imageSelector:'.picture, picture, img, video, [class*="image"], [class*="Image"], [class*="video"], [class*="Video"]'},n.brightnessOptions),{scrubStrength:n.scrubStrength}),e.id);t=t||r}}}),l.current=t?requestAnimationFrame(d):null},[c]),p=r(()=>{const e=Array.from(f.current.values()).filter(e=>{var t;return e.options.enabled&&(null===(t=e.refs)||void 0===t?void 0:t.current)});if(0===e.length)return;const t=performance.now(),r=Math.min(o,...e.map(e=>e.options.throttleMs));if(t-g.current<r)return void(u.current||(u.current=requestAnimationFrame(()=>{u.current=null,p()})));g.current=t;const n=window.innerHeight;let s=!1;e.forEach(e=>{const{refs:t,options:r,targetPositions:a,currentPositions:i,targetScales:o,currentScales:l}=e,u=Array.isArray(t.current)?t.current:[t.current];if(0===u.length)return;let g=0,f=1/0;if(u.forEach((e,t)=>{if(!e)return;const c="current"in e?e.current:e;if(!c)return;const u=c.parentElement;if(!u)return;const b=u.getBoundingClientRect(),d=w(b,r),p=r.scaleEnabled?E(b,r):1;r.enableScrubbing?(a.set(t,d),i.has(t)||i.set(t,d),r.scaleEnabled&&(o.set(t,p),l.has(t)||l.set(t,p)),s=!0):B(c,d,p,h.current,r.highPrecision);const m=b.top+b.height/2,y=n/2,v=Math.abs(m-y);v<f&&(f=v,g=t)}),r.brightnessEnabled){const n=Array.isArray(t.current)?t.current:[t.current];n.some(e=>e)&&c.updateBrightness(n,Object.assign({minBrightness:.3,maxBrightness:1,imageSelector:'.picture, picture, img, video, [class*="image"], [class*="Image"], [class*="video"], [class*="Video"]'},r.brightnessOptions),r.enableScrubbing,e.id)}e.activeIndex=g}),s&&null===l.current&&(l.current=requestAnimationFrame(d))},[d,c,o]);n(()=>{if(i)return i.on("scroll",p),p(),()=>{i.off("scroll",p),null!==l.current&&(cancelAnimationFrame(l.current),l.current=null),null!==u.current&&(cancelAnimationFrame(u.current),u.current=null),h.current.clear(),c.clearBrightnessCache()}},[i,p,c]);const m=s(()=>({addInstance:b,getScrollPosition:(e,t=0)=>{const r=f.current.get(e);return(null==r?void 0:r.currentPositions.get(t))||0},getActiveIndex:e=>{const t=f.current.get(e);return(null==t?void 0:t.activeIndex)||0},getBrightness:(e=0,t=1,r)=>c.getBrightness(e,t,r),getScale:(e,t=0)=>{const r=f.current.get(e);return(null==r?void 0:r.currentScales.get(t))||1}}),[b,c]);return{Provider:r(({children:t})=>e.createElement(j.Provider,{value:m},t),[m]),context:m}},useParallaxContext=()=>{const e=i(j);if(!e)throw new Error("useParallaxContext must be used within a ParallaxProvider");return e},useParallax=(e,s={})=>{var a;const i=useParallaxContext(),c=t(null),[l,u]=o(0),[g,h]=o(1),[f,b]=o(1),[d,p]=o(0),m=r(()=>{var t;const r=i.getScrollPosition(e),n=i.getScale(e),a=i.getBrightness(0,(null===(t=s.brightnessOptions)||void 0===t?void 0:t.maxBrightness)||1,e),o=i.getActiveIndex(e);u(r),h(n),b(a),p(o)},[i,e,null===(a=s.brightnessOptions)||void 0===a?void 0:a.maxBrightness]);return n(()=>{const t=i.addInstance(e,c,s);let r;const n=()=>{m(),r=requestAnimationFrame(n)};return r=requestAnimationFrame(n),()=>{t(),r&&cancelAnimationFrame(r)}},[i,e,s,m]),{ref:c,position:l,scale:g,brightness:f,activeIndex:d}};export{v as ParallaxProvider,A as applyBrightnessTransform,B as applyParallaxTransform,P as calculateBrightness,w as calculateParallaxTargetPosition,E as calculateScaleValue,M as lerp,useBrightness,useParallax,useParallaxContext,useParallaxProvider,O as useParallaxScroll,S as useParallaxScrollContext};
+import e,{useRef as t,useCallback as r,useEffect as n,useMemo as s,createContext as a,useContext as o}from"react";import{useLenis as i}from"lenis/react";var c,l,u={exports:{}},f={},g={};"production"===process.env.NODE_ENV?u.exports=function(){if(c)return f;c=1;var e=Symbol.for("react.transitional.element"),t=Symbol.for("react.fragment");function r(t,r,n){var s=null;if(void 0!==n&&(s=""+n),void 0!==r.key&&(s=""+r.key),"key"in r)for(var a in n={},r)"key"!==a&&(n[a]=r[a]);else n=r;return r=n.ref,{$$typeof:e,type:t,key:s,ref:void 0!==r?r:null,props:n}}return f.Fragment=t,f.jsx=r,f.jsxs=r,f}():u.exports=(l||(l=1,"production"!==process.env.NODE_ENV&&function(){function t(e){if(null==e)return null;if("function"==typeof e)return e.$$typeof===E?null:e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case b:return"Fragment";case m:return"Profiler";case p:return"StrictMode";case v:return"Suspense";case x:return"SuspenseList";case M:return"Activity"}if("object"==typeof e)switch(e.tag,e.$$typeof){case h:return"Portal";case y:return(e.displayName||"Context")+".Provider";case d:return(e._context.displayName||"Context")+".Consumer";case S:var r=e.render;return(e=e.displayName)||(e=""!==(e=r.displayName||r.name||"")?"ForwardRef("+e+")":"ForwardRef"),e;case O:return null!==(r=e.displayName||null)?r:t(e.type)||"Memo";case w:r=e._payload,e=e._init;try{return t(e(r))}catch(e){}}return null}function r(e){return""+e}function n(e){try{r(e);var t=!1}catch(e){t=!0}if(t){var n=(t=console).error,s="function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n.call(t,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",s),r(e)}}function s(e){if(e===b)return"<>";if("object"==typeof e&&null!==e&&e.$$typeof===w)return"<...>";try{var r=t(e);return r?"<"+r+">":"<...>"}catch(e){return"<...>"}}function a(){return Error("react-stack-top-frame")}function o(){var e=t(this.type);return _[e]||(_[e]=!0),void 0!==(e=this.props.ref)?e:null}function i(e,r,s,a,i,u,g,h){var b,p=r.children;if(void 0!==p)if(a){if(j(p)){for(a=0;a<p.length;a++)c(p[a]);Object.freeze&&Object.freeze(p)}}else c(p);if(P.call(r,"key")){p=t(e);var m=Object.keys(r).filter(function(e){return"key"!==e});a=m.length>0?"{key: someKey, "+m.join(": ..., ")+": ...}":"{key: someKey}",$[p+a]||(m=m.length>0?"{"+m.join(": ..., ")+": ...}":"{}",$[p+a]=!0)}if(p=null,void 0!==s&&(n(s),p=""+s),function(e){if(P.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return void 0!==e.key}(r)&&(n(r.key),p=""+r.key),"key"in r)for(var d in s={},r)"key"!==d&&(s[d]=r[d]);else s=r;return p&&function(e){function t(){l||(l=!0)}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}(s,"function"==typeof e&&(e.displayName||e.name)),function(e,t,r,n,s,a,i,c){return r=a.ref,Object.defineProperty(e={$$typeof:f,type:e,key:t,props:a,_owner:s},"ref",null!==(void 0!==r?r:null)?{enumerable:!1,get:o}:{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:i}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:c}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}(e,p,u,0,null===(b=B.A)?null:b.getOwner(),s,g,h)}function c(e){"object"==typeof e&&null!==e&&e.$$typeof===f&&e._store&&(e._store.validated=1)}var l,u=e,f=Symbol.for("react.transitional.element"),h=Symbol.for("react.portal"),b=Symbol.for("react.fragment"),p=Symbol.for("react.strict_mode"),m=Symbol.for("react.profiler"),d=Symbol.for("react.consumer"),y=Symbol.for("react.context"),S=Symbol.for("react.forward_ref"),v=Symbol.for("react.suspense"),x=Symbol.for("react.suspense_list"),O=Symbol.for("react.memo"),w=Symbol.for("react.lazy"),M=Symbol.for("react.activity"),E=Symbol.for("react.client.reference"),B=u.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,P=Object.prototype.hasOwnProperty,j=Array.isArray,k=console.createTask?console.createTask:function(){return null},_={},A=(u={"react-stack-bottom-frame":function(e){return e()}})["react-stack-bottom-frame"].bind(u,a)(),F=k(s(a)),$={};g.Fragment=b,g.jsx=function(e,t,r,n,a){var o=1e4>B.recentlyCreatedOwnerStacks++;return i(e,t,r,!1,0,a,o?Error("react-stack-top-frame"):A,o?k(s(e)):F)},g.jsxs=function(e,t,r,n,a){var o=1e4>B.recentlyCreatedOwnerStacks++;return i(e,t,r,!0,0,a,o?Error("react-stack-top-frame"):A,o?k(s(e)):F)}}()),g);var h=u.exports;const b=(e,t,r,n)=>{let s=r.get(e);if(!s){const t=[n,".picture","picture","img","video",'[class*="image"]','[class*="Image"]','[class*="video"]','[class*="Video"]'];let a=null;for(const r of t)if(r&&(a=e.querySelector(r),a))break;a||(a=e),s={targetElement:a,lastBrightness:-1},r.set(e,s)}if(Math.abs(t-s.lastBrightness)>.001){const e=`brightness(${t.toFixed(4)})`;s.targetElement.style.filter=e,s.targetElement.style.webkitFilter=e,s.targetElement.style.transition="filter 0.1s ease-out",s.lastBrightness=t}};function useBrightness(){const e=t(new Map),n=t(new Map),s=t(new Map);return{updateBrightness:r((t,r,a=!0,o="default")=>{const{minBrightness:i=.7,maxBrightness:c=1,imageSelector:l=".picture, picture, video"}=r,u={minBrightness:i,maxBrightness:c};t.forEach((t,r)=>{if(!t)return;const i=t;if(!i)return;const c=i.parentElement;if(!c)return;const f=((e,t)=>{const{minBrightness:r,maxBrightness:n}=t,s=window.innerHeight,a=e.top+e.height,o=s/1.5;return o>a?r+Math.max(0,Math.min(1,a/o))*(n-r):n})(c.getBoundingClientRect(),u),g=`${o}_${r}`;a?(e.current.set(g,f),n.current.has(g)||n.current.set(g,f)):b(i,f,s.current,l)})},[]),animateBrightness:r((t,r,a="default")=>{const{imageSelector:o=".picture, picture, video",scrubStrength:i=.25}=r;let c=!1;return t.forEach((t,r)=>{var l;if(!t)return;const u=t;if(!u)return;const f=`${a}_${r}`,g=e.current.get(f);if(void 0!==g){const e=null!==(l=n.current.get(f))&&void 0!==l?l:g,t=(h=e)+(g-h)*i;Math.abs(t-e)>.001?(n.current.set(f,t),b(u,t,s.current,o),c=!0):.001>Math.abs(g-e)&&(n.current.set(f,g),b(u,g,s.current,o))}var h}),c},[]),clearBrightnessCache:r(()=>{s.current.clear()},[]),getBrightness:r((e=0,t=1,r="default")=>{const s=`${r}_${e}`;return n.current.get(s)||t},[])}}const p=(e,t,r)=>e+(t-e)*r,m=(e,t)=>{const{parallaxStrength:r,parallaxOffset:n}=t,s=window.innerHeight+e.height,a=e.top+e.height;return(.5-Math.max(0,Math.min(1,a/s)))*r+n},d=(e,t)=>{const{scaleFrom:r,scaleTo:n}=t,s=window.innerHeight+e.height,a=e.top+e.height;return r+(n-r)*Math.max(0,Math.min(1,a/s))},y=(e,t)=>{const{minBrightness:r,maxBrightness:n}=t,s=window.innerHeight,a=e.top+e.height/2;return r+(n-r)*Math.max(0,Math.min(1,1-Math.abs(a-s/2)/(s/2)))},S=(e,t,r,n,s=!0)=>{const a=s?.01:.05;let o=n.get(e);o||(o={lastPosition:-9999,lastScale:-1,lastBrightness:-1},n.set(e,o));const i=Math.round(100*t)/100,c=Math.round(1e3*r)/1e3,l=Math.abs(i-o.lastPosition)>a,u=Math.abs(c-o.lastScale)>.001;if(l||u){const n=[];0!==t&&n.push(`translate3d(0, ${t.toFixed(2)}%, 0)`),1!==r&&n.push(`scale(${r.toFixed(3)})`),e.style.transform=n.join(" "),e.style.willChange="transform",o.lastPosition=i,o.lastScale=c}},v=(e,t,r,n)=>{let s=r.get(e);s||(s={lastPosition:-9999,lastScale:-1,lastBrightness:-1},r.set(e,s));const a=Math.round(100*t)/100;Math.abs(a-s.lastBrightness)>.01&&(e.querySelectorAll(n).forEach(e=>{e.style.filter=`brightness(${t.toFixed(2)})`}),s.lastBrightness=a)},x=a(null);function O({children:e}){const a=i(),o=useBrightness(),c=t(null),l=t(null),u=t(0),f=t(new Map),g=t(new Map),b=r((e,t,r={})=>{const n={id:e,refs:t,options:Object.assign({parallaxStrength:-20,parallaxOffset:0,throttleMs:2,enabled:!0,enableScrubbing:!0,scrubStrength:.15,scaleEnabled:!1,scaleFrom:1,scaleTo:1,brightnessEnabled:!1,brightnessRefs:null,brightnessOptions:{},highPrecision:!0,applyBrightness:!1},r),targetPositions:new Map,currentPositions:new Map,targetScales:new Map,currentScales:new Map,activeIndex:0};return g.current.set(e,n),()=>g.current.delete(e)},[]),y=r(()=>{var e,t;const r=Array.from(g.current.values());if(0===r.length)return;let n=!1;for(const s of r){const{refs:r,options:a,targetPositions:i,currentPositions:c,targetScales:l,currentScales:u}=s;if(!a.enabled||!a.enableScrubbing)continue;const g=Array.isArray(r.current)?r.current:[r.current];if(0===g.length||!g[0])continue;const h=.01,b=.001;for(let r=0;r<g.length;r++){const s=g[r];if(!s)continue;const o=i.get(r),m=l.get(r);let d=!1;if(void 0!==o){const t=null!==(e=c.get(r))&&void 0!==e?e:o,s=p(t,o,a.scrubStrength);Math.abs(s-t)>h?(c.set(r,s),d=!0,n=!0):h>Math.abs(o-t)?(c.set(r,o),d=!0):n=!0}if(a.scaleEnabled&&void 0!==m){const e=null!==(t=u.get(r))&&void 0!==t?t:m,s=p(e,m,a.scrubStrength);Math.abs(s-e)>b?(u.set(r,s),d=!0,n=!0):b>Math.abs(m-e)?(u.set(r,m),d=!0):n=!0}if(d){const e=c.get(r)||0,t=a.scaleEnabled&&u.get(r)||1;S(s,e,t,f.current,a.highPrecision)}}if(a.brightnessEnabled||a.applyBrightness){const e=a.brightnessRefs||r,t=Array.isArray(e.current)?e.current:[e.current];if(t.some(e=>e)){const e=o.animateBrightness(t,Object.assign(Object.assign({minBrightness:.3,maxBrightness:1,imageSelector:'.picture, picture, img, video, [class*="image"], [class*="Image"], [class*="video"], [class*="Video"]'},a.brightnessOptions),{scrubStrength:a.scrubStrength}),s.id);n=n||e}}}c.current=n?requestAnimationFrame(y):null},[o]),v=r(()=>{const e=Array.from(g.current.values()).filter(e=>{var t;return e.options.enabled&&(null===(t=e.refs)||void 0===t?void 0:t.current)});if(0===e.length)return;const t=performance.now(),r=Math.min(...e.map(e=>e.options.throttleMs));if(t-u.current<r)return void(l.current||(l.current=requestAnimationFrame(()=>{l.current=null,v()})));u.current=t;const n=window.innerHeight;let s=!1;for(const t of e){const{refs:e,options:r,targetPositions:a,currentPositions:i,targetScales:c,currentScales:l}=t,u=Array.isArray(e.current)?e.current:[e.current];if(0===u.length||!u[0])continue;let g=0,h=1/0;for(let e=0;e<u.length;e++){const t=u[e];if(!t)continue;const o=t.parentElement;if(!o)continue;const b=o.getBoundingClientRect(),p=m(b,{parallaxStrength:r.parallaxStrength,parallaxOffset:r.parallaxOffset}),y=r.scaleEnabled?d(b,{scaleFrom:r.scaleFrom,scaleTo:r.scaleTo}):1;r.enableScrubbing?(a.set(e,p),i.has(e)||i.set(e,p),r.scaleEnabled&&(c.set(e,y),l.has(e)||l.set(e,y)),s=!0):S(t,p,y,f.current,r.highPrecision);const v=b.top+b.height/2,x=Math.abs(v-n/2);h>x&&(h=x,g=e)}if(r.brightnessEnabled||r.applyBrightness){const n=r.brightnessRefs||e,s=Array.isArray(n.current)?n.current:[n.current];s.some(e=>e)&&o.updateBrightness(s,Object.assign({minBrightness:.3,maxBrightness:1,imageSelector:'.picture, picture, img, video, [class*="image"], [class*="Image"], [class*="video"], [class*="Video"]'},r.brightnessOptions),r.enableScrubbing,t.id)}t.activeIndex=g}s&&null===c.current&&(c.current=requestAnimationFrame(y))},[y,o]);n(()=>{if(a)return a.on("scroll",v),v(),()=>{a.off("scroll",v),null!==c.current&&(cancelAnimationFrame(c.current),c.current=null),null!==l.current&&(cancelAnimationFrame(l.current),l.current=null),f.current.clear(),o.clearBrightnessCache()}},[a,v,o]);const O=s(()=>({addInstance:b,getScrollPosition:(e,t=0)=>{const r=g.current.get(e);return(null==r?void 0:r.currentPositions.get(t))||0},getActiveIndex:e=>{const t=g.current.get(e);return(null==t?void 0:t.activeIndex)||0},getBrightness:(e=0,t=1,r)=>o.getBrightness(e,t,r),getScale:(e,t=0)=>{const r=g.current.get(e);return(null==r?void 0:r.currentScales.get(t))||1}}),[b,o]);return h.jsx(x.Provider,{value:O,children:e})}const w=()=>{const e=o(x);if(!e)throw Error("useParallaxScrollContext must be used within a ParallaxProvider");return e};let M=0;function E(e,a={}){const o=w(),i=t(null),{parallaxStrength:c=-20,parallaxOffset:l=0,throttleMs:u=2,enabled:f=!0,enableScrubbing:g=!0,scrubStrength:h=.65,scaleEnabled:b=!1,scaleFrom:p=1,scaleTo:m=1,brightnessEnabled:d=!1,brightnessRefs:y=null,brightnessOptions:S={},applyBrightness:v=!1}=a,x=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&0>t.indexOf(n)&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var s=0;for(n=Object.getOwnPropertySymbols(e);s<n.length;s++)0>t.indexOf(n[s])&&Object.prototype.propertyIsEnumerable.call(e,n[s])&&(r[n[s]]=e[n[s]])}return r}(a,["parallaxStrength","parallaxOffset","throttleMs","enabled","enableScrubbing","scrubStrength","scaleEnabled","scaleFrom","scaleTo","brightnessEnabled","brightnessRefs","brightnessOptions","applyBrightness"]),O=d||v,E=y||e,B=s(()=>Object.assign({parallaxStrength:c,parallaxOffset:l,throttleMs:u,enabled:f,enableScrubbing:g,scrubStrength:h,scaleEnabled:b,scaleFrom:p,scaleTo:m,brightnessEnabled:O,brightnessRefs:E,brightnessOptions:S,applyBrightness:v},x),[c,l,u,f,g,h,b,p,m,O,E,S,v,x]);i.current||(i.current="parallax-"+ ++M);const P=t(null);n(()=>{if(o)return P.current=o.addInstance(i.current,e,B),()=>{P.current&&P.current()}},[o,e,B]);const j=r((e=0)=>o&&i.current?o.getScrollPosition(i.current,e):0,[o]),k=r(()=>o&&i.current?o.getActiveIndex(i.current):0,[o]),_=r((e=0)=>o?o.getBrightness(e):1,[o]),A=r((e=0)=>o&&i.current?o.getScale(i.current,e):1,[o]);return s(()=>({getScrollPosition:j,getActiveIndex:k,getBrightness:_,getScale:A,isEnabled:f,isScrubbing:g}),[j,k,_,A,f,g])}export{O as ParallaxProvider,v as applyBrightnessTransform,S as applyParallaxTransform,y as calculateBrightness,m as calculateParallaxTargetPosition,d as calculateScaleValue,p as lerp,useBrightness,E as useParallaxScroll,w as useParallaxScrollContext};

dist/utils/types.d.ts

@@ -55,2 +55,3 @@ import React from 'react';
     lastScale: number;
+    lastBrightness: number;
 }
@@ -57,0 +58,0 @@ export interface BrightnessElementCache {

package.json

 {
   "name": "dash-parallax-scroll",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "A high-performance React parallax library with brightness control and smooth animations",
@@ -5,0 +5,0 @@ "main": "dist/index.cjs",

No alert changes

Worsened metrics

Total package byte prevSize

35314

-25.07%

Number of package files

11

-8.33%

Lines of code

253

-16.5%

No dependency changes