lazy-vfx 1.0.0

package/README.md

@@ -0,0 +1,231 @@
+# ☄️ Lazy VFX
+
+_Effortless high-end visual effects for the modern web, built for React & Three.js_
+
+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](#) - [Fireworks demo](#) - [Wizard Game demo](#)
+
+---
+
+## ✨ Features
+
+- **Modular Emitters** &mdash; Create and control particle sources with flexible settings using `<VFXEmitter>`.
+- **Custom GLSL Shaders** &mdash; GPU-accelerated with built-in vertex & fragment shaders, easily extensible for custom magic.
+- **Centralized State** &mdash; Driven by a single VFXStore for consistent, live-reloadable scene effects and controls.
+- **Fast Tooling** &mdash; Zero-config Vite setup, instant HMR, rapid production deployments.
+- **Leva Controls** &mdash; Out-of-the-box UI for tuning and exporting effects.
+
+---
+
+## 🚀 Quick Install
+
+Use your favorite package manager:
+
+```bash
+# With pnpm
+pnpm add lazy-vfx
+
+# Or npm
+npm install lazy-vfx
+
+# Or yarn
+yarn add lazy-vfx
+```
+
+---
+
+## 🛠️ Usage Example
+
+**Lazy VFX uses a two-component system:**
+
+- **VFXParticles:** Defines the particle system and its rendering properties
+- **VFXEmitter:** Controls how and when particles are emitted into the scene
+
+
+Add cinematic particles in seconds to any [React Three Fiber](https://docs.pmnd.rs/react-three-fiber) scene:
+
+```jsx
+import { VFXParticals, VFXEmitter } from 'lazy-vfx';
+// Also import your alphaMap or use a texture
+
+function Experience() {
+  return (
+    <>
+      {/* Step 1: Define your particle system */}
+      <VFXParticles
+        name="particles" // A unique identifier for this particle system
+        settings={{
+          nbParticles: 100000, // Maximum number of particles to allocate
+          gravity: [0, -9.8, 0], // Apply gravity (x, y, z)
+          fadeSize: [0, 0], // Size fade in/out settings
+          fadeAlpha: [0, 0], // Opacity fade in/out settings
+          renderMode: "billboard", // "billboard" or "mesh" or "stretchBillboard"
+          intensity: 3, // Brightness multiplier
+          appearance: AppearanceMode.Circular, // Define the default appearance to be plane (default) or circular
+          easeFunction: "easeLinear", // add easing to the particle animations
+        }}
+      />
+
+      {/* Step 2: Define your emitter */}
+      <VFXEmitter
+        debug // Show debug visualization
+        emitter="particles" // Target the particle system by name
+        settings={{
+          loop: true, // Continuously emit particles (only if `spawnMode` is 'time')
+          duration: 1, // Emission cycle duration in seconds
+          nbParticles: 100, // Number of particles to emit per cycle
+          spawnMode: "time", // Emission mode: 'time' or 'burst'
+          delay: 0, // Time delay before starting emission
+
+          // Particle lifetime range [min, max]
+          particlesLifetime: [0.1, 1],
+
+          // Position range (min/max)
+          startPositionMin: [-0.1, -0.1, -0.1],
+          startPositionMax: [0.1, 0.1, 0.1],
+
+          // Rotation range (min/max)
+          startRotationMin: [0, 0, 0],
+          startRotationMax: [0, 0, 0],
+          // Rotation speed range (min/max)
+          rotationSpeedMin: [0, 0, 0],
+          rotationSpeedMax: [0, 0, 0],
+
+          // Direction range (min/max)
+          directionMin: [-1, 0, -1],
+          directionMax: [1, 1, 1],
+
+          // Particle size range [min, max]
+          size: [0.01, 0.25],
+
+          // Particle speed range [min, max]
+          speed: [1, 12],
+
+          // Color at start - an array of strings for random selection
+          colorStart: ["white", "skyblue"],
+
+          // Color at end - an array of strings for random selection
+          colorEnd: ["white", "pink"],
+
+          // When true, the emitter will emit particles using its local axes (transformed by its world rotation)
+          useLocalDirection: true,
+        }}
+      />
+    </>
+  );
+}
+```
+---
+
+## Custom Geometry Example
+
+You can use custom geometries for your particles:
+
+```jsx
+import { useGLTF } from '@react-three/drei';
+
+const CustomParticles = () => {
+  // Load the GLTF model. Make sure the path to your .glb file is correct.
+  const { nodes } = useGLTF('/models/sword.glb');
+
+  return (
+    <>
+      <VFXParticles
+        name="swords"
+        geometry={nodes?.Sword?.geometry ? <primitive object={nodes.Sword.geometry} /> : null}
+        settings={{
+          nbParticles: 1000,
+          renderMode: "mesh",
+          intensity: 2,
+        }}
+      />
+
+      <VFXEmitter
+        emitter="swords"
+        settings={{
+          spawnMode: "burst",
+          nbParticles: 100,
+          // Add any other emitter settings as needed
+        }}
+      />
+    </>
+  );
+};
+```
+
+**Note:**  
+- Ensure the GLTF file at `/models/sword.glb` has a node named `Sword`.
+- If your model's node hierarchy is different, adjust `nodes.Sword.geometry` accordingly.
+
+## API Reference
+
+### VFXParticles Component
+
+| Property    | Type              | Description                                         |
+|-------------|-------------------|-----------------------------------------------------|
+| name        | string            | Unique identifier for this particle system          |
+| settings    | object            | Configuration options for particles                 |
+| alphaMap    | THREE.Texture     | Optional texture for particle alpha/transparency    |
+| geometry    | ReactElement      | Optional custom geometry for particles              |
+
+#### VFXParticles Settings
+
+| Setting         | Type                          | Default         | Description                                                              |
+|-----------------|------------------------------|-----------------|--------------------------------------------------------------------------|
+| nbParticles     | number                       | 1000            | Maximum number of particles                                              |
+| intensity       | number                       | 1               | Brightness multiplier                                                    |
+| renderMode      | 'billboard' \| 'mesh' \| 'stretchBillboard' | 'mesh'          | How particles are rendered                                               |
+| stretchScale    | number                       | 1.0             | Stretch factor for stretchBillboard mode                                 |
+| fadeSize        | [number, number]             | [0.1, 0.9]      | Size fade in/out range (0-1 of lifetime)                                 |
+| fadeAlpha       | [number, number]             | [0, 1.0]        | Opacity fade in/out range                                                |
+| gravity         | [number, number, number]     | [0, 0, 0]       | Gravity force applied to particles                                       |
+| frustumCulled   | boolean                      | true            | Whether particles are frustum culled                                     |
+| appearance      | AppearanceMode               | Square          | Particle appearance (Square or Circular)                                 |
+| easeFunction    | EaseFunction                 | 'easeLinear'    | Easing function for particle animations                                  |
+| blendingMode    | THREE.Blending               | AdditiveBlending| How particles blend with the scene                                       |
+| shadingHooks    | object                       | {}              | Custom GLSL shader hooks for advanced rendering effects                  |
+
+---
+
+### VFXEmitter Component
+
+| Property      | Type      | Description                                         |
+|---------------|-----------|-----------------------------------------------------|
+| emitter       | string    | Name of the target particle system                  |
+| settings      | object    | Configuration options for emission behavior         |
+| debug         | boolean   | Show Leva controls to adjust settings               |
+| autoStart     | boolean   | Automatically start emitting                        |
+| localDirection| boolean   | Use emitter's local space for directions            |
+
+#### VFXEmitter Settings
+
+| Setting             | Type                        | Default                   | Description                                         |
+|---------------------|-----------------------------|---------------------------|-----------------------------------------------------|
+| loop                | boolean                    | true                      | Continuously emit particles                         |
+| duration            | number                     | 1                         | Emission cycle duration in seconds                  |
+| nbParticles         | number                     | 100                       | Number of particles to emit per cycle               |
+| spawnMode           | 'time' \| 'burst'          | 'time'                    | How particles are spawned                           |
+| delay               | number                     | 0                         | Time delay before starting emission                 |
+| particlesLifetime   | [number, number]           | [0.1, 1]                  | Particle lifetime range [min, max]                  |
+| startPositionMin    | [number, number, number]   | [-0.1, -0.1, -0.1]        | Minimum start position                              |
+| startPositionMax    | [number, number, number]   | [0.1, 0.1, 0.1]           | Maximum start position                              |
+| startRotationMin    | [number, number, number]   | [0, 0, 0]                 | Minimum start rotation                              |
+| startRotationMax    | [number, number, number]   | [0, 0, 0]                 | Maximum start rotation                              |
+| rotationSpeedMin    | [number, number, number]   | [0, 0, 0]                 | Minimum rotation speed                              |
+| rotationSpeedMax    | [number, number, number]   | [0, 0, 0]                 | Maximum rotation speed                              |
+| directionMin        | [number, number, number]   | [-1, 0, -1]               | Minimum emission direction                          |
+| directionMax        | [number, number, number]   | [1, 1, 1]                 | Maximum emission direction                          |
+| size                | [number, number]           | [0.01, 0.25]              | Particle size range [min, max]                      |
+| speed               | [number, number]           | [1, 12]                   | Particle speed range [min, max]                     |
+| colorStart          | string[]                   | ['white']                 | Colors at start (randomly selected)                 |
+| colorEnd            | string[]                   | ['white']                 | Colors at end (randomly selected)                   |
+| useLocalDirection   | boolean                    | false                     | Use emitter's local space for directions            |
+
+---
+
+
+## 📄 License
+
+MIT © [Dev-Sameerkhan](https://github.com/Dev-Sameer-Khan)

package/dist/lazy-vfx.es.js

@@ -0,0 +1,834 @@
+import ye, { useRef as D, useEffect as ge, forwardRef as Re, useState as Ee, useImperativeHandle as Pe, useCallback as Ae, useMemo as be } from "react";
+import { create as he } from "zustand";
+import { useFrame as Se } from "@react-three/fiber";
+import * as p from "three";
+import { useControls as ae, button as ie, folder as Q } from "leva";
+var Z = { exports: {} }, J = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.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.
+ */
+var se;
+function _e() {
+  if (se) return J;
+  se = 1;
+  var n = Symbol.for("react.transitional.element"), g = Symbol.for("react.fragment");
+  function l(o, r, a) {
+    var E = null;
+    if (a !== void 0 && (E = "" + a), r.key !== void 0 && (E = "" + r.key), "key" in r) {
+      a = {};
+      for (var c in r)
+        c !== "key" && (a[c] = r[c]);
+    } else a = r;
+    return r = a.ref, {
+      $$typeof: n,
+      type: o,
+      key: E,
+      ref: r !== void 0 ? r : null,
+      props: a
+    };
+  }
+  return J.Fragment = g, J.jsx = l, J.jsxs = l, J;
+}
+var q = {};
+/**
+ * @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.
+ */
+var ce;
+function we() {
+  return ce || (ce = 1, process.env.NODE_ENV !== "production" && (function() {
+    function n(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === C ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case _:
+          return "Fragment";
+        case z:
+          return "Profiler";
+        case F:
+          return "StrictMode";
+        case f:
+          return "Suspense";
+        case B:
+          return "SuspenseList";
+        case T:
+          return "Activity";
+      }
+      if (typeof e == "object")
+        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:
+            return "Portal";
+          case w:
+            return e.displayName || "Context";
+          case N:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case S:
+            var t = e.render;
+            return e = e.displayName, e || (e = t.displayName || t.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case X:
+            return t = e.displayName || null, t !== null ? t : n(e.type) || "Memo";
+          case A:
+            t = e._payload, e = e._init;
+            try {
+              return n(e(t));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function g(e) {
+      return "" + e;
+    }
+    function l(e) {
+      try {
+        g(e);
+        var t = !1;
+      } catch {
+        t = !0;
+      }
+      if (t) {
+        t = console;
+        var u = t.error, m = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return u.call(
+          t,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          m
+        ), g(e);
+      }
+    }
+    function o(e) {
+      if (e === _) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === A)
+        return "<...>";
+      try {
+        var t = n(e);
+        return t ? "<" + t + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function r() {
+      var e = L.A;
+      return e === null ? null : e.getOwner();
+    }
+    function a() {
+      return Error("react-stack-top-frame");
+    }
+    function E(e) {
+      if (I.call(e, "key")) {
+        var t = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (t && t.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function c(e, t) {
+      function u() {
+        V || (V = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          t
+        ));
+      }
+      u.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: u,
+        configurable: !0
+      });
+    }
+    function M() {
+      var e = n(this.type);
+      return W[e] || (W[e] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), e = this.props.ref, e !== void 0 ? e : null;
+    }
+    function P(e, t, u, m, H, te) {
+      var v = u.ref;
+      return e = {
+        $$typeof: y,
+        type: e,
+        key: t,
+        props: u,
+        _owner: m
+      }, (v !== void 0 ? v : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: M
+      }) : 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: H
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: te
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function d(e, t, u, m, H, te) {
+      var v = t.children;
+      if (v !== void 0)
+        if (m)
+          if (U(v)) {
+            for (m = 0; m < v.length; m++)
+              i(v[m]);
+            Object.freeze && Object.freeze(v);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else i(v);
+      if (I.call(t, "key")) {
+        v = n(e);
+        var $ = Object.keys(t).filter(function(xe) {
+          return xe !== "key";
+        });
+        m = 0 < $.length ? "{key: someKey, " + $.join(": ..., ") + ": ...}" : "{key: someKey}", k[v + m] || ($ = 0 < $.length ? "{" + $.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          m,
+          v,
+          $,
+          v
+        ), k[v + m] = !0);
+      }
+      if (v = null, u !== void 0 && (l(u), v = "" + u), E(t) && (l(t.key), v = "" + t.key), "key" in t) {
+        u = {};
+        for (var re in t)
+          re !== "key" && (u[re] = t[re]);
+      } else u = t;
+      return v && c(
+        u,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), P(
+        e,
+        v,
+        u,
+        r(),
+        H,
+        te
+      );
+    }
+    function i(e) {
+      x(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === A && (e._payload.status === "fulfilled" ? x(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    }
+    function x(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === y;
+    }
+    var s = ye, y = Symbol.for("react.transitional.element"), h = Symbol.for("react.portal"), _ = Symbol.for("react.fragment"), F = Symbol.for("react.strict_mode"), z = Symbol.for("react.profiler"), N = Symbol.for("react.consumer"), w = Symbol.for("react.context"), S = Symbol.for("react.forward_ref"), f = Symbol.for("react.suspense"), B = Symbol.for("react.suspense_list"), X = Symbol.for("react.memo"), A = Symbol.for("react.lazy"), T = Symbol.for("react.activity"), C = Symbol.for("react.client.reference"), L = s.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, I = Object.prototype.hasOwnProperty, U = Array.isArray, Y = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    s = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var V, W = {}, O = s.react_stack_bottom_frame.bind(
+      s,
+      a
+    )(), G = Y(o(a)), k = {};
+    q.Fragment = _, q.jsx = function(e, t, u) {
+      var m = 1e4 > L.recentlyCreatedOwnerStacks++;
+      return d(
+        e,
+        t,
+        u,
+        !1,
+        m ? Error("react-stack-top-frame") : O,
+        m ? Y(o(e)) : G
+      );
+    }, q.jsxs = function(e, t, u) {
+      var m = 1e4 > L.recentlyCreatedOwnerStacks++;
+      return d(
+        e,
+        t,
+        u,
+        !0,
+        m ? Error("react-stack-top-frame") : O,
+        m ? Y(o(e)) : G
+      );
+    };
+  })()), q;
+}
+var le;
+function Me() {
+  return le || (le = 1, process.env.NODE_ENV === "production" ? Z.exports = _e() : Z.exports = we()), Z.exports;
+}
+var R = Me();
+const oe = he((n, g) => ({
+  emitters: {},
+  registerEmitter: (l, o) => {
+    if (g().emitters[l]) {
+      console.warn(`Emitter ${l} already exists`);
+      return;
+    }
+    n((r) => (r.emitters[l] = o, r));
+  },
+  unregisterEmitter: (l) => {
+    n((o) => (delete o.emitters[l], o));
+  },
+  emit: (l, ...o) => {
+    const r = g().emitters[l];
+    if (!r) {
+      console.warn(`Emitter ${l} not found`);
+      return;
+    }
+    r(...o);
+  }
+}));
+function ue(n, g) {
+  return n + Math.floor(Math.random() * (g - n + 1));
+}
+function b(n, g) {
+  return n + Math.random() * (g - n);
+}
+const Te = ({ settings: n, onChange: g, onRestart: l }) => {
+  ae("⚙️ Emitter Settings", {
+    Restart: ie(() => l()),
+    Export: ie(() => {
+      const c = JSON.stringify(E.current);
+      console.log("📋 Values saved to clipboard: ", c), navigator.clipboard.writeText(c);
+    })
+  });
+  const [{ ...o }, r] = ae(() => ({
+    "🪄 Emitter": Q({
+      duration: 4,
+      delay: 0,
+      nbParticles: 2e3,
+      spawnMode: {
+        options: ["time", "burst"],
+        value: "time"
+      },
+      loop: !1,
+      startPositionMin: {
+        value: [-1, -1, -1],
+        min: -10,
+        max: 10,
+        step: 0.1,
+        label: "startPositionMin"
+      },
+      startPositionMax: {
+        value: [1, 1, 1],
+        min: -10,
+        max: 10,
+        step: 0.1,
+        label: "startPositionMax"
+      },
+      startRotationMin: {
+        value: [0, 0, 0],
+        min: -Math.PI * 2,
+        max: Math.PI * 2,
+        step: 0.1,
+        label: "startRotationMin"
+      },
+      startRotationMax: {
+        value: [0, 0, 0],
+        min: -Math.PI * 2,
+        max: Math.PI * 2,
+        step: 0.1,
+        label: "startRotationMax"
+      }
+    }),
+    "✨ Particles": Q({
+      particlesLifetime: {
+        value: [0.1, 1],
+        min: 0,
+        max: 10,
+        step: 0.1,
+        label: "lifetime"
+      }
+    }),
+    "🌪 Forces": Q({
+      speed: {
+        value: [5, 20],
+        min: -100,
+        max: 100
+      },
+      directionMin: {
+        value: [-1, -1, -1],
+        min: -1,
+        max: 1,
+        step: 0.1
+      },
+      directionMax: {
+        value: [1, 1, 1],
+        min: -1,
+        max: 1,
+        step: 0.1
+      },
+      rotationSpeedMin: {
+        value: [0, 0, 0],
+        min: 0,
+        max: 10,
+        step: 0.1
+      },
+      rotationSpeedMax: {
+        value: [0, 0, 0],
+        min: 0,
+        max: 10,
+        step: 0.1
+      }
+    }),
+    "🎨 Appearance": Q({
+      nbColors: {
+        options: [1, 2, 3]
+      },
+      colorStart: "#ffffff",
+      colorEnd: "#ffffff",
+      colorStart2: {
+        value: "#ff0000",
+        render: (c) => c("🎨 Appearance.nbColors") > 1
+      },
+      colorEnd2: {
+        value: "#ffffff",
+        render: (c) => c("🎨 Appearance.nbColors") > 1
+      },
+      colorStart3: {
+        value: "#ff0000",
+        render: (c) => c("🎨 Appearance.nbColors") > 2
+      },
+      colorEnd3: {
+        value: "#ff0000",
+        render: (c) => c("🎨 Appearance.nbColors") > 2
+      },
+      size: {
+        value: [0.01, 1],
+        min: 0,
+        max: 5,
+        step: 0.01,
+        label: "size"
+      }
+    })
+  })), a = {
+    ...o,
+    colorStart: [o.colorStart],
+    colorEnd: [o.colorEnd]
+  };
+  delete a.nbColors, delete a.colorStart2, delete a.colorEnd2, delete a.colorStart3, delete a.colorEnd3, o.nbColors > 1 && a.colorStart.push(o.colorStart2), o.nbColors > 1 && a.colorEnd.push(o.colorEnd2), o.nbColors > 2 && a.colorStart.push(o.colorStart3), o.nbColors > 2 && a.colorEnd.push(o.colorEnd3);
+  const E = D(a);
+  E.current = a, ge(() => {
+    var c, M;
+    if (n) {
+      const P = {
+        ...n
+      };
+      for (let d = 0; d < 2; d++)
+        ((c = n.colorStart) == null ? void 0 : c.length) > d && (P[d === 0 ? "colorStart" : `colorStart${d + 1}`] = n.colorStart[d], P.nbColors = d + 1), ((M = n.colorEnd) == null ? void 0 : M.length) > d && (P[d === 0 ? "colorEnd" : `colorEnd${d + 1}`] = n.colorEnd[d]);
+      r({
+        ...P
+      });
+    }
+  }, [n]), g(a);
+}, K = new p.Vector3(), ne = new p.Quaternion(), Ce = new p.Euler(), ee = new p.Euler(), Oe = new p.Vector3(), Le = Re(
+  ({ debug: n = !1, emitter: g, settings: l = {}, ...o }, r) => {
+    const [{
+      duration: a = 1,
+      nParticles: E = 1e3,
+      spawnMode: c = "time",
+      // time, burst
+      loop: M = !1,
+      delay: P = 0,
+      colorStart: d = ["white", "skyblue"],
+      colorEnd: i = [],
+      particlesLifetime: x = [0.1, 1],
+      speed: s = [5, 20],
+      size: y = [0.1, 1],
+      startPositionMin: h = [-1, -1, -1],
+      startPositionMax: _ = [1, 1, 1],
+      startRotationMin: F = [0, 0, 0],
+      startRotationMax: z = [0, 0, 0],
+      rotationSpeedMin: N = [0, 0, 0],
+      rotationSpeedMax: w = [0, 0, 0],
+      directionMin: S = [0, 0, 0],
+      directionMax: f = [0, 0, 0]
+    }, B] = Ee(l), X = oe((U) => U.emit), A = D();
+    Pe(r, () => A.current);
+    const T = D(0), C = D(0);
+    Se(({ clock: U }, Y) => {
+      const V = U.elapsedTime;
+      if (C.current < E || M) {
+        if (!A)
+          return;
+        const O = (c === "burst" ? E : Math.max(
+          0,
+          Math.floor(
+            (T.current - P) / a * E
+          )
+        )) - C.current;
+        O > 0 && T.current >= P && (X(g, O, () => {
+          A.current.updateWorldMatrix(!0), A.current.matrixWorld.decompose(K, ne, Oe), Ce.setFromQuaternion(ne), ee.setFromQuaternion(ne);
+          const k = b(y[0], y[1]), e = d[ue(0, d.length - 1)];
+          return {
+            position: [
+              K.x + b(h[0], _[0]),
+              K.y + b(h[1], _[1]),
+              K.z + b(h[2], _[2])
+            ],
+            direction: [
+              b(S[0], f[0]),
+              b(S[1], f[1]),
+              b(S[2], f[2])
+            ],
+            scale: [k, k, k],
+            rotation: [
+              ee.x + b(F[0], z[0]),
+              ee.y + b(F[1], z[1]),
+              ee.z + b(F[2], z[2])
+            ],
+            rotationSpeed: [
+              b(N[0], w[0]),
+              b(N[1], w[1]),
+              b(N[2], w[2])
+            ],
+            lifetime: [
+              V,
+              b(x[0], x[1])
+            ],
+            colorStart: e,
+            colorEnd: i != null && i.length ? i[ue(0, i.length - 1)] : e,
+            speed: [b(s[0], s[1])]
+          };
+        }), C.current += O);
+      }
+      T.current += Y;
+    });
+    const L = Ae(() => {
+      C.current = 0, T.current = 0;
+    }, []), I = be(
+      () => n ? /* @__PURE__ */ R.jsx(
+        Te,
+        {
+          settings: l,
+          onChange: B,
+          onRestart: L
+        }
+      ) : null,
+      [n]
+    );
+    return /* @__PURE__ */ R.jsxs(R.Fragment, { children: [
+      I,
+      /* @__PURE__ */ R.jsx("object3D", { ...o, ref: A })
+    ] });
+  }
+);
+var ke = `varying vec2 vUv;
+    varying vec3 vColor;
+    varying vec3 vColorEnd;
+    varying float vProgress;
+
+    uniform float uTime;
+    uniform vec2 uFadeSize;
+    uniform vec3 uGravity;
+
+    attribute vec3 instanceColor;
+    attribute vec3 instanceColorEnd;
+    attribute vec3 instanceDirection;
+    attribute vec2 instanceLifetime;
+    attribute float instanceSpeed;
+    attribute vec3 instanceRotationSpeed;
+
+    mat4 rotationX(float angle) {
+      float s = sin(angle);
+      float c = cos(angle);
+      return mat4(
+          1,  0,  0,  0,
+          0,  c, -s,  0,
+          0,  s,  c,  0,
+          0,  0,  0,  1
+      );
+    }
+    
+    mat4 rotationY(float angle) {
+      float s = sin(angle);
+      float c = cos(angle);
+      return mat4(
+           c,  0,  s,  0,
+           0,  1,  0,  0,
+          -s,  0,  c,  0,
+           0,  0,  0,  1
+      );
+    }
+    
+    mat4 rotationZ(float angle) {
+      float s = sin(angle);
+      float c = cos(angle);
+      return mat4(
+          c, -s,  0,  0,
+          s,  c,  0,  0,
+          0,  0,  1,  0,
+          0,  0,  0,  1
+      );
+    }
+    
+    vec3 billboard(vec2 v, mat4 view) {
+      vec3 up = vec3(view[0][1], view[1][1], view[2][1]);
+      vec3 right = vec3(view[0][0], view[1][0], view[2][0]);
+      vec3 p = right * v.x + up * v.y;
+      return p;
+    }
+    
+
+    void main() {
+      float startTime = instanceLifetime.x;
+      float duration = instanceLifetime.y;
+      float age = uTime - startTime;
+      vProgress = age / duration;
+
+      if (vProgress < 0.0 || vProgress > 1.0) {
+        gl_Position = vec4(vec3(999.9), 1.0);
+        return;
+      }
+
+      float scale = smoothstep(0.0, uFadeSize.x, vProgress) * smoothstep(1.01, uFadeSize.y, vProgress);
+        vec3 gravity = 0.5 * uGravity * (age * age);
+
+      vec3 normalizedDirection = length(instanceDirection) > 0.0 ? normalize(instanceDirection) : vec3(0.0);
+      vec3 offset = normalizedDirection * age * instanceSpeed;
+      offset += gravity;
+
+      vec3 rotationSpeed = instanceRotationSpeed * age;
+      mat4 rotY = rotationY(rotationSpeed.y);
+      mat4 rotX = rotationX(rotationSpeed.x);
+      mat4 rotZ = rotationZ(rotationSpeed.z);
+      mat4 rotationMatrix = rotZ * rotX * rotX;
+
+      vec4 mvPosition;
+      #ifdef MESH_MODE
+        vec4 startPosition = modelMatrix * instanceMatrix * rotationMatrix * vec4(position * scale , 1.0);
+    
+        vec3 instancePosition = startPosition.xyz;
+    
+        vec3 finalPosition = instancePosition + offset;
+        mvPosition = modelViewMatrix * vec4(finalPosition, 1.0);
+      #endif
+
+      #ifdef BILLBOARD_MODE
+       vec4 localPos = vec4(position, 1.0);
+      localPos.xyz = billboard(position.xy, viewMatrix) * scale;
+
+        vec4 worldPos = modelMatrix * instanceMatrix * rotationMatrix * localPos;
+        worldPos.xyz += offset; 
+        mvPosition = modelViewMatrix * worldPos;
+      #endif
+    
+      gl_Position = projectionMatrix * mvPosition;
+
+      vUv = uv;
+      vColor = instanceColor;
+      vColorEnd = instanceColorEnd;
+    }`, je = `varying vec2 vUv;
+    varying vec3 vColor;
+    varying vec3 vColorEnd;
+    varying float vProgress;
+
+    uniform float uIntensity;
+    uniform vec2 uFadeAlpha;
+
+    uniform sampler2D uAlphaMap;
+
+    void main() {
+    if (vProgress < 0.0 || vProgress > 1.0) {
+        discard;
+    }
+      vec3 color = mix(vColor, vColorEnd, vProgress);
+      color *= uIntensity;
+
+    float alpha = smoothstep(0.0, uFadeAlpha.x, vProgress) * smoothstep(1.01, uFadeAlpha.y, vProgress);
+
+    #ifdef ALPHAMAP
+        vec4 tex = texture2D(uAlphaMap, vUv);
+        gl_FragColor = vec4(color, tex.a * alpha);   
+    #else
+        gl_FragColor = vec4(color, alpha);
+    #endif
+    }`;
+const fe = new p.Vector3(), de = new p.Euler(), me = new p.Quaternion(), ve = new p.Vector3(1, 1, 1), pe = new p.Matrix4(), j = new p.Color(), Ie = ({ name: n, settings: g = {}, alphaMap: l, geometry: o }) => {
+  const { nParticals: r = 1e3, intensity: a = 1, renderMode: E = "mesh", fadeSize: c = [0.1, 0.9], fadeAlpha: M = [0, 1], gravity: P = [0, 0, 0] } = g, d = new p.PlaneGeometry(), i = D(), [x] = Ee({
+    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)
+  }), s = D(0), y = D(0), h = D(!1), _ = (S, f) => {
+    const B = i.current.geometry.getAttribute("instanceColor"), X = i.current.geometry.getAttribute("instanceColorEnd"), A = i.current.geometry.getAttribute("instanceDirection"), T = i.current.geometry.getAttribute("instanceLifetime"), C = i.current.geometry.getAttribute("instanceSpeed"), L = i.current.geometry.getAttribute(
+      "instanceRotationSpeed"
+    );
+    for (let I = 0; I < S; I++) {
+      s.current >= r && (s.current = 0);
+      const {
+        scale: U,
+        rotation: Y,
+        rotationSpeed: V,
+        position: W,
+        direction: O,
+        lifetime: G,
+        colorStart: k,
+        colorEnd: e,
+        speed: t
+      } = f();
+      fe.set(...W), de.set(...Y), me.setFromEuler(de), ve.set(...U), pe.compose(fe, me, ve), j.set(k), j.set(e), A.set(O, s.current * 3), T.set(G, s.current * 2), C.set([t], s.current), L.set(V, s.current * 3), B.set(
+        [j.r, j.g, j.b],
+        s.current * 3
+      ), X.set(
+        [j.r, j.g, j.b],
+        s.current * 3
+      ), i.current.setMatrixAt(s.current, pe);
+    }
+    h.current = !0, s.current++, s.current = s.current % r;
+  }, F = () => {
+    if (!h.current || !i.current)
+      return;
+    [
+      i.current.instanceMatrix,
+      i.current.geometry.getAttribute("instanceColor"),
+      i.current.geometry.getAttribute("instanceColorEnd"),
+      i.current.geometry.getAttribute("instanceDirection"),
+      i.current.geometry.getAttribute("instanceLifetime"),
+      i.current.geometry.getAttribute("instanceSpeed"),
+      i.current.geometry.getAttribute("instanceRotationSpeed")
+    ].forEach((f) => {
+      f.clearUpdateRanges(), y.current > s.current ? (f.addUpdateRange(0, s.current * f.itemSize), f.addUpdateRange(
+        y.current * f.itemSize,
+        r * f.itemSize - y.current * f.itemSize
+      )) : f.addUpdateRange(
+        y.current * f.itemSize,
+        s.current * f.itemSize - y.current * f.itemSize
+      ), f.needsUpdate = !0;
+    }), y.current = s.current, h.current = !1;
+  }, z = oe((S) => S.registerEmitter), N = oe((S) => S.unregisterEmitter);
+  ge(() => (z(n, _), () => {
+    N(n);
+  }), []);
+  const w = be(
+    () => ({
+      uTime: { value: 0 },
+      uIntensity: { value: a },
+      uFadeSize: { value: c },
+      uFadeAlpha: { value: M },
+      uGravity: { value: P },
+      uAlphaMap: { value: l }
+    }),
+    []
+  );
+  return Se(({ clock: S }) => {
+    w && (w.uTime.value = S.elapsedTime);
+  }), /* @__PURE__ */ R.jsxs(
+    "instancedMesh",
+    {
+      ref: i,
+      args: [d, null, r],
+      onBeforeRender: F,
+      children: [
+        o,
+        /* @__PURE__ */ R.jsx(
+          "shaderMaterial",
+          {
+            uniforms: w,
+            vertexShader: ke,
+            fragmentShader: je,
+            blending: p.AdditiveBlending,
+            depthTest: !1,
+            depthWrite: !1,
+            transparent: !0,
+            defines: {
+              BILLBOARD_MODE: E === "billboard",
+              MESH_MODE: E === "mesh",
+              ALPHAMAP: !!l
+            }
+          }
+        ),
+        /* @__PURE__ */ R.jsx(
+          "instancedBufferAttribute",
+          {
+            attach: "geometry-attributes-instanceColor",
+            args: [x.instanceColor],
+            itemSize: 3,
+            count: r,
+            usage: p.DynamicDrawUsage
+          }
+        ),
+        /* @__PURE__ */ R.jsx(
+          "instancedBufferAttribute",
+          {
+            attach: "geometry-attributes-instanceColorEnd",
+            args: [x.instanceColorEnd],
+            itemSize: 3,
+            count: r,
+            usage: p.DynamicDrawUsage
+          }
+        ),
+        /* @__PURE__ */ R.jsx(
+          "instancedBufferAttribute",
+          {
+            attach: "geometry-attributes-instanceDirection",
+            args: [x.instanceDirection],
+            itemSize: 3,
+            count: r,
+            usage: p.DynamicDrawUsage
+          }
+        ),
+        /* @__PURE__ */ R.jsx(
+          "instancedBufferAttribute",
+          {
+            attach: "geometry-attributes-instanceLifetime",
+            args: [x.instanceLifetime],
+            itemSize: 2,
+            count: r,
+            usage: p.DynamicDrawUsage
+          }
+        ),
+        /* @__PURE__ */ R.jsx(
+          "instancedBufferAttribute",
+          {
+            attach: "geometry-attributes-instanceSpeed",
+            args: [x.instanceSpeed],
+            itemSize: 1,
+            count: r,
+            usage: p.DynamicDrawUsage
+          }
+        ),
+        /* @__PURE__ */ R.jsx(
+          "instancedBufferAttribute",
+          {
+            attach: "geometry-attributes-instanceRotationSpeed",
+            args: [x.instanceRotationSpeed],
+            itemSize: 3,
+            count: r,
+            usage: p.DynamicDrawUsage
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  Le as VFXEmitter,
+  Ie as VFXParticles
+};

package/dist/lazy-vfx.umd.js

@@ -0,0 +1,152 @@
+(function(x,u){typeof exports=="object"&&typeof module<"u"?u(exports,require("react"),require("zustand"),require("@react-three/fiber"),require("three"),require("leva")):typeof define=="function"&&define.amd?define(["exports","react","zustand","@react-three/fiber","three","leva"],u):(x=typeof globalThis<"u"?globalThis:x||self,u(x.LazyVFX={},x.React,x.zustand,x.Fiber,x.THREE,x.leva))})(this,(function(x,u,ge,ie,Ee,C){"use strict";function be(n){const d=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const a in n)if(a!=="default"){const o=Object.getOwnPropertyDescriptor(n,a);Object.defineProperty(d,a,o.get?o:{enumerable:!0,get:()=>n[a]})}}return d.default=n,Object.freeze(d)}const v=be(Ee);var q={exports:{}},G={};/**
+ * @license React
+ * react-jsx-runtime.production.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.
+ */var se;function Se(){if(se)return G;se=1;var n=Symbol.for("react.transitional.element"),d=Symbol.for("react.fragment");function a(o,r,i){var S=null;if(i!==void 0&&(S=""+i),r.key!==void 0&&(S=""+r.key),"key"in r){i={};for(var l in r)l!=="key"&&(i[l]=r[l])}else i=r;return r=i.ref,{$$typeof:n,type:o,key:S,ref:r!==void 0?r:null,props:i}}return G.Fragment=d,G.jsx=a,G.jsxs=a,G}var H={};/**
+ * @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.
+ */var ce;function ye(){return ce||(ce=1,process.env.NODE_ENV!=="production"&&(function(){function n(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===D?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case M:return"Fragment";case L:return"Profiler";case N:return"StrictMode";case m:return"Suspense";case J:return"SuspenseList";case k:return"Activity"}if(typeof e=="object")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 w:return"Portal";case T:return e.displayName||"Context";case I:return(e._context.displayName||"Context")+".Consumer";case y:var t=e.render;return e=e.displayName,e||(e=t.displayName||t.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case Q:return t=e.displayName||null,t!==null?t:n(e.type)||"Memo";case A:t=e._payload,e=e._init;try{return n(e(t))}catch{}}return null}function d(e){return""+e}function a(e){try{d(e);var t=!1}catch{t=!0}if(t){t=console;var f=t.error,g=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return f.call(t,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",g),d(e)}}function o(e){if(e===M)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===A)return"<...>";try{var t=n(e);return t?"<"+t+">":"<...>"}catch{return"<...>"}}function r(){var e=U.A;return e===null?null:e.getOwner()}function i(){return Error("react-stack-top-frame")}function S(e){if(V.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function l(e,t){function f(){B||(B=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",t))}f.isReactWarning=!0,Object.defineProperty(e,"key",{get:f,configurable:!0})}function j(){var e=n(this.type);return Z[e]||(Z[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function _(e,t,f,g,te,oe){var E=f.ref;return e={$$typeof:P,type:e,key:t,props:f,_owner:g},(E!==void 0?E:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:j}):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:te}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:oe}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function p(e,t,f,g,te,oe){var E=t.children;if(E!==void 0)if(g)if(Y(E)){for(g=0;g<E.length;g++)s(E[g]);Object.freeze&&Object.freeze(E)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else s(E);if(V.call(t,"key")){E=n(e);var W=Object.keys(t).filter(function(Te){return Te!=="key"});g=0<W.length?"{key: someKey, "+W.join(": ..., ")+": ...}":"{key: someKey}",z[E+g]||(W=0<W.length?"{"+W.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,g,E,W,E),z[E+g]=!0)}if(E=null,f!==void 0&&(a(f),E=""+f),S(t)&&(a(t.key),E=""+t.key),"key"in t){f={};for(var ae in t)ae!=="key"&&(f[ae]=t[ae])}else f=t;return E&&l(f,typeof e=="function"?e.displayName||e.name||"Unknown":e),_(e,E,f,r(),te,oe)}function s(e){h(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===A&&(e._payload.status==="fulfilled"?h(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function h(e){return typeof e=="object"&&e!==null&&e.$$typeof===P}var c=u,P=Symbol.for("react.transitional.element"),w=Symbol.for("react.portal"),M=Symbol.for("react.fragment"),N=Symbol.for("react.strict_mode"),L=Symbol.for("react.profiler"),I=Symbol.for("react.consumer"),T=Symbol.for("react.context"),y=Symbol.for("react.forward_ref"),m=Symbol.for("react.suspense"),J=Symbol.for("react.suspense_list"),Q=Symbol.for("react.memo"),A=Symbol.for("react.lazy"),k=Symbol.for("react.activity"),D=Symbol.for("react.client.reference"),U=c.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,V=Object.prototype.hasOwnProperty,Y=Array.isArray,X=console.createTask?console.createTask:function(){return null};c={react_stack_bottom_frame:function(e){return e()}};var B,Z={},F=c.react_stack_bottom_frame.bind(c,i)(),K=X(o(i)),z={};H.Fragment=M,H.jsx=function(e,t,f){var g=1e4>U.recentlyCreatedOwnerStacks++;return p(e,t,f,!1,g?Error("react-stack-top-frame"):F,g?X(o(e)):K)},H.jsxs=function(e,t,f){var g=1e4>U.recentlyCreatedOwnerStacks++;return p(e,t,f,!0,g?Error("react-stack-top-frame"):F,g?X(o(e)):K)}})()),H}var le;function xe(){return le||(le=1,process.env.NODE_ENV==="production"?q.exports=Se():q.exports=ye()),q.exports}var R=xe();const re=ge.create((n,d)=>({emitters:{},registerEmitter:(a,o)=>{if(d().emitters[a]){console.warn(`Emitter ${a} already exists`);return}n(r=>(r.emitters[a]=o,r))},unregisterEmitter:a=>{n(o=>(delete o.emitters[a],o))},emit:(a,...o)=>{const r=d().emitters[a];if(!r){console.warn(`Emitter ${a} not found`);return}r(...o)}}));function ue(n,d){return n+Math.floor(Math.random()*(d-n+1))}function b(n,d){return n+Math.random()*(d-n)}const Re=({settings:n,onChange:d,onRestart:a})=>{C.useControls("⚙️ Emitter Settings",{Restart:C.button(()=>a()),Export:C.button(()=>{const l=JSON.stringify(S.current);console.log("📋 Values saved to clipboard: ",l),navigator.clipboard.writeText(l)})});const[{...o},r]=C.useControls(()=>({"🪄 Emitter":C.folder({duration:4,delay:0,nbParticles:2e3,spawnMode:{options:["time","burst"],value:"time"},loop:!1,startPositionMin:{value:[-1,-1,-1],min:-10,max:10,step:.1,label:"startPositionMin"},startPositionMax:{value:[1,1,1],min:-10,max:10,step:.1,label:"startPositionMax"},startRotationMin:{value:[0,0,0],min:-Math.PI*2,max:Math.PI*2,step:.1,label:"startRotationMin"},startRotationMax:{value:[0,0,0],min:-Math.PI*2,max:Math.PI*2,step:.1,label:"startRotationMax"}}),"✨ Particles":C.folder({particlesLifetime:{value:[.1,1],min:0,max:10,step:.1,label:"lifetime"}}),"🌪 Forces":C.folder({speed:{value:[5,20],min:-100,max:100},directionMin:{value:[-1,-1,-1],min:-1,max:1,step:.1},directionMax:{value:[1,1,1],min:-1,max:1,step:.1},rotationSpeedMin:{value:[0,0,0],min:0,max:10,step:.1},rotationSpeedMax:{value:[0,0,0],min:0,max:10,step:.1}}),"🎨 Appearance":C.folder({nbColors:{options:[1,2,3]},colorStart:"#ffffff",colorEnd:"#ffffff",colorStart2:{value:"#ff0000",render:l=>l("🎨 Appearance.nbColors")>1},colorEnd2:{value:"#ffffff",render:l=>l("🎨 Appearance.nbColors")>1},colorStart3:{value:"#ff0000",render:l=>l("🎨 Appearance.nbColors")>2},colorEnd3:{value:"#ff0000",render:l=>l("🎨 Appearance.nbColors")>2},size:{value:[.01,1],min:0,max:5,step:.01,label:"size"}})})),i={...o,colorStart:[o.colorStart],colorEnd:[o.colorEnd]};delete i.nbColors,delete i.colorStart2,delete i.colorEnd2,delete i.colorStart3,delete i.colorEnd3,o.nbColors>1&&i.colorStart.push(o.colorStart2),o.nbColors>1&&i.colorEnd.push(o.colorEnd2),o.nbColors>2&&i.colorStart.push(o.colorStart3),o.nbColors>2&&i.colorEnd.push(o.colorEnd3);const S=u.useRef(i);S.current=i,u.useEffect(()=>{var l,j;if(n){const _={...n};for(let p=0;p<2;p++)((l=n.colorStart)==null?void 0:l.length)>p&&(_[p===0?"colorStart":`colorStart${p+1}`]=n.colorStart[p],_.nbColors=p+1),((j=n.colorEnd)==null?void 0:j.length)>p&&(_[p===0?"colorEnd":`colorEnd${p+1}`]=n.colorEnd[p]);r({..._})}},[n]),d(i)},$=new v.Vector3,ne=new v.Quaternion,he=new v.Euler,ee=new v.Euler,Pe=new v.Vector3,_e=u.forwardRef(({debug:n=!1,emitter:d,settings:a={},...o},r)=>{const[{duration:i=1,nParticles:S=1e3,spawnMode:l="time",loop:j=!1,delay:_=0,colorStart:p=["white","skyblue"],colorEnd:s=[],particlesLifetime:h=[.1,1],speed:c=[5,20],size:P=[.1,1],startPositionMin:w=[-1,-1,-1],startPositionMax:M=[1,1,1],startRotationMin:N=[0,0,0],startRotationMax:L=[0,0,0],rotationSpeedMin:I=[0,0,0],rotationSpeedMax:T=[0,0,0],directionMin:y=[0,0,0],directionMax:m=[0,0,0]},J]=u.useState(a),Q=re(Y=>Y.emit),A=u.useRef();u.useImperativeHandle(r,()=>A.current);const k=u.useRef(0),D=u.useRef(0);ie.useFrame(({clock:Y},X)=>{const B=Y.elapsedTime;if(D.current<S||j){if(!A)return;const F=(l==="burst"?S:Math.max(0,Math.floor((k.current-_)/i*S)))-D.current;F>0&&k.current>=_&&(Q(d,F,()=>{A.current.updateWorldMatrix(!0),A.current.matrixWorld.decompose($,ne,Pe),he.setFromQuaternion(ne),ee.setFromQuaternion(ne);const z=b(P[0],P[1]),e=p[ue(0,p.length-1)];return{position:[$.x+b(w[0],M[0]),$.y+b(w[1],M[1]),$.z+b(w[2],M[2])],direction:[b(y[0],m[0]),b(y[1],m[1]),b(y[2],m[2])],scale:[z,z,z],rotation:[ee.x+b(N[0],L[0]),ee.y+b(N[1],L[1]),ee.z+b(N[2],L[2])],rotationSpeed:[b(I[0],T[0]),b(I[1],T[1]),b(I[2],T[2])],lifetime:[B,b(h[0],h[1])],colorStart:e,colorEnd:s!=null&&s.length?s[ue(0,s.length-1)]:e,speed:[b(c[0],c[1])]}}),D.current+=F)}k.current+=X});const U=u.useCallback(()=>{D.current=0,k.current=0},[]),V=u.useMemo(()=>n?R.jsx(Re,{settings:a,onChange:J,onRestart:U}):null,[n]);return R.jsxs(R.Fragment,{children:[V,R.jsx("object3D",{...o,ref:A})]})});var Ae=`varying vec2 vUv;
+    varying vec3 vColor;
+    varying vec3 vColorEnd;
+    varying float vProgress;
+
+    uniform float uTime;
+    uniform vec2 uFadeSize;
+    uniform vec3 uGravity;
+
+    attribute vec3 instanceColor;
+    attribute vec3 instanceColorEnd;
+    attribute vec3 instanceDirection;
+    attribute vec2 instanceLifetime;
+    attribute float instanceSpeed;
+    attribute vec3 instanceRotationSpeed;
+
+    mat4 rotationX(float angle) {
+      float s = sin(angle);
+      float c = cos(angle);
+      return mat4(
+          1,  0,  0,  0,
+          0,  c, -s,  0,
+          0,  s,  c,  0,
+          0,  0,  0,  1
+      );
+    }
+    
+    mat4 rotationY(float angle) {
+      float s = sin(angle);
+      float c = cos(angle);
+      return mat4(
+           c,  0,  s,  0,
+           0,  1,  0,  0,
+          -s,  0,  c,  0,
+           0,  0,  0,  1
+      );
+    }
+    
+    mat4 rotationZ(float angle) {
+      float s = sin(angle);
+      float c = cos(angle);
+      return mat4(
+          c, -s,  0,  0,
+          s,  c,  0,  0,
+          0,  0,  1,  0,
+          0,  0,  0,  1
+      );
+    }
+    
+    vec3 billboard(vec2 v, mat4 view) {
+      vec3 up = vec3(view[0][1], view[1][1], view[2][1]);
+      vec3 right = vec3(view[0][0], view[1][0], view[2][0]);
+      vec3 p = right * v.x + up * v.y;
+      return p;
+    }
+    
+
+    void main() {
+      float startTime = instanceLifetime.x;
+      float duration = instanceLifetime.y;
+      float age = uTime - startTime;
+      vProgress = age / duration;
+
+      if (vProgress < 0.0 || vProgress > 1.0) {
+        gl_Position = vec4(vec3(999.9), 1.0);
+        return;
+      }
+
+      float scale = smoothstep(0.0, uFadeSize.x, vProgress) * smoothstep(1.01, uFadeSize.y, vProgress);
+        vec3 gravity = 0.5 * uGravity * (age * age);
+
+      vec3 normalizedDirection = length(instanceDirection) > 0.0 ? normalize(instanceDirection) : vec3(0.0);
+      vec3 offset = normalizedDirection * age * instanceSpeed;
+      offset += gravity;
+
+      vec3 rotationSpeed = instanceRotationSpeed * age;
+      mat4 rotY = rotationY(rotationSpeed.y);
+      mat4 rotX = rotationX(rotationSpeed.x);
+      mat4 rotZ = rotationZ(rotationSpeed.z);
+      mat4 rotationMatrix = rotZ * rotX * rotX;
+
+      vec4 mvPosition;
+      #ifdef MESH_MODE
+        vec4 startPosition = modelMatrix * instanceMatrix * rotationMatrix * vec4(position * scale , 1.0);
+    
+        vec3 instancePosition = startPosition.xyz;
+    
+        vec3 finalPosition = instancePosition + offset;
+        mvPosition = modelViewMatrix * vec4(finalPosition, 1.0);
+      #endif
+
+      #ifdef BILLBOARD_MODE
+       vec4 localPos = vec4(position, 1.0);
+      localPos.xyz = billboard(position.xy, viewMatrix) * scale;
+
+        vec4 worldPos = modelMatrix * instanceMatrix * rotationMatrix * localPos;
+        worldPos.xyz += offset; 
+        mvPosition = modelViewMatrix * worldPos;
+      #endif
+    
+      gl_Position = projectionMatrix * mvPosition;
+
+      vUv = uv;
+      vColor = instanceColor;
+      vColorEnd = instanceColorEnd;
+    }`,we=`varying vec2 vUv;
+    varying vec3 vColor;
+    varying vec3 vColorEnd;
+    varying float vProgress;
+
+    uniform float uIntensity;
+    uniform vec2 uFadeAlpha;
+
+    uniform sampler2D uAlphaMap;
+
+    void main() {
+    if (vProgress < 0.0 || vProgress > 1.0) {
+        discard;
+    }
+      vec3 color = mix(vColor, vColorEnd, vProgress);
+      color *= uIntensity;
+
+    float alpha = smoothstep(0.0, uFadeAlpha.x, vProgress) * smoothstep(1.01, uFadeAlpha.y, vProgress);
+
+    #ifdef ALPHAMAP
+        vec4 tex = texture2D(uAlphaMap, vUv);
+        gl_FragColor = vec4(color, tex.a * alpha);   
+    #else
+        gl_FragColor = vec4(color, alpha);
+    #endif
+    }`;const fe=new v.Vector3,de=new v.Euler,me=new v.Quaternion,ve=new v.Vector3(1,1,1),pe=new v.Matrix4,O=new v.Color,Me=({name:n,settings:d={},alphaMap:a,geometry:o})=>{const{nParticals:r=1e3,intensity:i=1,renderMode:S="mesh",fadeSize:l=[.1,.9],fadeAlpha:j=[0,1],gravity:_=[0,0,0]}=d,p=new v.PlaneGeometry,s=u.useRef(),[h]=u.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)}),c=u.useRef(0),P=u.useRef(0),w=u.useRef(!1),M=(y,m)=>{const J=s.current.geometry.getAttribute("instanceColor"),Q=s.current.geometry.getAttribute("instanceColorEnd"),A=s.current.geometry.getAttribute("instanceDirection"),k=s.current.geometry.getAttribute("instanceLifetime"),D=s.current.geometry.getAttribute("instanceSpeed"),U=s.current.geometry.getAttribute("instanceRotationSpeed");for(let V=0;V<y;V++){c.current>=r&&(c.current=0);const{scale:Y,rotation:X,rotationSpeed:B,position:Z,direction:F,lifetime:K,colorStart:z,colorEnd:e,speed:t}=m();fe.set(...Z),de.set(...X),me.setFromEuler(de),ve.set(...Y),pe.compose(fe,me,ve),O.set(z),O.set(e),A.set(F,c.current*3),k.set(K,c.current*2),D.set([t],c.current),U.set(B,c.current*3),J.set([O.r,O.g,O.b],c.current*3),Q.set([O.r,O.g,O.b],c.current*3),s.current.setMatrixAt(c.current,pe)}w.current=!0,c.current++,c.current=c.current%r},N=()=>{if(!w.current||!s.current)return;[s.current.instanceMatrix,s.current.geometry.getAttribute("instanceColor"),s.current.geometry.getAttribute("instanceColorEnd"),s.current.geometry.getAttribute("instanceDirection"),s.current.geometry.getAttribute("instanceLifetime"),s.current.geometry.getAttribute("instanceSpeed"),s.current.geometry.getAttribute("instanceRotationSpeed")].forEach(m=>{m.clearUpdateRanges(),P.current>c.current?(m.addUpdateRange(0,c.current*m.itemSize),m.addUpdateRange(P.current*m.itemSize,r*m.itemSize-P.current*m.itemSize)):m.addUpdateRange(P.current*m.itemSize,c.current*m.itemSize-P.current*m.itemSize),m.needsUpdate=!0}),P.current=c.current,w.current=!1},L=re(y=>y.registerEmitter),I=re(y=>y.unregisterEmitter);u.useEffect(()=>(L(n,M),()=>{I(n)}),[]);const T=u.useMemo(()=>({uTime:{value:0},uIntensity:{value:i},uFadeSize:{value:l},uFadeAlpha:{value:j},uGravity:{value:_},uAlphaMap:{value:a}}),[]);return ie.useFrame(({clock:y})=>{T&&(T.uTime.value=y.elapsedTime)}),R.jsxs("instancedMesh",{ref:s,args:[p,null,r],onBeforeRender:N,children:[o,R.jsx("shaderMaterial",{uniforms:T,vertexShader:Ae,fragmentShader:we,blending:v.AdditiveBlending,depthTest:!1,depthWrite:!1,transparent:!0,defines:{BILLBOARD_MODE:S==="billboard",MESH_MODE:S==="mesh",ALPHAMAP:!!a}}),R.jsx("instancedBufferAttribute",{attach:"geometry-attributes-instanceColor",args:[h.instanceColor],itemSize:3,count:r,usage:v.DynamicDrawUsage}),R.jsx("instancedBufferAttribute",{attach:"geometry-attributes-instanceColorEnd",args:[h.instanceColorEnd],itemSize:3,count:r,usage:v.DynamicDrawUsage}),R.jsx("instancedBufferAttribute",{attach:"geometry-attributes-instanceDirection",args:[h.instanceDirection],itemSize:3,count:r,usage:v.DynamicDrawUsage}),R.jsx("instancedBufferAttribute",{attach:"geometry-attributes-instanceLifetime",args:[h.instanceLifetime],itemSize:2,count:r,usage:v.DynamicDrawUsage}),R.jsx("instancedBufferAttribute",{attach:"geometry-attributes-instanceSpeed",args:[h.instanceSpeed],itemSize:1,count:r,usage:v.DynamicDrawUsage}),R.jsx("instancedBufferAttribute",{attach:"geometry-attributes-instanceRotationSpeed",args:[h.instanceRotationSpeed],itemSize:3,count:r,usage:v.DynamicDrawUsage})]})};x.VFXEmitter=_e,x.VFXParticles=Me,Object.defineProperty(x,Symbol.toStringTag,{value:"Module"})}));

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "lazy-vfx",
+  "version": "1.0.0",
+  "description": "Effortless high-end visual effects for React and Three.js",
+  "keywords": [
+    "react",
+    "three",
+    "react-three-fiber",
+    "r3f",
+    "vfx",
+    "particles",
+    "shaders",
+    "glsl",
+    "motion-design"
+  ],
+  "type": "module",
+"main": "./dist/lazy-vfx.umd.js",
+  "module": "./dist/lazy-vfx.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/lazy-vfx.es.js",
+      "require": "./dist/lazy-vfx.umd.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "prepublishOnly": "pnpm build"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "three": ">=0.150.0",
+    "@react-three/fiber": ">=8.0.0",
+    "@react-three/drei": ">=9.0.0"
+  },
+  "dependencies": {
+    "@react-three/postprocessing": "^3.0.4",
+    "leva": "^0.10.1",
+    "zustand": "^5.0.12"
+  },
+  "devDependencies": {
+    "@react-three/drei": "^10.7.7",
+    "@react-three/fiber": "^9.5.0",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@vitejs/plugin-react": "^4.3.4",
+    "globals": "^15.15.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "three": "^0.183.2",
+    "vite": "^6.2.0",
+    "vite-plugin-glsl": "^1.5.6",
+    "path": "^0.12.7"
+  },
+  "author": "Sameer Khan",
+  "license": "MIT"
+}