lazy-vfx 1.1.2 → 1.1.3

package/README.md

@@ -4,7 +4,7 @@
 
 Lazy VFX is a minimal, shader-driven VFX engine designed for modern web apps using React and Three.js. It abstracts away all the math and plumbing for emitters, GPU-accelerated particles, and real-time shaders, so you can stay focused on building cinematic, interactive experiences.
 
-[Live demo](https://lazy-vfx.vercel.app/demo) - [Fireworks demo](#) - [Wizard Game demo](#)
+[Live demo](https://lazy-vfx.vercel.app/demo) - [Fireworks demo](https://fireworks-five-sigma.vercel.app/) - [Wizard Game demo](https://wizard-game-sable.vercel.app/)
 
 ---
 

package/dist/lazy-vfx.es.js

@@ -1,4 +1,4 @@
-import he, { useRef as F, useEffect as Se, forwardRef as Ae, useState as xe, useImperativeHandle as _e, useCallback as we, useMemo as ae } from "react";
+import Ae, { useRef as F, useEffect as Se, forwardRef as he, useState as xe, useImperativeHandle as _e, useCallback as we, useMemo as ae } from "react";
 import { useFrame as ye } from "@react-three/fiber";
 import { Vector3 as te, Quaternion as Re, Euler as se, Matrix4 as Me, Color as Te, PlaneGeometry as Ce, AdditiveBlending as Oe, DynamicDrawUsage as W } from "three";
 import { useControls as ce, button as le, folder as Z } from "leva";
@@ -54,7 +54,7 @@ function Fe() {
         return e.$$typeof === M ? null : e.displayName || e.name || null;
       if (typeof e == "string") return e;
       switch (e) {
-        case A:
+        case h:
           return "Fragment";
         case D:
           return "Profiler";
@@ -71,7 +71,7 @@ function Fe() {
         switch (typeof e.tag == "number" && console.error(
           "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
         ), e.$$typeof) {
-          case h:
+          case A:
             return "Portal";
           case _:
             return e.displayName || "Context";
@@ -112,7 +112,7 @@ function Fe() {
       }
     }
     function a(e) {
-      if (e === A) return "<>";
+      if (e === h) return "<>";
       if (typeof e == "object" && e !== null && e.$$typeof === y)
         return "<...>";
       try {
@@ -241,7 +241,7 @@ React keys must be passed directly to JSX without using spread:
     function z(e) {
       return typeof e == "object" && e !== null && e.$$typeof === S;
     }
-    var s = he, S = Symbol.for("react.transitional.element"), h = Symbol.for("react.portal"), A = Symbol.for("react.fragment"), x = Symbol.for("react.strict_mode"), D = Symbol.for("react.profiler"), N = Symbol.for("react.consumer"), _ = Symbol.for("react.context"), E = Symbol.for("react.forward_ref"), f = Symbol.for("react.suspense"), Y = Symbol.for("react.suspense_list"), $ = Symbol.for("react.memo"), y = Symbol.for("react.lazy"), w = Symbol.for("react.activity"), M = Symbol.for("react.client.reference"), C = s.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, L = Object.prototype.hasOwnProperty, U = Array.isArray, I = console.createTask ? console.createTask : function() {
+    var s = Ae, S = Symbol.for("react.transitional.element"), A = Symbol.for("react.portal"), h = Symbol.for("react.fragment"), x = Symbol.for("react.strict_mode"), D = Symbol.for("react.profiler"), N = Symbol.for("react.consumer"), _ = Symbol.for("react.context"), E = Symbol.for("react.forward_ref"), f = Symbol.for("react.suspense"), Y = Symbol.for("react.suspense_list"), $ = Symbol.for("react.memo"), y = Symbol.for("react.lazy"), w = Symbol.for("react.activity"), M = Symbol.for("react.client.reference"), C = s.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, L = Object.prototype.hasOwnProperty, U = Array.isArray, I = console.createTask ? console.createTask : function() {
       return null;
     };
     s = {
@@ -253,7 +253,7 @@ React keys must be passed directly to JSX without using spread:
       s,
       i
     )(), G = I(a(i)), j = {};
-    q.Fragment = A, q.jsx = function(e, t, u) {
+    q.Fragment = h, q.jsx = function(e, t, u) {
       var d = 1e4 > C.recentlyCreatedOwnerStacks++;
       return n(
         e,
@@ -444,7 +444,7 @@ const De = ({ settings: o, onChange: v, onRestart: l }) => {
     }
     r(...a);
   }
-})), K = new te(), oe = new Re(), Ne = new se(), ee = new se(), Le = new te(), Xe = Ae(
+})), K = new te(), oe = new Re(), Ne = new se(), ee = new se(), Le = new te(), Xe = he(
   ({ debug: o, emitter: v, settings: l = {}, ...a }, r) => {
     const [
       {
@@ -459,8 +459,8 @@ const De = ({ settings: o, onChange: v, onRestart: l }) => {
         particlesLifetime: z = [0.1, 1],
         speed: s = [5, 20],
         size: S = [0.1, 1],
-        startPositionMin: h = [-1, -1, -1],
-        startPositionMax: A = [1, 1, 1],
+        startPositionMin: A = [-1, -1, -1],
+        startPositionMax: h = [1, 1, 1],
         startRotationMin: x = [0, 0, 0],
         startRotationMax: D = [0, 0, 0],
         rotationSpeedMin: N = [0, 0, 0],
@@ -488,9 +488,9 @@ const De = ({ settings: o, onChange: v, onRestart: l }) => {
           const j = g(S[0], S[1]), e = n[me(0, n.length - 1)];
           return {
             position: [
-              K.x + g(h[0], A[0]),
-              K.y + g(h[1], A[1]),
-              K.z + g(h[2], A[2])
+              K.x + g(A[0], h[0]),
+              K.y + g(A[1], h[1]),
+              K.z + g(A[2], h[2])
             ],
             direction: [
               g(E[0], f[0]),
@@ -679,7 +679,7 @@ const ve = new te(), pe = new se(), ge = new Re(), Ee = new te(1, 1, 1), be = ne
     fadeAlpha: T = [0, 1],
     gravity: R = [0, 0, 0]
   } = v, n = F(), P = ae(() => new Ce(0.5, 0.5), []), z = () => {
-    if (!h.current || !n.current)
+    if (!A.current || !n.current)
       return;
     [
       n.current.instanceMatrix,
@@ -697,8 +697,8 @@ const ve = new te(), pe = new se(), ge = new Re(), Ee = new te(1, 1, 1), be = ne
         S.current * f.itemSize,
         s.current * f.itemSize - S.current * f.itemSize
       ), f.needsUpdate = !0;
-    }), S.current = s.current, h.current = !1;
-  }, s = F(0), S = F(0), h = F(!1), A = (E, f) => {
+    }), S.current = s.current, A.current = !1;
+  }, s = F(0), S = F(0), A = F(!1), h = (E, f) => {
     const Y = n.current.geometry.getAttribute("instanceColor"), $ = n.current.geometry.getAttribute("instanceColorEnd"), y = n.current.geometry.getAttribute("instanceDirection"), w = n.current.geometry.getAttribute("instanceLifetime"), M = n.current.geometry.getAttribute("instanceSpeed"), C = n.current.geometry.getAttribute(
       "instanceRotationSpeed"
     );
@@ -723,7 +723,7 @@ const ve = new te(), pe = new se(), ge = new Re(), Ee = new te(1, 1, 1), be = ne
         s.current * 3
       ), y.set(O, s.current * 3), w.set(G, s.current * 2), M.set([t], s.current), C.set(V, s.current * 3), s.current++, s.current = s.current % r;
     }
-    n.current.instanceMatrix.needsUpdate = !0, Y.needsUpdate = !0, $.needsUpdate = !0, y.needsUpdate = !0, w.needsUpdate = !0, M.needsUpdate = !0, C.needsUpdate = !0, h.current = !0;
+    n.current.instanceMatrix.needsUpdate = !0, Y.needsUpdate = !0, $.needsUpdate = !0, y.needsUpdate = !0, w.needsUpdate = !0, M.needsUpdate = !0, C.needsUpdate = !0, A.current = !0;
   }, [x] = xe({
     instanceColor: new Float32Array(r * 3),
     instanceColorEnd: new Float32Array(r * 3),
@@ -732,7 +732,7 @@ const ve = new te(), pe = new se(), ge = new Re(), Ee = new te(1, 1, 1), be = ne
     instanceSpeed: new Float32Array(r * 1),
     instanceRotationSpeed: new Float32Array(r * 3)
   }), D = ie((E) => E.registerEmitter), N = ie((E) => E.unregisterEmitter);
-  Se(() => (D(o, A), () => {
+  Se(() => (D(o, h), () => {
     N(o);
   }), []);
   const _ = ae(
@@ -763,7 +763,6 @@ const ve = new te(), pe = new se(), ge = new Re(), Ee = new te(1, 1, 1), be = ne
             vertexShader: Ue,
             fragmentShader: Ie,
             blending: Oe,
-            depthTest: !1,
             depthWrite: !1,
             transparent: !0,
             defines: {

package/dist/lazy-vfx.umd.js

@@ -149,4 +149,4 @@ React keys must be passed directly to JSX without using spread:
     #else
         gl_FragColor = vec4(color, alpha);
     #endif
-    }`;const fe=new m.Vector3,de=new m.Euler,me=new m.Quaternion,ve=new m.Vector3(1,1,1),pe=new m.Matrix4,k=new m.Color,we=({name:o,settings:g={},alphaMap:u,geometry:a})=>{const{nbParticles:r=1e3,intensity:i=2,renderMode:b="mesh",fadeSize:l=[.1,.9],fadeAlpha:F=[0,1],gravity:_=[0,0,0]}=g,n=c.useRef(),w=c.useMemo(()=>new m.PlaneGeometry(.5,.5),[]),N=()=>{if(!M.current||!n.current)return;[n.current.instanceMatrix,n.current.geometry.getAttribute("instanceColor"),n.current.geometry.getAttribute("instanceColorEnd"),n.current.geometry.getAttribute("instanceDirection"),n.current.geometry.getAttribute("instanceLifetime"),n.current.geometry.getAttribute("instanceSpeed"),n.current.geometry.getAttribute("instanceRotationSpeed")].forEach(d=>{d.clearUpdateRanges(),R.current>s.current?(d.addUpdateRange(0,s.current*d.itemSize),d.addUpdateRange(R.current*d.itemSize,r*d.itemSize-R.current*d.itemSize)):d.addUpdateRange(R.current*d.itemSize,s.current*d.itemSize-R.current*d.itemSize),d.needsUpdate=!0}),R.current=s.current,M.current=!1},s=c.useRef(0),R=c.useRef(0),M=c.useRef(!1),h=(x,d)=>{const B=n.current.geometry.getAttribute("instanceColor"),W=n.current.geometry.getAttribute("instanceColorEnd"),A=n.current.geometry.getAttribute("instanceDirection"),C=n.current.geometry.getAttribute("instanceLifetime"),j=n.current.geometry.getAttribute("instanceSpeed"),D=n.current.geometry.getAttribute("instanceRotationSpeed");for(let V=0;V<x;V++){s.current>=r&&(s.current=0);const{scale:Y,rotation:X,rotationSpeed:G,position:Z,direction:z,lifetime:K,colorStart:U,colorEnd:e,speed:t}=d();fe.set(...Z),de.set(...X),me.setFromEuler(de),ve.set(...Y),pe.compose(fe,me,ve),n.current.setMatrixAt(s.current,pe),k.set(U),B.set([k.r,k.g,k.b],s.current*3),k.set(e),W.set([k.r,k.g,k.b],s.current*3),A.set(z,s.current*3),C.set(K,s.current*2),j.set([t],s.current),D.set(G,s.current*3),s.current++,s.current=s.current%r}n.current.instanceMatrix.needsUpdate=!0,B.needsUpdate=!0,W.needsUpdate=!0,A.needsUpdate=!0,C.needsUpdate=!0,j.needsUpdate=!0,D.needsUpdate=!0,M.current=!0},[P]=c.useState({instanceColor:new Float32Array(r*3),instanceColorEnd:new Float32Array(r*3),instanceDirection:new Float32Array(r*3),instanceLifetime:new Float32Array(r*2),instanceSpeed:new Float32Array(r*1),instanceRotationSpeed:new Float32Array(r*3)}),L=re(x=>x.registerEmitter),I=re(x=>x.unregisterEmitter);c.useEffect(()=>(L(o,h),()=>{I(o)}),[]);const T=c.useMemo(()=>({uTime:{value:0},uIntensity:{value:i},uFadeSize:{value:l},uFadeAlpha:{value:F},uGravity:{value:_},uAlphaMap:{value:u}}),[]);return ie.useFrame(({clock:x})=>{T&&(T.uTime.value=x.elapsedTime)}),S.jsx(S.Fragment,{children:S.jsxs("instancedMesh",{args:[w,null,r],ref:n,onBeforeRender:N,children:[a,S.jsx("shaderMaterial",{uniforms:T,vertexShader:Ae,fragmentShader:_e,blending:m.AdditiveBlending,depthTest:!1,depthWrite:!1,transparent:!0,defines:{BILLBOARD_MODE:b==="billboard",MESH_MODE:b==="mesh",ALPHAMAP:!!u}}),S.jsx("instancedBufferAttribute",{attach:"geometry-attributes-instanceColor",args:[P.instanceColor],itemSize:3,count:r,usage:m.DynamicDrawUsage}),S.jsx("instancedBufferAttribute",{attach:"geometry-attributes-instanceColorEnd",args:[P.instanceColorEnd],itemSize:3,count:r,usage:m.DynamicDrawUsage}),S.jsx("instancedBufferAttribute",{attach:"geometry-attributes-instanceDirection",args:[P.instanceDirection],itemSize:3,count:r,usage:m.DynamicDrawUsage}),S.jsx("instancedBufferAttribute",{attach:"geometry-attributes-instanceLifetime",args:[P.instanceLifetime],itemSize:2,count:r,usage:m.DynamicDrawUsage}),S.jsx("instancedBufferAttribute",{attach:"geometry-attributes-instanceSpeed",args:[P.instanceSpeed],itemSize:1,count:r,usage:m.DynamicDrawUsage}),S.jsx("instancedBufferAttribute",{attach:"geometry-attributes-instanceRotationSpeed",args:[P.instanceRotationSpeed],itemSize:3,count:r,usage:m.DynamicDrawUsage})]})})};y.VFXEmitter=Pe,y.VFXParticles=we,Object.defineProperty(y,Symbol.toStringTag,{value:"Module"})}));
+    }`;const fe=new m.Vector3,de=new m.Euler,me=new m.Quaternion,ve=new m.Vector3(1,1,1),pe=new m.Matrix4,k=new m.Color,we=({name:o,settings:g={},alphaMap:u,geometry:a})=>{const{nbParticles:r=1e3,intensity:i=2,renderMode:b="mesh",fadeSize:l=[.1,.9],fadeAlpha:F=[0,1],gravity:_=[0,0,0]}=g,n=c.useRef(),w=c.useMemo(()=>new m.PlaneGeometry(.5,.5),[]),N=()=>{if(!M.current||!n.current)return;[n.current.instanceMatrix,n.current.geometry.getAttribute("instanceColor"),n.current.geometry.getAttribute("instanceColorEnd"),n.current.geometry.getAttribute("instanceDirection"),n.current.geometry.getAttribute("instanceLifetime"),n.current.geometry.getAttribute("instanceSpeed"),n.current.geometry.getAttribute("instanceRotationSpeed")].forEach(d=>{d.clearUpdateRanges(),R.current>s.current?(d.addUpdateRange(0,s.current*d.itemSize),d.addUpdateRange(R.current*d.itemSize,r*d.itemSize-R.current*d.itemSize)):d.addUpdateRange(R.current*d.itemSize,s.current*d.itemSize-R.current*d.itemSize),d.needsUpdate=!0}),R.current=s.current,M.current=!1},s=c.useRef(0),R=c.useRef(0),M=c.useRef(!1),h=(x,d)=>{const B=n.current.geometry.getAttribute("instanceColor"),W=n.current.geometry.getAttribute("instanceColorEnd"),A=n.current.geometry.getAttribute("instanceDirection"),C=n.current.geometry.getAttribute("instanceLifetime"),j=n.current.geometry.getAttribute("instanceSpeed"),D=n.current.geometry.getAttribute("instanceRotationSpeed");for(let V=0;V<x;V++){s.current>=r&&(s.current=0);const{scale:Y,rotation:X,rotationSpeed:G,position:Z,direction:z,lifetime:K,colorStart:U,colorEnd:e,speed:t}=d();fe.set(...Z),de.set(...X),me.setFromEuler(de),ve.set(...Y),pe.compose(fe,me,ve),n.current.setMatrixAt(s.current,pe),k.set(U),B.set([k.r,k.g,k.b],s.current*3),k.set(e),W.set([k.r,k.g,k.b],s.current*3),A.set(z,s.current*3),C.set(K,s.current*2),j.set([t],s.current),D.set(G,s.current*3),s.current++,s.current=s.current%r}n.current.instanceMatrix.needsUpdate=!0,B.needsUpdate=!0,W.needsUpdate=!0,A.needsUpdate=!0,C.needsUpdate=!0,j.needsUpdate=!0,D.needsUpdate=!0,M.current=!0},[P]=c.useState({instanceColor:new Float32Array(r*3),instanceColorEnd:new Float32Array(r*3),instanceDirection:new Float32Array(r*3),instanceLifetime:new Float32Array(r*2),instanceSpeed:new Float32Array(r*1),instanceRotationSpeed:new Float32Array(r*3)}),L=re(x=>x.registerEmitter),I=re(x=>x.unregisterEmitter);c.useEffect(()=>(L(o,h),()=>{I(o)}),[]);const T=c.useMemo(()=>({uTime:{value:0},uIntensity:{value:i},uFadeSize:{value:l},uFadeAlpha:{value:F},uGravity:{value:_},uAlphaMap:{value:u}}),[]);return ie.useFrame(({clock:x})=>{T&&(T.uTime.value=x.elapsedTime)}),S.jsx(S.Fragment,{children:S.jsxs("instancedMesh",{args:[w,null,r],ref:n,onBeforeRender:N,children:[a,S.jsx("shaderMaterial",{uniforms:T,vertexShader:Ae,fragmentShader:_e,blending:m.AdditiveBlending,depthWrite:!1,transparent:!0,defines:{BILLBOARD_MODE:b==="billboard",MESH_MODE:b==="mesh",ALPHAMAP:!!u}}),S.jsx("instancedBufferAttribute",{attach:"geometry-attributes-instanceColor",args:[P.instanceColor],itemSize:3,count:r,usage:m.DynamicDrawUsage}),S.jsx("instancedBufferAttribute",{attach:"geometry-attributes-instanceColorEnd",args:[P.instanceColorEnd],itemSize:3,count:r,usage:m.DynamicDrawUsage}),S.jsx("instancedBufferAttribute",{attach:"geometry-attributes-instanceDirection",args:[P.instanceDirection],itemSize:3,count:r,usage:m.DynamicDrawUsage}),S.jsx("instancedBufferAttribute",{attach:"geometry-attributes-instanceLifetime",args:[P.instanceLifetime],itemSize:2,count:r,usage:m.DynamicDrawUsage}),S.jsx("instancedBufferAttribute",{attach:"geometry-attributes-instanceSpeed",args:[P.instanceSpeed],itemSize:1,count:r,usage:m.DynamicDrawUsage}),S.jsx("instancedBufferAttribute",{attach:"geometry-attributes-instanceRotationSpeed",args:[P.instanceRotationSpeed],itemSize:3,count:r,usage:m.DynamicDrawUsage})]})})};y.VFXEmitter=Pe,y.VFXParticles=we,Object.defineProperty(y,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lazy-vfx",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "Effortless high-end visual effects for React and Three.js",
   "keywords": [
     "react",