@14islands/r3f-scroll-rig/dist/powerups.module.js

Progressively enhance any React website with WebGL using @react-three/fiber

import e,{useMemo as t,useEffect as r,forwardRef as i,useRef as n,useImperativeHandle as o}from"react";import{useThree as l,useFrame as s}from"@react-three/fiber";import{Text as u}from"@react-three/drei";import{useScrollRig as a,useScrollbar as c,useImageAsTexture as m,ScrollScene as h}from"@14islands/r3f-scroll-rig";import{Color as f,Vector2 as p}from"three";function d(){return d=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var i in r)Object.prototype.hasOwnProperty.call(r,i)&&(e[i]=r[i])}return e},d.apply(this,arguments)}function v(e,t){if(null==e)return{};var r,i,n={},o=Object.keys(e);for(i=0;i<o.length;i++)t.indexOf(r=o[i])>=0||(n[r]=e[r]);return n}var g=["el","children","material","scale","font","fontOffsetY","fontOffsetX","overrideEmissive","color"],y=function(i){var n=i.el,o=i.children,s=i.material,c=i.scale,m=i.font,h=i.fontOffsetY,f=void 0===h?0:h,p=i.fontOffsetX,y=void 0===p?0:p,w=i.overrideEmissive,b=void 0!==w&&w,S=i.color,E=v(i,g),A=l().size,x=a().scaleMultiplier,_=t(function(){if(!n.current)return{};var e=window.getComputedStyle(n.current),t=S||e.color;return!S&&"rgba(0, 0, 0, 0)"===e.color&&n.current.parentElement&&(t=window.getComputedStyle(n.current.parentElement).color),{letterSpacing:(parseFloat(e.letterSpacing)||0)/parseFloat(e.fontSize),lineHeight:(parseFloat(e.lineHeight)||0)/parseFloat(e.fontSize),textColor:t,fontSize:parseFloat(e.fontSize)*x,textAlign:e.textAlign}},[n,A,c,S,x]),N=_.textColor,z=_.fontSize,M=_.textAlign,T=_.lineHeight,k=_.letterSpacing;r(function(){s&&b&&(s.emissive=S)},[s,S,b]);var O=0;return"left"===M||"start"===M?O=-.5*c[0]:"right"!==M&&"end"!==M||(O=.5*c[0]),e.createElement(u,d({fontSize:z,maxWidth:c?c[0]:A.width,lineHeight:T,textAlign:M,letterSpacing:k,overflowWrap:"break-word",font:m,color:N,anchorX:M,anchorY:"top",position:[O+z*y,(c?.5*c[1]:.5*A.height)+z*f,0],material:s},E),o)},w=["el","scale","scrollState","vertexShader","fragmentShader","invalidateFrameLoop","widthSegments","heightSegments"],b=i(function(i,u){var h=i.el,g=i.scale,y=i.scrollState,b=i.vertexShader,S=i.fragmentShader,E=i.invalidateFrameLoop,A=void 0!==E&&E,x=i.widthSegments,_=void 0===x?128:x,N=i.heightSegments,z=void 0===N?128:N,M=v(i,w),T=n(null),k=n(null);o(u,function(){return k.current});var O=l(),V=O.invalidate,F=O.gl,R=O.size,P=l(function(e){return e.viewport.dpr}),L=c().scroll,C=a().scaleMultiplier,j=m(h),q=t(function(){return{u_color:{value:new f("black")},u_time:{value:0},u_pixelRatio:{value:P},u_progress:{value:0},u_visibility:{value:0},u_viewport:{value:0},u_velocity:{value:0},u_res:{value:new p},u_rect:{value:new p},u_size:{value:new p},u_texture:{value:null},u_loaded:{value:!1},u_scaleMultiplier:{value:C}}},[P]);r(function(){j&&T.current&&(T.current.uniforms.u_texture.value=j,T.current.uniforms.u_size.value.set(j.image.width,j.image.height),T.current.uniforms.u_loaded.value=!0)},[j,F]),r(function(){T.current&&(T.current.uniforms.u_res.value.set(R.width,R.height),T.current.uniforms.u_rect.value.set(null==g?void 0:g[0],null==g?void 0:g[1]))},[R,g]),s(function(e,t){y.inViewport&&k.current&&T.current&&T.current.uniforms.u_loaded.value&&(T.current.uniforms.u_time.value+=t,T.current.uniforms.u_rect.value.set(k.current.scale.x,k.current.scale.y),T.current.uniforms.u_velocity.value=L.velocity,T.current.uniforms.u_progress.value=y.progress,T.current.uniforms.u_visibility.value=y.visibility,T.current.uniforms.u_viewport.value=y.viewport,A&&V())});var H=t(function(){return[{vertexShader:b,fragmentShader:S}]},[b,S]);return e.createElement(e.Fragment,null,e.createElement("mesh",d({ref:k},M),e.createElement("planeGeometry",{attach:"geometry",args:[1,1,_,z]}),e.createElement("shaderMaterial",{ref:T,args:H,transparent:!0,uniforms:q})))}),S=["children","speed"],E=function(t){var r=t.children,i=t.scrollState,o=t.parallax,u=n(null),c=l(function(e){return e.size}),m=a().scaleMultiplier;return s(function(){i.inViewport&&(u.current.position.y=o*(2*i.progress-1)*m*c.height)}),e.createElement("mesh",{ref:u},r)},A=function(t){var r=t.children,i=t.speed,n=void 0===i?1:i,o=v(t,S),l=n-1;return e.createElement(h,d({scissor:!1,inViewportMargin:200*Math.max(0,.5)+50+"%"},o),function(t){return e.createElement(E,d({parallax:l},t),r(t))})};let x=new Proxy({},{get:function(e,t){return e.hasOwnProperty(t)||(e[t]=z(t)),e[t]}});class _ extends Array{constructor(e,t){if(!(t=O(t)).every(e=>"Number"===F(e)))throw new TypeError("All arguments must be numbers.");if(t.length>1&&t.length!==e)throw new Error("Argument list must be empty, have a single number, or have a length equal to the dimension.");0===t.length&&(t=[0]),1===t.length&&"Number"===F(t[0])&&(t=Array(e).fill(t[0])),e>1?super(...t):(super(1),this[0]=t[0]),Reflect.defineProperty(this,"pop",{value:void 0,enumerable:!1}),Reflect.defineProperty(this,"push",{value:void 0,enumerable:!1}),Reflect.defineProperty(this,"shift",{value:void 0,enumerable:!1}),Reflect.defineProperty(this,"unshift",{value:void 0,enumerable:!1})}get magnitude(){return this.pnorm(2)}div(e){k(e,this.dim,!0),"Number"===F(e)&&(e=new Array(this.dim).fill(e));let t=[];for(let r=0;r<this.length;++r)t[r]=this[r]/e[r];return x[this.dim](t)}minus(e){k(e,this.dim,!0),"Number"===F(e)&&(e=new Array(this.dim).fill(e));let t=[];for(let r=0;r<this.dim;++r)t[r]=this[r]-e[r];return x[this.dim](t)}neg(){return x[this.dim](this.times(-1))}plus(e){k(e,this.dim,!0),"Number"===F(e)&&(e=new Array(this.dim).fill(e));let t=[];for(let r=0;r<this.dim;++r)t[r]=this[r]+e[r];return x[this.dim](t)}pow(e){let t=[];for(let r=0;r<this.dim;++r)t[r]=Math.pow(this[r],e);return x[this.dim](t)}times(e){k(e,this.dim,!0),"Number"===F(e)&&(e=new Array(this.dim).fill(e));let t=[];for(let r=0;r<this.dim;++r)t[r]=this[r]*e[r];return x[this.dim](t)}dot(e){k(e,this.dim);let t=0;for(let r=0;r<this.dim;++r)t+=this[r]*e[r];return t}normalize(){return this.div(this.magnitude)}pnorm(e){let t=0;for(let r=0;r<this.dim;++r)t+=Math.pow(Math.abs(this[r]),e);return Math.pow(t,1/e)}reflect(e){const t=e.normalize();return this.minus(t.times(2*this.dot(t)))}argmax(){const e=this.max();return this.reduce((t,r,i)=>r===e?t.concat([i]):t,[])}argmin(){const e=this.min();return this.reduce((t,r,i)=>r===e?t.concat([i]):t,[])}choose(e){if(!Array.isArray(e))throw new TypeError("Argument must be a list of indices.");if(!e.every(e=>e<this.dim&&V(e.toString())))throw new RangeError("All elements of argument must be valid indices.");let t=[];return e.forEach(e=>t.push(this[e])),x[t.length](t)}copy(){return x[this.dim](this)}equals(e){return e.length===this.dim&&e.every((e,t)=>this[t]===e)}approximatelyEquals(e,t=1e-8){return e.length===this.dim&&e.every((e,r)=>Math.abs(this[r]-e)<t)}max(){return Math.max(...this)}min(){return Math.min(...this)}sum(){return this.reduce((e,t)=>e+t,0)}toArray(){return Array.from(this)}concat(...e){const t=super.concat.apply(this.toArray(),e);return x[t.length](t)}filter(...e){const t=super.filter.apply(this.toArray(),e);return t.length>0?x[t.length](t):t}map(...e){const t=super.map(...e);return t.every(e=>"Number"===F(e))?t:t.toArray()}slice(...e){const t=super.slice.apply(this.toArray(),e);return t.length>0?x[t.length](t):t}splice(...e){let t=this.toArray();if(t.splice(...e),t.length!==this.dim)throw new Error("All removed elements must be replaced.");if(!t.every(e=>"Number"===F(e)))throw new TypeError("All elements must be numbers.");t.forEach((e,t)=>{this[t]=e})}toString(){return this.reduce((e,t,r)=>e+t+(r===this.dim-1?" ":", "),"[ ")+"]"}}const N={set:function(e,t,r){if("length"===t)return!1;if(V(t)){if(Number(t)>=e.dim)throw new RangeError("Vector may not have more elements than dimension.");if("Number"!==F(r))throw new TypeError("Vectors may only contain numbers.");return e[t]=r,!0}const i=T(t.toString());return!!(e.dim<=4&&i)&&(function(e,t,r,i){if(1===t.length){if("Number"!==F(i))throw new TypeError("Must set to a number");return void(e[r[t]]=i)}if(!Array.isArray(i))throw new TypeError("Right-hand side must be an array.");if(t.length!==i.length)throw new TypeError("Right-hand side must have matching length.");if(!i.every(e=>"Number"===F(e)))throw new TypeError("All new values must be numbers.");if(t.split("").some(t=>r[t]>=e.dim))return;let n=!0;for(let e=0,r={};e<t.length;++e){if(r.hasOwnProperty(t[e])){n=!1;break}r[t[e]]=!0}if(!n)throw new SyntaxError("Swizzle assignment does not allow symbols to be repeated.");t.split("").map(e=>r[e]).forEach((t,r)=>{e[t]=i[r]})}(e,t.toString(),i,r),!0)},get:function(e,t){const r=T(t.toString());return e.dim<=4&&r?function(e,t,r){const i=t.length;if(1===i)return e[r[t]];let n=t.split("").reduce((t,i)=>{let n=r[i];return t&&n<e.dim?t.concat([e[n]]):void 0},[]);return n?new x[i](...n):void 0}(e,t,r):e[t]}};function z(e){if(!((e=Number(e))in x)){if(isNaN(e))throw new TypeError("Dimension must be coercible to a number.");if(e<=0)throw new RangeError("Dimension must be positive.");if(!Number.isInteger(e))throw new RangeError("Dimension must be positive.");let t="vec"+e,r={[t]:class extends _{constructor(...t){if(1===t.length&&t[0]instanceof _){if(t[0].dim>e)throw new TypeError("Cannot demote vectors.");t=function(e,t){return[...Array(t)].map((t,r)=>r<e.length?e[r]:0)}(t[0].toArray(),e)}super(e,t),Reflect.defineProperty(this,"dim",{value:e,writable:!1,enumerable:!1})}}}[t];x[e]=function(...e){let t=new r(...e);return Object.preventExtensions(t),new Proxy(t,N)}}return x[e]}const M=[{x:0,y:1,z:2,w:3},{r:0,g:1,b:2,a:3},{s:0,t:1,p:2,q:3}];function T(e){return M.find(t=>e.split("").every(e=>e in t))}function k(e,t,r=!1){if(!(r&&"Number"===F(e)||e.length&&e.length===t))throw new TypeError(`Invalid argument. Input must have matching dimension${r?"or be a scalar":""}.`)}function O(e){return e instanceof Array&&1===e.length&&e[0]instanceof Array?O(e[0]):e}function V(e){return!isNaN(e)&&Number(e).toString()===e&&Number.isInteger(Number(e))&&Number(e)>=0}function F(e){return Object.prototype.toString.call(e).slice(8,-1)}var R={getVecType:z,isVec:function(e){return e instanceof _},vec2:x[2],vec3:x[3],vec4:x[4],add:function(...e){const t=e[0].dim;if(!e.every(e=>e.dim===t))throw new TypeError("All vectors must have the same dimension.");return e.reduce((e,t)=>e.plus(t),x[t]())},multiply:function(...e){const t=e[0].dim;if(!e.every(e=>e.dim===t))throw new TypeError("All vectors must have the same dimension.");return e.reduce((e,t)=>e.times(t),x[t](1))},lerp:function(e,t,r){if(e.dim!==t.dim)throw new TypeError("Vectors must have the same dimension.");return r=r<0?0:r>1?1:r,e.plus(t.minus(e).times(r))},slerp:function(e,t,r){if(e.dim!==t.dim)throw new TypeError("Vectors must have the same dimension.");r=r<0?0:r>1?1:r;let i=e.normalize().dot(t.normalize());i=i<-1?-1:i>1?1:i;const n=Math.acos(i)*r,o=t.minus(e.times(i)).normalize(),l=e.magnitude+(t.magnitude-e.magnitude)*r;return e.times(Math.cos(n)).plus(o.times(Math.sin(n))).normalize().times(l)}},P=["scale"],L=["children","track","stickyLerp","fillViewport"],C=function(t){var r=t.children,i=t.childTop,o=t.childBottom,u=t.scrollState,a=t.parentScale,c=t.childScale,m=t.scaleMultiplier,h=t.priority,f=t.stickyLerp,p=void 0===f?1:f,d=t.offsetTop,v=void 0===d?0:d,g=n(null),y=l(function(e){return e.size});return s(function(e,t){if(u.inViewport){var r=.5*a[1]-.5*c[1]-v*m;g.current.position.y=function(e,t,r,i,n=60){return o=t,e*(1-(l=void 0===i?r:1-Math.pow(1-r,i/(1/n))))+o*l;var o,l}(g.current.position.y,u.viewport+(i-v)/y.height<1?r:u.visibility-o/a[1]*m<1?-i*m+r-(u.viewport-1)*y.height*m+v*m:.5*-a[1]+.5*c[1],p,t)}},h),e.createElement("group",{ref:g},r)},j=function(r){var i=r.children,o=r.track,s=r.stickyLerp,u=r.fillViewport,c=v(r,L),m=l(function(e){return e.size}),f=a().scaleMultiplier,p=n(o.current),g=t(function(){var e,t=getComputedStyle(o.current);return"sticky"===t.position?(p.current=o.current.parentElement,"static"===(e=getComputedStyle(p.current)).position&&console.error("StickyScrollScene: parent of position:sticky needs to be position:relative or position:absolute (currently set to position:static)")):console.error("StickyScrollScene: tracked element is not position:sticky"),[t,e]},[o,m]),y=g[0],w=g[1];return e.createElement(h,d({track:p},c),function(t,r,i,n,o,l){var s=l.stickyLerp,u=l.fillViewport;return function(l){var a=l.scale,c=v(l,P),m=R.vec3(parseFloat(i.width),parseFloat(i.height),1),h=parseFloat(i.top),f=r.height-h-m[1];u&&(m=R.vec3(r.width,r.height,1),h=0,f=0);var p=parseFloat(n.top);return e.createElement(C,d({offsetTop:p,parentScale:a,childScale:m.times(o),stickyLerp:s,childTop:h,childBottom:f,scaleMultiplier:o},c),t(d({scale:m.times(o),parentScale:a},c)))}}(i,m,y,w,f,{stickyLerp:s,fillViewport:u}))};export{A as ParallaxScrollScene,j as StickyScrollScene,b as WebGLImage,y as WebGLText};
//# sourceMappingURL=powerups.module.js.map