r3f-vfx 0.1.8 → 0.2.0

package/dist/index.js

@@ -34,14 +34,13 @@ var __objRest = (source, exclude) => {
 import {
   forwardRef,
   useImperativeHandle,
-  useEffect as useEffect2,
-  useRef as useRef2,
-  useMemo as useMemo2,
+  useEffect,
+  useRef,
+  useMemo,
   useCallback,
-  useState as useState2
+  useState
 } from "react";
 import { useFrame, useThree } from "@react-three/fiber";
-import * as THREE from "three/webgpu";
 
 // src/react-store.ts
 import { coreStore } from "core-vfx";
@@ -56,163 +55,45 @@ var useVFXStore = Object.assign(useVFXStoreImpl, {
   getInitialState: coreStore.getInitialState
 });
 
-// src/useCurveTextureAsync.ts
-import { useRef, useEffect, useMemo, useState } from "react";
-import {
-  createDefaultCurveTexture,
-  createCombinedCurveTexture,
-  loadCurveTextureFromPath,
-  CurveChannel
-} from "core-vfx";
-var useCurveTextureAsync = (sizeCurve, opacityCurve, velocityCurve, rotationSpeedCurve, curveTexturePath = null) => {
-  const hasAnyCurve = sizeCurve || opacityCurve || velocityCurve || rotationSpeedCurve;
-  const texture = useMemo(() => {
-    if (!curveTexturePath && hasAnyCurve) {
-      return createCombinedCurveTexture(
-        sizeCurve,
-        opacityCurve,
-        velocityCurve,
-        rotationSpeedCurve
-      );
-    }
-    return createDefaultCurveTexture();
-  }, [
-    sizeCurve,
-    opacityCurve,
-    velocityCurve,
-    rotationSpeedCurve,
-    curveTexturePath,
-    hasAnyCurve
-  ]);
-  const [loadedTexture, setLoadedTexture] = useState(
-    null
-  );
-  const [loadedChannels, setLoadedChannels] = useState(0);
-  useEffect(() => {
-    if (!curveTexturePath) {
-      setLoadedTexture(null);
-      setLoadedChannels(0);
-      return;
-    }
-    let cancelled = false;
-    loadCurveTextureFromPath(curveTexturePath).then((result) => {
-      if (!cancelled) {
-        setLoadedTexture(result.texture);
-        setLoadedChannels(result.activeChannels);
-      } else {
-        result.texture.dispose();
-      }
-    }).catch((err) => {
-      console.warn(
-        `Failed to load curve texture: ${curveTexturePath}, falling back to baking`,
-        err
-      );
-      if (!cancelled && hasAnyCurve) {
-        setLoadedTexture(
-          createCombinedCurveTexture(
-            sizeCurve,
-            opacityCurve,
-            velocityCurve,
-            rotationSpeedCurve
-          )
-        );
-        let mask = 0;
-        if (sizeCurve) mask |= CurveChannel.SIZE;
-        if (opacityCurve) mask |= CurveChannel.OPACITY;
-        if (velocityCurve) mask |= CurveChannel.VELOCITY;
-        if (rotationSpeedCurve) mask |= CurveChannel.ROTATION_SPEED;
-        setLoadedChannels(mask);
-      }
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [
-    curveTexturePath,
-    sizeCurve,
-    opacityCurve,
-    velocityCurve,
-    rotationSpeedCurve,
-    hasAnyCurve
-  ]);
-  const activeTexture = loadedTexture != null ? loadedTexture : texture;
-  const sizeEnabled = loadedTexture ? !!(loadedChannels & CurveChannel.SIZE) : !!sizeCurve;
-  const opacityEnabled = loadedTexture ? !!(loadedChannels & CurveChannel.OPACITY) : !!opacityCurve;
-  const velocityEnabled = loadedTexture ? !!(loadedChannels & CurveChannel.VELOCITY) : !!velocityCurve;
-  const rotationSpeedEnabled = loadedTexture ? !!(loadedChannels & CurveChannel.ROTATION_SPEED) : !!rotationSpeedCurve;
-  const prevTextureRef = useRef(null);
-  useEffect(() => {
-    const prev = prevTextureRef.current;
-    if (prev && prev !== activeTexture) {
-      prev.dispose();
-    }
-    prevTextureRef.current = activeTexture;
-  }, [activeTexture]);
-  useEffect(() => {
-    return () => {
-      var _a;
-      (_a = prevTextureRef.current) == null ? void 0 : _a.dispose();
-      prevTextureRef.current = null;
-    };
-  }, []);
-  return {
-    texture: activeTexture,
-    sizeEnabled,
-    opacityEnabled,
-    velocityEnabled,
-    rotationSpeedEnabled
-  };
-};
-
 // src/VFXParticles.tsx
-import { uniform, instancedArray } from "three/tsl";
 import {
   Appearance,
   Blending,
   EmitterShape,
   Lighting,
-  MAX_ATTRACTORS,
-  hexToRgb,
-  toRange,
-  easingToType,
-  axisToNumber,
-  toRotation3D,
-  lifetimeToFadeRate,
-  createInitCompute,
-  createSpawnCompute,
-  createUpdateCompute,
-  createParticleMaterial
+  VFXParticleSystem,
+  isWebGPUBackend,
+  isNonDefaultRotation,
+  normalizeProps,
+  updateUniforms,
+  updateUniformsPartial,
+  resolveFeatures
 } from "core-vfx";
 import {
   Appearance as Appearance2,
   Blending as Blending2,
   EmitterShape as EmitterShape2,
-  AttractorType as AttractorType2,
-  Easing as Easing2,
+  AttractorType,
+  Easing,
   Lighting as Lighting2,
   bakeCurveToArray,
-  createCombinedCurveTexture as createCombinedCurveTexture3,
+  createCombinedCurveTexture,
   buildCurveTextureBin,
-  CurveChannel as CurveChannel2
+  CurveChannel
 } from "core-vfx";
-import { jsx } from "react/jsx-runtime";
-var VFXParticles = forwardRef(
-  function VFXParticles2({
+import { Fragment, jsx } from "react/jsx-runtime";
+var VFXParticlesImpl = forwardRef(
+  function VFXParticlesImpl2({
     name,
-    // Optional name for registering with useVFXStore (enables VFXEmitter linking)
     maxParticles = 1e4,
     size = [0.1, 0.3],
     colorStart = ["#ffffff"],
     colorEnd = null,
-    // If null, uses colorStart (no color transition)
     fadeSize = [1, 0],
     fadeSizeCurve = null,
-    // Curve data { points: [...] } - controls fadeSize over lifetime (overrides fadeSize if set)
     fadeOpacity = [1, 0],
     fadeOpacityCurve = null,
-    // Curve data { points: [...] } - controls fadeOpacity over lifetime (overrides fadeOpacity if set)
     velocityCurve = null,
-    // Curve data { points: [...] } - controls velocity/speed over lifetime (overrides friction if set)
     gravity = [0, 0, 0],
     lifetime = [1, 2],
     direction = [
@@ -220,144 +101,81 @@ var VFXParticles = forwardRef(
       [0, 1],
       [-1, 1]
     ],
-    // [[minX, maxX], [minY, maxY], [minZ, maxZ]] or [min, max] for all axes
     startPosition = [
       [0, 0],
       [0, 0],
       [0, 0]
     ],
-    // [[minX, maxX], [minY, maxY], [minZ, maxZ]] offset from spawn position
     speed = [0.1, 0.1],
     friction = { intensity: 0, easing: "linear" },
-    // { intensity: [start, end] or single value, easing: string }
-    // intensity: 1 = max friction (almost stopped), 0 = no friction (normal), negative = boost/acceleration
     appearance = Appearance.GRADIENT,
     alphaMap = null,
     flipbook = null,
-    // { rows: 4, columns: 8 }
     rotation = [0, 0],
-    // [min, max] in radians
     rotationSpeed = [0, 0],
-    // [min, max] rotation speed in radians/second
     rotationSpeedCurve = null,
-    // Curve data { points: [...] } - controls rotation speed over lifetime
     geometry = null,
-    // Custom geometry (e.g. new THREE.SphereGeometry(0.5, 8, 8))
     orientToDirection = false,
-    // Rotate geometry to face velocity direction (geometry mode only)
     orientAxis = "z",
-    // Which local axis aligns with velocity: "x", "y", "z", "-x", "-y", "-z"
     stretchBySpeed = null,
-    // { factor: 2, maxStretch: 5 } - stretch particles in velocity direction based on effective speed
     lighting = Lighting.STANDARD,
-    // 'basic' | 'standard' | 'physical' - material type for geometry mode
     shadow = false,
-    // Enable both castShadow and receiveShadow on geometry instances
     blending = Blending.NORMAL,
     intensity = 1,
     position = [0, 0, 0],
     autoStart = true,
     delay = 0,
     backdropNode = null,
-    // TSL node or function for backdrop sampling
     opacityNode = null,
-    // TSL node or function for custom opacity control
     colorNode = null,
-    // TSL node or function to override color (receives particleData, should return vec4)
     alphaTestNode = null,
-    // TSL node or function for custom alpha test/discard (return true to discard fragment)
     castShadowNode = null,
-    // TSL node or function for shadow map output (what shadow the particle casts)
     emitCount = 1,
-    // Emitter shape props
     emitterShape = EmitterShape.BOX,
-    // Emission shape type
     emitterRadius = [0, 1],
-    // [inner, outer] radius for sphere/cone/disk (inner=0 for solid)
     emitterAngle = Math.PI / 4,
-    // Cone angle in radians (0 = line, PI/2 = hemisphere)
     emitterHeight = [0, 1],
-    // [min, max] height for cone
     emitterSurfaceOnly = false,
-    // Emit from surface only (sphere/disk)
     emitterDirection = [0, 1, 0],
-    // Direction for cone/disk normal
-    // Turbulence (curl noise)
     turbulence = null,
-    // { intensity: 0.5, frequency: 1, speed: 1 }
-    // Attractors - array of up to 4 attractors
-    // { position: [x,y,z], strength: 1, radius: 3, type: 'point'|'vortex', axis?: [x,y,z] }
     attractors = null,
-    // Simple attract to center - particles move from spawn position to center over lifetime
-    // Overrides speed/direction - lifetime controls how long it takes to reach center
     attractToCenter = false,
-    // Use start position offset as direction - particles move in the direction of their spawn offset
     startPositionAsDirection = false,
-    // Soft particles - fade when intersecting scene geometry
     softParticles = false,
     softDistance = 0.5,
-    // Distance in world units over which to fade
-    // Plane collision - particles bounce or die when hitting a plane
-    // { plane: { y: 0 }, bounce: 0.3, friction: 0.8, die: false, sizeBasedGravity: 0 }
     collision = null,
-    // Debug mode - shows tweakable control panel
     debug = false,
-    // Path to pre-baked curve texture (skips runtime baking for faster load)
     curveTexturePath = null,
-    // Depth test
     depthTest = true,
-    // Render order
     renderOrder = 0
   }, ref) {
     var _a;
     const { gl: renderer } = useThree();
-    const spriteRef = useRef2(null);
-    const initialized = useRef2(false);
-    const nextIndex = useRef2(0);
-    const [emitting, setEmitting] = useState2(autoStart);
-    const emitAccumulator = useRef2(0);
-    const delayRef = useRef2(delay);
-    const emitCountRef = useRef2(emitCount);
-    const turbulenceRef = useRef2(turbulence);
-    const [activeMaxParticles, setActiveMaxParticles] = useState2(maxParticles);
-    const [activeLighting, setActiveLighting] = useState2(lighting);
-    const [activeAppearance, setActiveAppearance] = useState2(appearance);
-    const [activeOrientToDirection, setActiveOrientToDirection] = useState2(orientToDirection);
-    const [activeGeometry, setActiveGeometry] = useState2(geometry);
-    const [activeShadow, setActiveShadow] = useState2(shadow);
-    const [activeFadeSizeCurve, setActiveFadeSizeCurve] = useState2(fadeSizeCurve);
-    const [activeFadeOpacityCurve, setActiveFadeOpacityCurve] = useState2(fadeOpacityCurve);
-    const [activeVelocityCurve, setActiveVelocityCurve] = useState2(velocityCurve);
-    const [activeRotationSpeedCurve, setActiveRotationSpeedCurve] = useState2(rotationSpeedCurve);
-    const [activeTurbulence, setActiveTurbulence] = useState2(
+    const spriteRef = useRef(null);
+    const [emitting, setEmitting] = useState(autoStart);
+    const debugValuesRef = useRef(null);
+    const [activeMaxParticles, setActiveMaxParticles] = useState(maxParticles);
+    const [activeLighting, setActiveLighting] = useState(lighting);
+    const [activeAppearance, setActiveAppearance] = useState(appearance);
+    const [activeOrientToDirection, setActiveOrientToDirection] = useState(orientToDirection);
+    const [activeGeometry, setActiveGeometry] = useState(geometry);
+    const [activeShadow, setActiveShadow] = useState(shadow);
+    const [activeFadeSizeCurve, setActiveFadeSizeCurve] = useState(fadeSizeCurve);
+    const [activeFadeOpacityCurve, setActiveFadeOpacityCurve] = useState(fadeOpacityCurve);
+    const [activeVelocityCurve, setActiveVelocityCurve] = useState(velocityCurve);
+    const [activeRotationSpeedCurve, setActiveRotationSpeedCurve] = useState(rotationSpeedCurve);
+    const [activeTurbulence, setActiveTurbulence] = useState(
       turbulence !== null && ((_a = turbulence == null ? void 0 : turbulence.intensity) != null ? _a : 0) > 0
     );
-    const [activeAttractors, setActiveAttractors] = useState2(
+    const [activeAttractors, setActiveAttractors] = useState(
       attractors !== null && attractors.length > 0
     );
-    const [activeCollision, setActiveCollision] = useState2(collision !== null);
-    const [activeNeedsPerParticleColor, setActiveNeedsPerParticleColor] = useState2(colorStart.length > 1 || colorEnd !== null);
-    const isNonDefaultRotation = (r) => {
-      if (typeof r === "number") return r !== 0;
-      if (Array.isArray(r) && r.length === 2 && typeof r[0] === "number") {
-        return r[0] !== 0 || r[1] !== 0;
-      }
-      if (Array.isArray(r)) {
-        return r.some(
-          (axis) => Array.isArray(axis) && (axis[0] !== 0 || axis[1] !== 0)
-        );
-      }
-      return false;
-    };
-    const [activeNeedsRotation, setActiveNeedsRotation] = useState2(
+    const [activeCollision, setActiveCollision] = useState(collision !== null);
+    const [activeNeedsPerParticleColor, setActiveNeedsPerParticleColor] = useState(colorStart.length > 1 || colorEnd !== null);
+    const [activeNeedsRotation, setActiveNeedsRotation] = useState(
       isNonDefaultRotation(rotation) || isNonDefaultRotation(rotationSpeed)
     );
-    useEffect2(() => {
-      delayRef.current = delay;
-      emitCountRef.current = emitCount;
-      turbulenceRef.current = turbulence;
-    }, [delay, emitCount, turbulence]);
-    useEffect2(() => {
+    useEffect(() => {
       var _a2;
       if (!debug) {
         setActiveMaxParticles(maxParticles);
@@ -402,699 +220,221 @@ var VFXParticles = forwardRef(
       attractors,
       collision
     ]);
-    const sizeRange = useMemo2(() => toRange(size, [0.1, 0.3]), [size]);
-    const speedRange = useMemo2(() => toRange(speed, [0.1, 0.1]), [speed]);
-    const fadeSizeRange = useMemo2(() => toRange(fadeSize, [1, 0]), [fadeSize]);
-    const fadeOpacityRange = useMemo2(
-      () => toRange(fadeOpacity, [1, 0]),
-      [fadeOpacity]
-    );
-    const {
-      texture: curveTexture,
-      sizeEnabled: curveTextureSizeEnabled,
-      opacityEnabled: curveTextureOpacityEnabled,
-      velocityEnabled: curveTextureVelocityEnabled,
-      rotationSpeedEnabled: curveTextureRotationSpeedEnabled
-    } = useCurveTextureAsync(
-      activeFadeSizeCurve,
-      activeFadeOpacityCurve,
-      activeVelocityCurve,
-      activeRotationSpeedCurve,
-      curveTexturePath
-    );
-    const lifetimeRange = useMemo2(() => toRange(lifetime, [1, 2]), [lifetime]);
-    const rotation3D = useMemo2(() => toRotation3D(rotation), [rotation]);
-    const rotationSpeed3D = useMemo2(
-      () => toRotation3D(rotationSpeed),
-      [rotationSpeed]
-    );
-    const direction3D = useMemo2(() => toRotation3D(direction), [direction]);
-    const startPosition3D = useMemo2(
-      () => toRotation3D(startPosition),
-      [startPosition]
-    );
-    const emitterRadiusRange = useMemo2(
-      () => toRange(emitterRadius, [0, 1]),
-      [emitterRadius]
-    );
-    const emitterHeightRange = useMemo2(
-      () => toRange(emitterHeight, [0, 1]),
-      [emitterHeight]
-    );
-    const activeFeatures = useMemo2(
-      () => ({
-        // Storage array features
-        needsPerParticleColor: activeNeedsPerParticleColor,
-        needsRotation: activeNeedsRotation,
-        // Shader features (skip code entirely when disabled)
-        turbulence: activeTurbulence,
-        attractors: activeAttractors,
-        collision: activeCollision,
-        rotation: activeNeedsRotation,
-        perParticleColor: activeNeedsPerParticleColor
-      }),
+    const system = useMemo(
+      () => {
+        var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I;
+        const dbg = debug ? debugValuesRef.current : null;
+        return new VFXParticleSystem(
+          renderer,
+          {
+            maxParticles: activeMaxParticles,
+            size: (_a2 = dbg == null ? void 0 : dbg.size) != null ? _a2 : size,
+            colorStart: (_b = dbg == null ? void 0 : dbg.colorStart) != null ? _b : colorStart,
+            colorEnd: (dbg == null ? void 0 : dbg.colorEnd) !== void 0 ? dbg.colorEnd : colorEnd,
+            fadeSize: (_c = dbg == null ? void 0 : dbg.fadeSize) != null ? _c : fadeSize,
+            fadeSizeCurve: activeFadeSizeCurve,
+            fadeOpacity: (_d = dbg == null ? void 0 : dbg.fadeOpacity) != null ? _d : fadeOpacity,
+            fadeOpacityCurve: activeFadeOpacityCurve,
+            velocityCurve: activeVelocityCurve,
+            gravity: (_e = dbg == null ? void 0 : dbg.gravity) != null ? _e : gravity,
+            lifetime: (_f = dbg == null ? void 0 : dbg.lifetime) != null ? _f : lifetime,
+            direction: (_g = dbg == null ? void 0 : dbg.direction) != null ? _g : direction,
+            startPosition: (_h = dbg == null ? void 0 : dbg.startPosition) != null ? _h : startPosition,
+            speed: (_i = dbg == null ? void 0 : dbg.speed) != null ? _i : speed,
+            friction: (_j = dbg == null ? void 0 : dbg.friction) != null ? _j : friction,
+            appearance: activeAppearance,
+            alphaMap,
+            flipbook,
+            rotation: (_k = dbg == null ? void 0 : dbg.rotation) != null ? _k : rotation,
+            rotationSpeed: (_l = dbg == null ? void 0 : dbg.rotationSpeed) != null ? _l : rotationSpeed,
+            rotationSpeedCurve: activeRotationSpeedCurve,
+            geometry: activeGeometry,
+            orientToDirection: activeOrientToDirection,
+            orientAxis: (_m = dbg == null ? void 0 : dbg.orientAxis) != null ? _m : orientAxis,
+            stretchBySpeed: (_n = dbg == null ? void 0 : dbg.stretchBySpeed) != null ? _n : stretchBySpeed,
+            lighting: activeLighting,
+            shadow: activeShadow,
+            blending: (_o = dbg == null ? void 0 : dbg.blending) != null ? _o : blending,
+            intensity: (_p = dbg == null ? void 0 : dbg.intensity) != null ? _p : intensity,
+            position: (_q = dbg == null ? void 0 : dbg.position) != null ? _q : position,
+            autoStart: (_r = dbg == null ? void 0 : dbg.autoStart) != null ? _r : autoStart,
+            delay: (_s = dbg == null ? void 0 : dbg.delay) != null ? _s : delay,
+            emitCount: (_t = dbg == null ? void 0 : dbg.emitCount) != null ? _t : emitCount,
+            emitterShape: (_u = dbg == null ? void 0 : dbg.emitterShape) != null ? _u : emitterShape,
+            emitterRadius: (_v = dbg == null ? void 0 : dbg.emitterRadius) != null ? _v : emitterRadius,
+            emitterAngle: (_w = dbg == null ? void 0 : dbg.emitterAngle) != null ? _w : emitterAngle,
+            emitterHeight: (_x = dbg == null ? void 0 : dbg.emitterHeight) != null ? _x : emitterHeight,
+            emitterSurfaceOnly: (_y = dbg == null ? void 0 : dbg.emitterSurfaceOnly) != null ? _y : emitterSurfaceOnly,
+            emitterDirection: (_z = dbg == null ? void 0 : dbg.emitterDirection) != null ? _z : emitterDirection,
+            turbulence: (_A = dbg == null ? void 0 : dbg.turbulence) != null ? _A : turbulence,
+            attractors: (_B = dbg == null ? void 0 : dbg.attractors) != null ? _B : attractors,
+            attractToCenter: (_C = dbg == null ? void 0 : dbg.attractToCenter) != null ? _C : attractToCenter,
+            startPositionAsDirection: (_D = dbg == null ? void 0 : dbg.startPositionAsDirection) != null ? _D : startPositionAsDirection,
+            softParticles: (_E = dbg == null ? void 0 : dbg.softParticles) != null ? _E : softParticles,
+            softDistance: (_F = dbg == null ? void 0 : dbg.softDistance) != null ? _F : softDistance,
+            collision: (_G = dbg == null ? void 0 : dbg.collision) != null ? _G : collision,
+            backdropNode,
+            opacityNode,
+            colorNode,
+            alphaTestNode,
+            castShadowNode,
+            depthTest: (_H = dbg == null ? void 0 : dbg.depthTest) != null ? _H : depthTest,
+            renderOrder: (_I = dbg == null ? void 0 : dbg.renderOrder) != null ? _I : renderOrder,
+            curveTexturePath
+          }
+        );
+      },
+      // Only recreate when structural props change (features, maxParticles, etc.)
+      // eslint-disable-next-line react-hooks/exhaustive-deps
       [
+        renderer,
+        activeMaxParticles,
+        activeLighting,
+        activeAppearance,
+        activeOrientToDirection,
+        activeGeometry,
+        activeShadow,
         activeNeedsPerParticleColor,
         activeNeedsRotation,
         activeTurbulence,
         activeAttractors,
-        activeCollision
+        activeCollision,
+        activeFadeSizeCurve,
+        activeFadeOpacityCurve,
+        activeVelocityCurve,
+        activeRotationSpeedCurve,
+        alphaMap,
+        flipbook,
+        blending,
+        backdropNode,
+        opacityNode,
+        colorNode,
+        alphaTestNode,
+        castShadowNode,
+        softParticles,
+        curveTexturePath
       ]
     );
-    const frictionIntensityRange = useMemo2(() => {
-      if (typeof friction === "object" && friction !== null && "intensity" in friction) {
-        return toRange(friction.intensity, [0, 0]);
-      }
-      return [0, 0];
-    }, [friction]);
-    const frictionEasingType = useMemo2(() => {
+    useEffect(() => {
+      system.init();
+    }, [system]);
+    useEffect(() => {
       var _a2;
-      if (typeof friction === "object" && friction !== null && "easing" in friction) {
-        return easingToType((_a2 = friction.easing) != null ? _a2 : "linear");
-      }
-      return 0;
-    }, [friction]);
-    const startColors = useMemo2(() => {
-      const colors = colorStart.slice(0, 8).map(hexToRgb);
-      while (colors.length < 8)
-        colors.push(colors[colors.length - 1] || [1, 1, 1]);
-      return colors;
-    }, [colorStart]);
-    const effectiveColorEnd = colorEnd != null ? colorEnd : colorStart;
-    const endColors = useMemo2(() => {
-      const colors = effectiveColorEnd.slice(0, 8).map(hexToRgb);
-      while (colors.length < 8)
-        colors.push(colors[colors.length - 1] || [1, 1, 1]);
-      return colors;
-    }, [effectiveColorEnd]);
-    const uniforms = useMemo2(
-      () => {
-        var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
-        return {
-          sizeMin: uniform(sizeRange[0]),
-          sizeMax: uniform(sizeRange[1]),
-          fadeSizeStart: uniform(fadeSizeRange[0]),
-          fadeSizeEnd: uniform(fadeSizeRange[1]),
-          fadeOpacityStart: uniform(fadeOpacityRange[0]),
-          fadeOpacityEnd: uniform(fadeOpacityRange[1]),
-          gravity: uniform(new THREE.Vector3(...gravity)),
-          frictionIntensityStart: uniform(frictionIntensityRange[0]),
-          frictionIntensityEnd: uniform(frictionIntensityRange[1]),
-          frictionEasingType: uniform(frictionEasingType),
-          speedMin: uniform(speedRange[0]),
-          speedMax: uniform(speedRange[1]),
-          lifetimeMin: uniform(lifetimeToFadeRate(lifetimeRange[1])),
-          lifetimeMax: uniform(lifetimeToFadeRate(lifetimeRange[0])),
-          deltaTime: uniform(0.016),
-          // Will be updated each frame
-          // 3D direction ranges
-          dirMinX: uniform(direction3D[0][0]),
-          dirMaxX: uniform(direction3D[0][1]),
-          dirMinY: uniform(direction3D[1][0]),
-          dirMaxY: uniform(direction3D[1][1]),
-          dirMinZ: uniform(direction3D[2][0]),
-          dirMaxZ: uniform(direction3D[2][1]),
-          // 3D start position offset ranges
-          startPosMinX: uniform(startPosition3D[0][0]),
-          startPosMaxX: uniform(startPosition3D[0][1]),
-          startPosMinY: uniform(startPosition3D[1][0]),
-          startPosMaxY: uniform(startPosition3D[1][1]),
-          startPosMinZ: uniform(startPosition3D[2][0]),
-          startPosMaxZ: uniform(startPosition3D[2][1]),
-          spawnPosition: uniform(new THREE.Vector3(...position)),
-          spawnIndexStart: uniform(0),
-          spawnIndexEnd: uniform(0),
-          spawnSeed: uniform(0),
-          intensity: uniform(intensity),
-          // 3D rotation ranges
-          rotationMinX: uniform(rotation3D[0][0]),
-          rotationMaxX: uniform(rotation3D[0][1]),
-          rotationMinY: uniform(rotation3D[1][0]),
-          rotationMaxY: uniform(rotation3D[1][1]),
-          rotationMinZ: uniform(rotation3D[2][0]),
-          rotationMaxZ: uniform(rotation3D[2][1]),
-          // 3D rotation speed ranges (radians/second)
-          rotationSpeedMinX: uniform(rotationSpeed3D[0][0]),
-          rotationSpeedMaxX: uniform(rotationSpeed3D[0][1]),
-          rotationSpeedMinY: uniform(rotationSpeed3D[1][0]),
-          rotationSpeedMaxY: uniform(rotationSpeed3D[1][1]),
-          rotationSpeedMinZ: uniform(rotationSpeed3D[2][0]),
-          rotationSpeedMaxZ: uniform(rotationSpeed3D[2][1]),
-          // Color arrays (8 colors max each)
-          colorStartCount: uniform(colorStart.length),
-          colorEndCount: uniform(effectiveColorEnd.length),
-          colorStart0: uniform(new THREE.Color(...startColors[0])),
-          colorStart1: uniform(new THREE.Color(...startColors[1])),
-          colorStart2: uniform(new THREE.Color(...startColors[2])),
-          colorStart3: uniform(new THREE.Color(...startColors[3])),
-          colorStart4: uniform(new THREE.Color(...startColors[4])),
-          colorStart5: uniform(new THREE.Color(...startColors[5])),
-          colorStart6: uniform(new THREE.Color(...startColors[6])),
-          colorStart7: uniform(new THREE.Color(...startColors[7])),
-          colorEnd0: uniform(new THREE.Color(...endColors[0])),
-          colorEnd1: uniform(new THREE.Color(...endColors[1])),
-          colorEnd2: uniform(new THREE.Color(...endColors[2])),
-          colorEnd3: uniform(new THREE.Color(...endColors[3])),
-          colorEnd4: uniform(new THREE.Color(...endColors[4])),
-          colorEnd5: uniform(new THREE.Color(...endColors[5])),
-          colorEnd6: uniform(new THREE.Color(...endColors[6])),
-          colorEnd7: uniform(new THREE.Color(...endColors[7])),
-          // Emitter shape uniforms
-          emitterShapeType: uniform(emitterShape),
-          emitterRadiusInner: uniform(emitterRadiusRange[0]),
-          emitterRadiusOuter: uniform(emitterRadiusRange[1]),
-          emitterAngle: uniform(emitterAngle),
-          emitterHeightMin: uniform(emitterHeightRange[0]),
-          emitterHeightMax: uniform(emitterHeightRange[1]),
-          emitterSurfaceOnly: uniform(emitterSurfaceOnly ? 1 : 0),
-          emitterDir: uniform(new THREE.Vector3(...emitterDirection).normalize()),
-          // Turbulence uniforms
-          turbulenceIntensity: uniform((_a2 = turbulence == null ? void 0 : turbulence.intensity) != null ? _a2 : 0),
-          turbulenceFrequency: uniform((_b = turbulence == null ? void 0 : turbulence.frequency) != null ? _b : 1),
-          turbulenceSpeed: uniform((_c = turbulence == null ? void 0 : turbulence.speed) != null ? _c : 1),
-          turbulenceTime: uniform(0),
-          // Updated each frame
-          // Attractor uniforms (up to 4)
-          attractorCount: uniform(0),
-          attractor0Pos: uniform(new THREE.Vector3(0, 0, 0)),
-          attractor0Strength: uniform(0),
-          attractor0Radius: uniform(1),
-          attractor0Type: uniform(0),
-          attractor0Axis: uniform(new THREE.Vector3(0, 1, 0)),
-          attractor1Pos: uniform(new THREE.Vector3(0, 0, 0)),
-          attractor1Strength: uniform(0),
-          attractor1Radius: uniform(1),
-          attractor1Type: uniform(0),
-          attractor1Axis: uniform(new THREE.Vector3(0, 1, 0)),
-          attractor2Pos: uniform(new THREE.Vector3(0, 0, 0)),
-          attractor2Strength: uniform(0),
-          attractor2Radius: uniform(1),
-          attractor2Type: uniform(0),
-          attractor2Axis: uniform(new THREE.Vector3(0, 1, 0)),
-          attractor3Pos: uniform(new THREE.Vector3(0, 0, 0)),
-          attractor3Strength: uniform(0),
-          attractor3Radius: uniform(1),
-          attractor3Type: uniform(0),
-          attractor3Axis: uniform(new THREE.Vector3(0, 1, 0)),
-          // Simple attract to center
-          attractToCenter: uniform(attractToCenter ? 1 : 0),
-          // Use start position as direction
-          startPositionAsDirection: uniform(startPositionAsDirection ? 1 : 0),
-          // Soft particles
-          softParticlesEnabled: uniform(softParticles ? 1 : 0),
-          softDistance: uniform(softDistance),
-          // Curve enabled flags (set by useCurveTextureAsync per-channel info)
-          velocityCurveEnabled: uniform(0),
-          rotationSpeedCurveEnabled: uniform(0),
-          fadeSizeCurveEnabled: uniform(0),
-          fadeOpacityCurveEnabled: uniform(0),
-          // Orient axis: 0=+X, 1=+Y, 2=+Z, 3=-X, 4=-Y, 5=-Z
-          orientAxisType: uniform(axisToNumber(orientAxis)),
-          // Stretch by speed (uses effective velocity after curve modifier)
-          stretchEnabled: uniform(stretchBySpeed ? 1 : 0),
-          stretchFactor: uniform((_d = stretchBySpeed == null ? void 0 : stretchBySpeed.factor) != null ? _d : 1),
-          stretchMax: uniform((_e = stretchBySpeed == null ? void 0 : stretchBySpeed.maxStretch) != null ? _e : 5),
-          // Collision uniforms
-          collisionEnabled: uniform(collision ? 1 : 0),
-          collisionPlaneY: uniform((_g = (_f = collision == null ? void 0 : collision.plane) == null ? void 0 : _f.y) != null ? _g : 0),
-          collisionBounce: uniform((_h = collision == null ? void 0 : collision.bounce) != null ? _h : 0.3),
-          collisionFriction: uniform((_i = collision == null ? void 0 : collision.friction) != null ? _i : 0.8),
-          collisionDie: uniform((collision == null ? void 0 : collision.die) ? 1 : 0),
-          // Size-based gravity (inside collision object)
-          sizeBasedGravity: uniform((_j = collision == null ? void 0 : collision.sizeBasedGravity) != null ? _j : 0)
-        };
-      },
-      []
-    );
-    const positionRef = useRef2(position);
-    useEffect2(() => {
-      var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
       if (debug) return;
-      positionRef.current = position;
-      uniforms.sizeMin.value = sizeRange[0];
-      uniforms.sizeMax.value = sizeRange[1];
-      uniforms.fadeSizeStart.value = fadeSizeRange[0];
-      uniforms.fadeSizeEnd.value = fadeSizeRange[1];
-      uniforms.fadeOpacityStart.value = fadeOpacityRange[0];
-      uniforms.fadeOpacityEnd.value = fadeOpacityRange[1];
-      uniforms.gravity.value.set(...gravity);
-      uniforms.frictionIntensityStart.value = frictionIntensityRange[0];
-      uniforms.frictionIntensityEnd.value = frictionIntensityRange[1];
-      uniforms.frictionEasingType.value = frictionEasingType;
-      uniforms.speedMin.value = speedRange[0];
-      uniforms.speedMax.value = speedRange[1];
-      uniforms.lifetimeMin.value = lifetimeToFadeRate(lifetimeRange[1]);
-      uniforms.lifetimeMax.value = lifetimeToFadeRate(lifetimeRange[0]);
-      uniforms.dirMinX.value = direction3D[0][0];
-      uniforms.dirMaxX.value = direction3D[0][1];
-      uniforms.dirMinY.value = direction3D[1][0];
-      uniforms.dirMaxY.value = direction3D[1][1];
-      uniforms.dirMinZ.value = direction3D[2][0];
-      uniforms.dirMaxZ.value = direction3D[2][1];
-      uniforms.startPosMinX.value = startPosition3D[0][0];
-      uniforms.startPosMaxX.value = startPosition3D[0][1];
-      uniforms.startPosMinY.value = startPosition3D[1][0];
-      uniforms.startPosMaxY.value = startPosition3D[1][1];
-      uniforms.startPosMinZ.value = startPosition3D[2][0];
-      uniforms.startPosMaxZ.value = startPosition3D[2][1];
-      uniforms.rotationMinX.value = rotation3D[0][0];
-      uniforms.rotationMaxX.value = rotation3D[0][1];
-      uniforms.rotationMinY.value = rotation3D[1][0];
-      uniforms.rotationMaxY.value = rotation3D[1][1];
-      uniforms.rotationMinZ.value = rotation3D[2][0];
-      uniforms.rotationMaxZ.value = rotation3D[2][1];
-      uniforms.rotationSpeedMinX.value = rotationSpeed3D[0][0];
-      uniforms.rotationSpeedMaxX.value = rotationSpeed3D[0][1];
-      uniforms.rotationSpeedMinY.value = rotationSpeed3D[1][0];
-      uniforms.rotationSpeedMaxY.value = rotationSpeed3D[1][1];
-      uniforms.rotationSpeedMinZ.value = rotationSpeed3D[2][0];
-      uniforms.rotationSpeedMaxZ.value = rotationSpeed3D[2][1];
-      uniforms.intensity.value = intensity;
-      uniforms.colorStartCount.value = colorStart.length;
-      uniforms.colorEndCount.value = effectiveColorEnd.length;
-      startColors.forEach((c, i) => {
-        var _a3;
-        ;
-        (_a3 = uniforms[`colorStart${i}`]) == null ? void 0 : _a3.value.setRGB(...c);
-      });
-      endColors.forEach((c, i) => {
-        var _a3;
-        ;
-        (_a3 = uniforms[`colorEnd${i}`]) == null ? void 0 : _a3.value.setRGB(...c);
+      system.setPosition(position);
+      system.setDelay(delay);
+      system.setEmitCount(emitCount);
+      system.setTurbulenceSpeed((_a2 = turbulence == null ? void 0 : turbulence.speed) != null ? _a2 : 1);
+      const normalized = normalizeProps({
+        size,
+        speed,
+        fadeSize,
+        fadeOpacity,
+        lifetime,
+        gravity,
+        direction,
+        startPosition,
+        rotation,
+        rotationSpeed,
+        friction,
+        intensity,
+        colorStart,
+        colorEnd,
+        emitterShape,
+        emitterRadius,
+        emitterAngle,
+        emitterHeight,
+        emitterSurfaceOnly,
+        emitterDirection,
+        turbulence,
+        attractors,
+        attractToCenter,
+        startPositionAsDirection,
+        softParticles,
+        softDistance,
+        collision,
+        orientAxis,
+        stretchBySpeed
       });
-      uniforms.emitterShapeType.value = emitterShape;
-      uniforms.emitterRadiusInner.value = emitterRadiusRange[0];
-      uniforms.emitterRadiusOuter.value = emitterRadiusRange[1];
-      uniforms.emitterAngle.value = emitterAngle;
-      uniforms.emitterHeightMin.value = emitterHeightRange[0];
-      uniforms.emitterHeightMax.value = emitterHeightRange[1];
-      uniforms.emitterSurfaceOnly.value = emitterSurfaceOnly ? 1 : 0;
-      uniforms.emitterDir.value.set(...emitterDirection).normalize();
-      uniforms.turbulenceIntensity.value = (_a2 = turbulence == null ? void 0 : turbulence.intensity) != null ? _a2 : 0;
-      uniforms.turbulenceFrequency.value = (_b = turbulence == null ? void 0 : turbulence.frequency) != null ? _b : 1;
-      uniforms.turbulenceSpeed.value = (_c = turbulence == null ? void 0 : turbulence.speed) != null ? _c : 1;
-      const attractorList = attractors != null ? attractors : [];
-      uniforms.attractorCount.value = Math.min(
-        attractorList.length,
-        MAX_ATTRACTORS
-      );
-      for (let i = 0; i < MAX_ATTRACTORS; i++) {
-        const a = attractorList[i];
-        const u = uniforms;
-        if (a) {
-          ;
-          u[`attractor${i}Pos`].value.set(
-            ...(_d = a.position) != null ? _d : [0, 0, 0]
-          );
-          u[`attractor${i}Strength`].value = (_e = a.strength) != null ? _e : 1;
-          u[`attractor${i}Radius`].value = (_f = a.radius) != null ? _f : 0;
-          u[`attractor${i}Type`].value = a.type === "vortex" ? 1 : 0;
-          u[`attractor${i}Axis`].value.set(...(_g = a.axis) != null ? _g : [0, 1, 0]).normalize();
-        } else {
-          u[`attractor${i}Strength`].value = 0;
-        }
-      }
-      uniforms.attractToCenter.value = attractToCenter ? 1 : 0;
-      uniforms.startPositionAsDirection.value = startPositionAsDirection ? 1 : 0;
-      uniforms.softParticlesEnabled.value = softParticles ? 1 : 0;
-      uniforms.softDistance.value = softDistance;
-      uniforms.velocityCurveEnabled.value = curveTextureVelocityEnabled ? 1 : 0;
-      uniforms.rotationSpeedCurveEnabled.value = curveTextureRotationSpeedEnabled ? 1 : 0;
-      uniforms.fadeSizeCurveEnabled.value = curveTextureSizeEnabled ? 1 : 0;
-      uniforms.fadeOpacityCurveEnabled.value = curveTextureOpacityEnabled ? 1 : 0;
-      uniforms.orientAxisType.value = axisToNumber(orientAxis);
-      uniforms.stretchEnabled.value = stretchBySpeed ? 1 : 0;
-      uniforms.stretchFactor.value = (_h = stretchBySpeed == null ? void 0 : stretchBySpeed.factor) != null ? _h : 1;
-      uniforms.stretchMax.value = (_i = stretchBySpeed == null ? void 0 : stretchBySpeed.maxStretch) != null ? _i : 5;
-      uniforms.collisionEnabled.value = collision ? 1 : 0;
-      uniforms.collisionPlaneY.value = (_k = (_j = collision == null ? void 0 : collision.plane) == null ? void 0 : _j.y) != null ? _k : 0;
-      uniforms.collisionBounce.value = (_l = collision == null ? void 0 : collision.bounce) != null ? _l : 0.3;
-      uniforms.collisionFriction.value = (_m = collision == null ? void 0 : collision.friction) != null ? _m : 0.8;
-      uniforms.collisionDie.value = (collision == null ? void 0 : collision.die) ? 1 : 0;
-      uniforms.sizeBasedGravity.value = (_n = collision == null ? void 0 : collision.sizeBasedGravity) != null ? _n : 0;
+      updateUniforms(system.uniforms, normalized);
     }, [
       debug,
+      system,
       position,
-      sizeRange,
-      fadeSizeRange,
-      fadeOpacityRange,
+      size,
+      fadeSize,
+      fadeOpacity,
       gravity,
-      frictionIntensityRange,
-      frictionEasingType,
-      speedRange,
-      lifetimeRange,
-      direction3D,
-      rotation3D,
-      rotationSpeed3D,
+      friction,
+      speed,
+      lifetime,
+      direction,
+      rotation,
+      rotationSpeed,
       intensity,
       colorStart,
-      effectiveColorEnd,
-      startColors,
-      endColors,
-      uniforms,
+      colorEnd,
       collision,
       emitterShape,
-      emitterRadiusRange,
+      emitterRadius,
       emitterAngle,
-      emitterHeightRange,
+      emitterHeight,
       emitterSurfaceOnly,
       emitterDirection,
       turbulence,
-      startPosition3D,
+      startPosition,
       attractors,
       attractToCenter,
       startPositionAsDirection,
       softParticles,
       softDistance,
-      curveTextureVelocityEnabled,
-      curveTextureRotationSpeedEnabled,
-      curveTextureSizeEnabled,
-      curveTextureOpacityEnabled,
       orientAxis,
-      stretchBySpeed
-    ]);
-    const storage = useMemo2(() => {
-      const arrays = {
-        positions: instancedArray(activeMaxParticles, "vec3"),
-        velocities: instancedArray(activeMaxParticles, "vec3"),
-        lifetimes: instancedArray(activeMaxParticles, "float"),
-        fadeRates: instancedArray(activeMaxParticles, "float"),
-        particleSizes: instancedArray(activeMaxParticles, "float"),
-        // Optional arrays - null when feature unused (saves GPU memory)
-        particleRotations: null,
-        particleColorStarts: null,
-        particleColorEnds: null
-      };
-      if (activeFeatures.needsRotation) {
-        arrays.particleRotations = instancedArray(activeMaxParticles, "vec3");
-      }
-      if (activeFeatures.needsPerParticleColor) {
-        arrays.particleColorStarts = instancedArray(activeMaxParticles, "vec3");
-        arrays.particleColorEnds = instancedArray(activeMaxParticles, "vec3");
-      }
-      return arrays;
-    }, [
-      activeMaxParticles,
-      activeFeatures.needsRotation,
-      activeFeatures.needsPerParticleColor
+      stretchBySpeed,
+      delay,
+      emitCount
     ]);
-    const computeInit = useMemo2(
-      () => createInitCompute(storage, activeMaxParticles),
-      [storage, activeMaxParticles]
-    );
-    const computeSpawn = useMemo2(
-      () => createSpawnCompute(storage, uniforms, activeMaxParticles),
-      [storage, uniforms, activeMaxParticles]
-    );
-    const computeUpdate = useMemo2(
-      () => createUpdateCompute(
-        storage,
-        uniforms,
-        curveTexture,
-        activeMaxParticles,
-        {
-          turbulence: activeFeatures.turbulence,
-          attractors: activeFeatures.attractors,
-          collision: activeFeatures.collision,
-          rotation: activeFeatures.rotation,
-          perParticleColor: activeFeatures.perParticleColor
-        }
-      ),
-      [storage, uniforms, curveTexture, activeMaxParticles, activeFeatures]
-    );
-    const material = useMemo2(
-      () => createParticleMaterial(storage, uniforms, curveTexture, {
-        alphaMap,
-        flipbook,
-        appearance: activeAppearance,
-        lighting: activeLighting,
-        softParticles,
-        geometry: activeGeometry,
-        orientToDirection: activeOrientToDirection,
-        shadow: activeShadow,
-        blending,
-        opacityNode,
-        colorNode,
-        backdropNode,
-        alphaTestNode,
-        castShadowNode
-      }),
-      [
-        storage,
-        uniforms,
-        curveTexture,
-        activeAppearance,
-        alphaMap,
-        flipbook,
-        blending,
-        activeGeometry,
-        activeOrientToDirection,
-        activeLighting,
-        backdropNode,
-        opacityNode,
-        colorNode,
-        alphaTestNode,
-        castShadowNode,
-        softParticles,
-        activeShadow
-      ]
-    );
-    const renderObject = useMemo2(() => {
-      if (activeGeometry) {
-        const mesh = new THREE.InstancedMesh(
-          activeGeometry,
-          material,
-          activeMaxParticles
-        );
-        mesh.frustumCulled = false;
-        mesh.castShadow = activeShadow;
-        mesh.receiveShadow = activeShadow;
-        return mesh;
-      } else {
-        const s = new THREE.Sprite(material);
-        s.count = activeMaxParticles;
-        s.frustumCulled = false;
-        return s;
-      }
-    }, [material, activeMaxParticles, activeGeometry, activeShadow]);
-    useEffect2(() => {
-      if (!renderer || initialized.current) return;
-      renderer.computeAsync(computeInit).then(() => {
-        initialized.current = true;
-      });
-    }, [renderer, computeInit]);
-    const applySpawnOverrides = useCallback(
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (overrides) => {
-        if (!overrides) return null;
-        const saved = {};
-        const setUniform = (key, value) => {
-          if (uniforms[key]) {
-            saved[key] = uniforms[key].value;
-            uniforms[key].value = value;
-          }
-        };
-        if (overrides.size !== void 0) {
-          const range = toRange(overrides.size, [0.1, 0.3]);
-          setUniform("sizeMin", range[0]);
-          setUniform("sizeMax", range[1]);
-        }
-        if (overrides.speed !== void 0) {
-          const range = toRange(overrides.speed, [0.1, 0.1]);
-          setUniform("speedMin", range[0]);
-          setUniform("speedMax", range[1]);
-        }
-        if (overrides.lifetime !== void 0) {
-          const range = toRange(overrides.lifetime, [1, 2]);
-          setUniform("lifetimeMin", 1 / range[1]);
-          setUniform("lifetimeMax", 1 / range[0]);
-        }
-        if (overrides.direction !== void 0) {
-          const dir3D = toRotation3D(overrides.direction);
-          setUniform("dirMinX", dir3D[0][0]);
-          setUniform("dirMaxX", dir3D[0][1]);
-          setUniform("dirMinY", dir3D[1][0]);
-          setUniform("dirMaxY", dir3D[1][1]);
-          setUniform("dirMinZ", dir3D[2][0]);
-          setUniform("dirMaxZ", dir3D[2][1]);
-        }
-        if (overrides.startPosition !== void 0) {
-          const pos3D = toRotation3D(overrides.startPosition);
-          setUniform("startPosMinX", pos3D[0][0]);
-          setUniform("startPosMaxX", pos3D[0][1]);
-          setUniform("startPosMinY", pos3D[1][0]);
-          setUniform("startPosMaxY", pos3D[1][1]);
-          setUniform("startPosMinZ", pos3D[2][0]);
-          setUniform("startPosMaxZ", pos3D[2][1]);
-        }
-        if (overrides.gravity !== void 0) {
-          saved.gravity = uniforms.gravity.value.clone();
-          uniforms.gravity.value.set(
-            ...overrides.gravity
-          );
-        }
-        const u = uniforms;
-        if (overrides.colorStart !== void 0) {
-          const colors = overrides.colorStart.slice(0, 8).map(hexToRgb);
-          while (colors.length < 8)
-            colors.push(colors[colors.length - 1] || [1, 1, 1]);
-          setUniform("colorStartCount", overrides.colorStart.length);
-          colors.forEach((c, i) => {
-            if (u[`colorStart${i}`]) {
-              saved[`colorStart${i}`] = u[`colorStart${i}`].value.clone();
-              u[`colorStart${i}`].value.setRGB(...c);
-            }
-          });
-        }
-        if (overrides.colorEnd !== void 0) {
-          const colors = overrides.colorEnd.slice(0, 8).map(hexToRgb);
-          while (colors.length < 8)
-            colors.push(colors[colors.length - 1] || [1, 1, 1]);
-          setUniform("colorEndCount", overrides.colorEnd.length);
-          colors.forEach((c, i) => {
-            if (u[`colorEnd${i}`]) {
-              saved[`colorEnd${i}`] = u[`colorEnd${i}`].value.clone();
-              u[`colorEnd${i}`].value.setRGB(...c);
-            }
-          });
-        }
-        if (overrides.rotation !== void 0) {
-          const rot3D = toRotation3D(overrides.rotation);
-          setUniform("rotationMinX", rot3D[0][0]);
-          setUniform("rotationMaxX", rot3D[0][1]);
-          setUniform("rotationMinY", rot3D[1][0]);
-          setUniform("rotationMaxY", rot3D[1][1]);
-          setUniform("rotationMinZ", rot3D[2][0]);
-          setUniform("rotationMaxZ", rot3D[2][1]);
-        }
-        if (overrides.emitterShape !== void 0) {
-          setUniform("emitterShapeType", overrides.emitterShape);
-        }
-        if (overrides.emitterRadius !== void 0) {
-          const range = toRange(overrides.emitterRadius, [0, 1]);
-          setUniform("emitterRadiusInner", range[0]);
-          setUniform("emitterRadiusOuter", range[1]);
-        }
-        if (overrides.emitterAngle !== void 0) {
-          setUniform("emitterAngle", overrides.emitterAngle);
-        }
-        if (overrides.emitterHeight !== void 0) {
-          const range = toRange(overrides.emitterHeight, [0, 1]);
-          setUniform("emitterHeightMin", range[0]);
-          setUniform("emitterHeightMax", range[1]);
-        }
-        if (overrides.emitterSurfaceOnly !== void 0) {
-          setUniform("emitterSurfaceOnly", overrides.emitterSurfaceOnly ? 1 : 0);
-        }
-        if (overrides.emitterDirection !== void 0) {
-          saved.emitterDir = uniforms.emitterDir.value.clone();
-          uniforms.emitterDir.value.set(...overrides.emitterDirection).normalize();
-        }
-        return () => {
-          Object.entries(saved).forEach(([key, value]) => {
-            if (uniforms[key]) {
-              uniforms[key].value = value;
-            }
-          });
-        };
-      },
-      [uniforms]
-    );
-    const spawnInternal = useCallback(
-      (x, y, z, count = 20, overrides = null) => {
-        if (!initialized.current || !renderer) return;
-        const restore = applySpawnOverrides(overrides);
-        const startIdx = nextIndex.current;
-        const endIdx = (startIdx + count) % activeMaxParticles;
-        uniforms.spawnPosition.value.set(x, y, z);
-        uniforms.spawnIndexStart.value = startIdx;
-        uniforms.spawnIndexEnd.value = endIdx;
-        uniforms.spawnSeed.value = Math.random() * 1e4;
-        nextIndex.current = endIdx;
-        renderer.computeAsync(computeSpawn);
-        if (restore) restore();
-      },
-      [
-        renderer,
-        computeSpawn,
-        uniforms,
-        activeMaxParticles,
-        applySpawnOverrides
-      ]
-    );
     const spawn = useCallback(
       (x = 0, y = 0, z = 0, count = 20, overrides = null) => {
-        var _a2;
-        const [px, py, pz] = (_a2 = positionRef.current) != null ? _a2 : [0, 0, 0];
-        spawnInternal(px + x, py + y, pz + z, count, overrides);
+        const [px, py, pz] = system.position;
+        system.spawn(px + x, py + y, pz + z, count, overrides);
       },
-      [spawnInternal]
+      [system]
     );
-    const computeUpdateRef = useRef2(computeUpdate);
-    useEffect2(() => {
-      computeUpdateRef.current = computeUpdate;
-    }, [computeUpdate]);
-    useFrame(async (state, delta) => {
-      var _a2, _b;
-      if (!initialized.current || !renderer) return;
-      uniforms.deltaTime.value = delta;
-      const turbSpeed = (_b = (_a2 = turbulenceRef.current) == null ? void 0 : _a2.speed) != null ? _b : 1;
-      uniforms.turbulenceTime.value += delta * turbSpeed;
-      await renderer.computeAsync(computeUpdateRef.current);
+    useFrame(async (_state, delta) => {
+      if (!system.initialized) return;
+      await system.update(delta);
       if (emitting) {
-        const [px, py, pz] = positionRef.current;
-        const currentDelay = delayRef.current;
-        const currentEmitCount = emitCountRef.current;
-        if (!currentDelay) {
-          spawnInternal(px, py, pz, currentEmitCount);
-        } else {
-          emitAccumulator.current += delta;
-          if (emitAccumulator.current >= currentDelay) {
-            emitAccumulator.current -= currentDelay;
-            spawnInternal(px, py, pz, currentEmitCount);
-          }
-        }
+        system.autoEmit(delta);
       }
     });
     const start = useCallback(() => {
+      system.start();
       setEmitting(true);
-      emitAccumulator.current = 0;
-    }, []);
+    }, [system]);
     const stop = useCallback(() => {
+      system.stop();
       setEmitting(false);
-    }, []);
-    const prevMaterialRef = useRef2(null);
-    const prevRenderObjectRef = useRef2(null);
-    useEffect2(() => {
-      if (prevMaterialRef.current && prevMaterialRef.current !== material) {
+    }, [system]);
+    const prevMaterialRef = useRef(null);
+    const prevRenderObjectRef = useRef(null);
+    useEffect(() => {
+      if (prevMaterialRef.current && prevMaterialRef.current !== system.material) {
         prevMaterialRef.current.dispose();
       }
-      prevMaterialRef.current = material;
-      if (prevRenderObjectRef.current && prevRenderObjectRef.current !== renderObject) {
+      prevMaterialRef.current = system.material;
+      if (prevRenderObjectRef.current && prevRenderObjectRef.current !== system.renderObject) {
         if (prevRenderObjectRef.current.material) {
           prevRenderObjectRef.current.material.dispose();
         }
       }
-      prevRenderObjectRef.current = renderObject;
-    }, [material, renderObject]);
-    useEffect2(() => {
+      prevRenderObjectRef.current = system.renderObject;
+    }, [system.material, system.renderObject]);
+    useEffect(() => {
       return () => {
-        if (material) {
-          material.dispose();
-        }
-        if (renderObject) {
-          if (renderObject.geometry && !geometry) {
-            renderObject.geometry.dispose();
-          }
-          if (renderObject.material) {
-            renderObject.material.dispose();
-          }
-        }
-        initialized.current = false;
-        nextIndex.current = 0;
+        system.dispose();
       };
     }, []);
-    const particleAPI = useMemo2(
+    const particleAPI = useMemo(
       () => ({
         spawn,
         start,
@@ -1103,266 +443,93 @@ var VFXParticles = forwardRef(
           return emitting;
         },
         clear() {
-          renderer.computeAsync(computeInit);
-          nextIndex.current = 0;
+          system.clear();
         },
-        uniforms
+        uniforms: system.uniforms
       }),
-      [spawn, start, stop, emitting, renderer, computeInit, uniforms]
+      [spawn, start, stop, emitting, system]
     );
     useImperativeHandle(ref, () => particleAPI, [particleAPI]);
     const registerParticles = useVFXStore((s) => s.registerParticles);
     const unregisterParticles = useVFXStore((s) => s.unregisterParticles);
-    useEffect2(() => {
+    useEffect(() => {
       if (!name) return;
       registerParticles(name, particleAPI);
       return () => {
         unregisterParticles(name);
       };
     }, [name, particleAPI, registerParticles, unregisterParticles]);
-    const debugValuesRef = useRef2(null);
-    const prevGeometryTypeRef = useRef2(null);
-    const prevGeometryArgsRef = useRef2(null);
+    const prevGeometryTypeRef = useRef(null);
+    const prevGeometryArgsRef = useRef(null);
     const handleDebugUpdate = useCallback(
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       (newValues) => {
-        var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R;
+        var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
         debugValuesRef.current = __spreadValues(__spreadValues({}, debugValuesRef.current), newValues);
-        if ("size" in newValues) {
-          const sizeR = toRange(newValues.size, [0.1, 0.3]);
-          uniforms.sizeMin.value = sizeR[0];
-          uniforms.sizeMax.value = sizeR[1];
-        }
-        if ("fadeSize" in newValues) {
-          const fadeSizeR = toRange(newValues.fadeSize, [1, 0]);
-          uniforms.fadeSizeStart.value = fadeSizeR[0];
-          uniforms.fadeSizeEnd.value = fadeSizeR[1];
+        if ("colorStart" in newValues && newValues.colorStart) {
+          const currentColorEnd = (_a2 = debugValuesRef.current) == null ? void 0 : _a2.colorEnd;
+          if (!currentColorEnd) {
+            newValues = __spreadProps(__spreadValues({}, newValues), {
+              colorEnd: null
+            });
+          }
         }
-        if ("fadeOpacity" in newValues) {
-          const fadeOpacityR = toRange(newValues.fadeOpacity, [1, 0]);
-          uniforms.fadeOpacityStart.value = fadeOpacityR[0];
-          uniforms.fadeOpacityEnd.value = fadeOpacityR[1];
+        if ("colorEnd" in newValues && !newValues.colorEnd) {
+          newValues = __spreadProps(__spreadValues({}, newValues), {
+            colorEnd: null,
+            // Ensure updateUniformsPartial gets the right fallback
+            colorStart: (_d = (_c = newValues.colorStart) != null ? _c : (_b = debugValuesRef.current) == null ? void 0 : _b.colorStart) != null ? _d : ["#ffffff"]
+          });
         }
+        updateUniformsPartial(system.uniforms, newValues);
         if ("fadeSizeCurve" in newValues) {
           setActiveFadeSizeCurve(newValues.fadeSizeCurve);
-          uniforms.fadeSizeCurveEnabled.value = newValues.fadeSizeCurve ? 1 : 0;
         }
         if ("fadeOpacityCurve" in newValues) {
           setActiveFadeOpacityCurve(newValues.fadeOpacityCurve);
-          uniforms.fadeOpacityCurveEnabled.value = newValues.fadeOpacityCurve ? 1 : 0;
         }
         if ("velocityCurve" in newValues) {
           setActiveVelocityCurve(newValues.velocityCurve);
-          uniforms.velocityCurveEnabled.value = newValues.velocityCurve ? 1 : 0;
         }
         if ("rotationSpeedCurve" in newValues) {
           setActiveRotationSpeedCurve(newValues.rotationSpeedCurve);
-          uniforms.rotationSpeedCurveEnabled.value = newValues.rotationSpeedCurve ? 1 : 0;
-        }
-        if ("orientAxis" in newValues) {
-          uniforms.orientAxisType.value = axisToNumber(newValues.orientAxis);
-        }
-        if ("stretchBySpeed" in newValues) {
-          uniforms.stretchEnabled.value = newValues.stretchBySpeed ? 1 : 0;
-          uniforms.stretchFactor.value = (_b = (_a2 = newValues.stretchBySpeed) == null ? void 0 : _a2.factor) != null ? _b : 1;
-          uniforms.stretchMax.value = (_d = (_c = newValues.stretchBySpeed) == null ? void 0 : _c.maxStretch) != null ? _d : 5;
-        }
-        if (newValues.gravity && Array.isArray(newValues.gravity)) {
-          uniforms.gravity.value.x = newValues.gravity[0];
-          uniforms.gravity.value.y = newValues.gravity[1];
-          uniforms.gravity.value.z = newValues.gravity[2];
-        }
-        if ("speed" in newValues) {
-          const speedR = toRange(newValues.speed, [0.1, 0.1]);
-          uniforms.speedMin.value = speedR[0];
-          uniforms.speedMax.value = speedR[1];
-        }
-        if ("lifetime" in newValues) {
-          const lifetimeR = toRange(newValues.lifetime, [1, 2]);
-          uniforms.lifetimeMin.value = 1 / lifetimeR[1];
-          uniforms.lifetimeMax.value = 1 / lifetimeR[0];
-        }
-        if ("friction" in newValues && newValues.friction) {
-          const frictionR = toRange(newValues.friction.intensity, [0, 0]);
-          uniforms.frictionIntensityStart.value = frictionR[0];
-          uniforms.frictionIntensityEnd.value = frictionR[1];
-          uniforms.frictionEasingType.value = easingToType(
-            newValues.friction.easing
-          );
-        }
-        if ("direction" in newValues) {
-          const dir3D = toRotation3D(newValues.direction);
-          uniforms.dirMinX.value = dir3D[0][0];
-          uniforms.dirMaxX.value = dir3D[0][1];
-          uniforms.dirMinY.value = dir3D[1][0];
-          uniforms.dirMaxY.value = dir3D[1][1];
-          uniforms.dirMinZ.value = dir3D[2][0];
-          uniforms.dirMaxZ.value = dir3D[2][1];
-        }
-        if ("startPosition" in newValues) {
-          const startPos3D = toRotation3D(newValues.startPosition);
-          uniforms.startPosMinX.value = startPos3D[0][0];
-          uniforms.startPosMaxX.value = startPos3D[0][1];
-          uniforms.startPosMinY.value = startPos3D[1][0];
-          uniforms.startPosMaxY.value = startPos3D[1][1];
-          uniforms.startPosMinZ.value = startPos3D[2][0];
-          uniforms.startPosMaxZ.value = startPos3D[2][1];
-        }
-        if ("rotation" in newValues) {
-          const rot3D = toRotation3D(newValues.rotation);
-          uniforms.rotationMinX.value = rot3D[0][0];
-          uniforms.rotationMaxX.value = rot3D[0][1];
-          uniforms.rotationMinY.value = rot3D[1][0];
-          uniforms.rotationMaxY.value = rot3D[1][1];
-          uniforms.rotationMinZ.value = rot3D[2][0];
-          uniforms.rotationMaxZ.value = rot3D[2][1];
-        }
-        if ("rotationSpeed" in newValues) {
-          const rotSpeed3D = toRotation3D(newValues.rotationSpeed);
-          uniforms.rotationSpeedMinX.value = rotSpeed3D[0][0];
-          uniforms.rotationSpeedMaxX.value = rotSpeed3D[0][1];
-          uniforms.rotationSpeedMinY.value = rotSpeed3D[1][0];
-          uniforms.rotationSpeedMaxY.value = rotSpeed3D[1][1];
-          uniforms.rotationSpeedMinZ.value = rotSpeed3D[2][0];
-          uniforms.rotationSpeedMaxZ.value = rotSpeed3D[2][1];
-        }
-        if ("rotation" in newValues || "rotationSpeed" in newValues) {
-          const rot = (_g = (_f = newValues.rotation) != null ? _f : (_e = debugValuesRef.current) == null ? void 0 : _e.rotation) != null ? _g : [0, 0];
-          const rotSpeed = (_j = (_i = newValues.rotationSpeed) != null ? _i : (_h = debugValuesRef.current) == null ? void 0 : _h.rotationSpeed) != null ? _j : [0, 0];
-          const needsRotation = isNonDefaultRotation(rot) || isNonDefaultRotation(rotSpeed);
-          if (needsRotation !== activeNeedsRotation) {
-            setActiveNeedsRotation(needsRotation);
-          }
-        }
-        if ("intensity" in newValues) {
-          uniforms.intensity.value = newValues.intensity || 1;
-        }
-        if ("colorStart" in newValues && newValues.colorStart) {
-          const startColors2 = newValues.colorStart.slice(0, 8).map(hexToRgb);
-          while (startColors2.length < 8)
-            startColors2.push(startColors2[startColors2.length - 1] || [1, 1, 1]);
-          uniforms.colorStartCount.value = newValues.colorStart.length;
-          startColors2.forEach((c, i) => {
-            if (uniforms[`colorStart${i}`]) {
-              uniforms[`colorStart${i}`].value.setRGB(...c);
-            }
-          });
-          const currentColorEnd = (_k = debugValuesRef.current) == null ? void 0 : _k.colorEnd;
-          if (!currentColorEnd) {
-            uniforms.colorEndCount.value = newValues.colorStart.length;
-            startColors2.forEach((c, i) => {
-              if (uniforms[`colorEnd${i}`]) {
-                uniforms[`colorEnd${i}`].value.setRGB(...c);
-              }
-            });
-          }
-        }
-        if ("colorEnd" in newValues) {
-          const effectiveEndColors = newValues.colorEnd || newValues.colorStart || ((_l = debugValuesRef.current) == null ? void 0 : _l.colorStart) || ["#ffffff"];
-          if (effectiveEndColors) {
-            const endColors2 = effectiveEndColors.slice(0, 8).map(hexToRgb);
-            while (endColors2.length < 8)
-              endColors2.push(endColors2[endColors2.length - 1] || [1, 1, 1]);
-            uniforms.colorEndCount.value = effectiveEndColors.length;
-            endColors2.forEach((c, i) => {
-              if (uniforms[`colorEnd${i}`]) {
-                uniforms[`colorEnd${i}`].value.setRGB(...c);
-              }
-            });
-          }
-        }
-        if ("colorStart" in newValues || "colorEnd" in newValues) {
-          const startLen = (_q = (_p = (_m = newValues.colorStart) == null ? void 0 : _m.length) != null ? _p : (_o = (_n = debugValuesRef.current) == null ? void 0 : _n.colorStart) == null ? void 0 : _o.length) != null ? _q : 1;
-          const hasColorEnd = "colorEnd" in newValues ? newValues.colorEnd !== null : ((_r = debugValuesRef.current) == null ? void 0 : _r.colorEnd) !== null;
-          const needsPerParticle = startLen > 1 || hasColorEnd;
-          if (needsPerParticle !== activeNeedsPerParticleColor) {
-            setActiveNeedsPerParticleColor(needsPerParticle);
-          }
-        }
-        if ("emitterShape" in newValues) {
-          uniforms.emitterShapeType.value = (_s = newValues.emitterShape) != null ? _s : EmitterShape.BOX;
-        }
-        if ("emitterRadius" in newValues) {
-          const emitterRadiusR = toRange(newValues.emitterRadius, [0, 1]);
-          uniforms.emitterRadiusInner.value = emitterRadiusR[0];
-          uniforms.emitterRadiusOuter.value = emitterRadiusR[1];
-        }
-        if ("emitterAngle" in newValues) {
-          uniforms.emitterAngle.value = (_t = newValues.emitterAngle) != null ? _t : Math.PI / 4;
-        }
-        if ("emitterHeight" in newValues) {
-          const emitterHeightR = toRange(newValues.emitterHeight, [0, 1]);
-          uniforms.emitterHeightMin.value = emitterHeightR[0];
-          uniforms.emitterHeightMax.value = emitterHeightR[1];
-        }
-        if ("emitterSurfaceOnly" in newValues) {
-          uniforms.emitterSurfaceOnly.value = newValues.emitterSurfaceOnly ? 1 : 0;
-        }
-        if ("emitterDirection" in newValues && newValues.emitterDirection && Array.isArray(newValues.emitterDirection)) {
-          const dir = new THREE.Vector3(
-            ...newValues.emitterDirection
-          ).normalize();
-          uniforms.emitterDir.value.x = dir.x;
-          uniforms.emitterDir.value.y = dir.y;
-          uniforms.emitterDir.value.z = dir.z;
         }
         if ("turbulence" in newValues) {
-          uniforms.turbulenceIntensity.value = (_v = (_u = newValues.turbulence) == null ? void 0 : _u.intensity) != null ? _v : 0;
-          uniforms.turbulenceFrequency.value = (_x = (_w = newValues.turbulence) == null ? void 0 : _w.frequency) != null ? _x : 1;
-          uniforms.turbulenceSpeed.value = (_z = (_y = newValues.turbulence) == null ? void 0 : _y.speed) != null ? _z : 1;
-          turbulenceRef.current = newValues.turbulence;
-          const needsTurbulence = newValues.turbulence !== null && ((_B = (_A = newValues.turbulence) == null ? void 0 : _A.intensity) != null ? _B : 0) > 0;
-          if (needsTurbulence !== activeTurbulence) {
-            setActiveTurbulence(needsTurbulence);
-          }
+          system.setTurbulenceSpeed((_f = (_e = newValues.turbulence) == null ? void 0 : _e.speed) != null ? _f : 1);
         }
-        if ("attractToCenter" in newValues) {
-          uniforms.attractToCenter.value = newValues.attractToCenter ? 1 : 0;
+        const newFeatures = resolveFeatures(debugValuesRef.current);
+        if (newFeatures.needsRotation !== activeNeedsRotation) {
+          setActiveNeedsRotation(newFeatures.needsRotation);
         }
-        if ("startPositionAsDirection" in newValues) {
-          uniforms.startPositionAsDirection.value = newValues.startPositionAsDirection ? 1 : 0;
+        if (newFeatures.needsPerParticleColor !== activeNeedsPerParticleColor) {
+          setActiveNeedsPerParticleColor(newFeatures.needsPerParticleColor);
         }
-        if ("softParticles" in newValues) {
-          uniforms.softParticlesEnabled.value = newValues.softParticles ? 1 : 0;
+        if (newFeatures.turbulence !== activeTurbulence) {
+          setActiveTurbulence(newFeatures.turbulence);
         }
-        if ("softDistance" in newValues) {
-          uniforms.softDistance.value = (_C = newValues.softDistance) != null ? _C : 0.5;
+        if (newFeatures.attractors !== activeAttractors) {
+          setActiveAttractors(newFeatures.attractors);
         }
-        if ("collision" in newValues) {
-          uniforms.collisionEnabled.value = newValues.collision ? 1 : 0;
-          uniforms.collisionPlaneY.value = (_F = (_E = (_D = newValues.collision) == null ? void 0 : _D.plane) == null ? void 0 : _E.y) != null ? _F : 0;
-          uniforms.collisionBounce.value = (_H = (_G = newValues.collision) == null ? void 0 : _G.bounce) != null ? _H : 0.3;
-          uniforms.collisionFriction.value = (_J = (_I = newValues.collision) == null ? void 0 : _I.friction) != null ? _J : 0.8;
-          uniforms.collisionDie.value = ((_K = newValues.collision) == null ? void 0 : _K.die) ? 1 : 0;
-          uniforms.sizeBasedGravity.value = (_M = (_L = newValues.collision) == null ? void 0 : _L.sizeBasedGravity) != null ? _M : 0;
-          const needsCollision = newValues.collision !== null && newValues.collision !== void 0;
-          if (needsCollision !== activeCollision) {
-            setActiveCollision(needsCollision);
-          }
-        }
-        if ("attractors" in newValues) {
-          const needsAttractors = newValues.attractors !== null && ((_N = newValues.attractors) == null ? void 0 : _N.length) > 0;
-          if (needsAttractors !== activeAttractors) {
-            setActiveAttractors(needsAttractors);
-          }
+        if (newFeatures.collision !== activeCollision) {
+          setActiveCollision(newFeatures.collision);
         }
         if (newValues.position) {
-          positionRef.current = newValues.position;
+          system.setPosition(newValues.position);
         }
-        if ("delay" in newValues) delayRef.current = (_O = newValues.delay) != null ? _O : 0;
+        if ("delay" in newValues) system.setDelay((_g = newValues.delay) != null ? _g : 0);
         if ("emitCount" in newValues)
-          emitCountRef.current = (_P = newValues.emitCount) != null ? _P : 1;
+          system.setEmitCount((_h = newValues.emitCount) != null ? _h : 1);
         if (newValues.autoStart !== void 0) {
           setEmitting(newValues.autoStart);
         }
-        if (material && newValues.blending !== void 0) {
-          material.blending = newValues.blending;
-          material.needsUpdate = true;
+        if (system.material && newValues.blending !== void 0) {
+          system.material.blending = newValues.blending;
+          system.material.needsUpdate = true;
         }
         if (newValues.maxParticles !== void 0 && newValues.maxParticles !== activeMaxParticles) {
           setActiveMaxParticles(newValues.maxParticles);
-          initialized.current = false;
-          nextIndex.current = 0;
+          system.initialized = false;
+          system.nextIndex = 0;
         }
         if (newValues.lighting !== void 0 && newValues.lighting !== activeLighting) {
           setActiveLighting(newValues.lighting);
@@ -1377,8 +544,8 @@ var VFXParticles = forwardRef(
           setActiveShadow(newValues.shadow);
         }
         if ("geometryType" in newValues || "geometryArgs" in newValues) {
-          const geoType = (_Q = newValues.geometryType) != null ? _Q : prevGeometryTypeRef.current;
-          const geoArgs = (_R = newValues.geometryArgs) != null ? _R : prevGeometryArgsRef.current;
+          const geoType = (_i = newValues.geometryType) != null ? _i : prevGeometryTypeRef.current;
+          const geoArgs = (_j = newValues.geometryArgs) != null ? _j : prevGeometryArgsRef.current;
           const geoTypeChanged = "geometryType" in newValues && geoType !== prevGeometryTypeRef.current;
           const geoArgsChanged = "geometryArgs" in newValues && JSON.stringify(geoArgs) !== JSON.stringify(prevGeometryArgsRef.current);
           if (geoTypeChanged || geoArgsChanged) {
@@ -1404,9 +571,7 @@ var VFXParticles = forwardRef(
         }
       },
       [
-        uniforms,
-        material,
-        renderObject,
+        system,
         activeMaxParticles,
         activeLighting,
         activeAppearance,
@@ -1421,202 +586,68 @@ var VFXParticles = forwardRef(
         geometry
       ]
     );
-    useEffect2(() => {
+    useEffect(() => {
       if (!debug) return;
-      const initialValues = __spreadValues({
-        name,
-        // Include name for curve baking filename
-        maxParticles,
-        size,
-        colorStart,
-        colorEnd,
-        fadeSize,
-        fadeSizeCurve: fadeSizeCurve || null,
-        // null = linear (no curve)
-        fadeOpacity,
-        fadeOpacityCurve: fadeOpacityCurve || null,
-        // null = linear (no curve)
-        velocityCurve: velocityCurve || null,
-        // null = use friction (no curve)
-        gravity,
-        lifetime,
-        direction,
-        startPosition,
-        startPositionAsDirection,
-        speed,
-        friction,
-        appearance,
-        rotation,
-        rotationSpeed,
-        rotationSpeedCurve: rotationSpeedCurve || null,
-        // null = constant speed (no curve)
-        orientToDirection,
-        orientAxis,
-        stretchBySpeed: stretchBySpeed || null,
-        lighting,
-        shadow,
-        blending,
-        intensity,
-        position,
-        autoStart,
-        delay,
-        emitCount,
-        emitterShape,
-        emitterRadius,
-        emitterAngle,
-        emitterHeight,
-        emitterSurfaceOnly,
-        emitterDirection,
-        turbulence,
-        attractToCenter,
-        softParticles,
-        softDistance,
-        collision
-      }, detectGeometryTypeAndArgs(geometry));
-      function detectGeometryTypeAndArgs(geo) {
-        var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q;
-        if (!geo) return { geometryType: "none", geometryArgs: null };
-        const name2 = geo.constructor.name;
-        const params = geo.parameters || {};
-        switch (name2) {
-          case "BoxGeometry":
-            return {
-              geometryType: "box",
-              geometryArgs: {
-                width: (_a2 = params.width) != null ? _a2 : 1,
-                height: (_b = params.height) != null ? _b : 1,
-                depth: (_c = params.depth) != null ? _c : 1,
-                widthSegments: (_d = params.widthSegments) != null ? _d : 1,
-                heightSegments: (_e = params.heightSegments) != null ? _e : 1,
-                depthSegments: (_f = params.depthSegments) != null ? _f : 1
-              }
-            };
-          case "SphereGeometry":
-            return {
-              geometryType: "sphere",
-              geometryArgs: {
-                radius: (_g = params.radius) != null ? _g : 0.5,
-                widthSegments: (_h = params.widthSegments) != null ? _h : 16,
-                heightSegments: (_i = params.heightSegments) != null ? _i : 12
-              }
-            };
-          case "CylinderGeometry":
-            return {
-              geometryType: "cylinder",
-              geometryArgs: {
-                radiusTop: (_j = params.radiusTop) != null ? _j : 0.5,
-                radiusBottom: (_k = params.radiusBottom) != null ? _k : 0.5,
-                height: (_l = params.height) != null ? _l : 1,
-                radialSegments: (_m = params.radialSegments) != null ? _m : 16,
-                heightSegments: (_n = params.heightSegments) != null ? _n : 1
-              }
-            };
-          case "ConeGeometry":
-            return {
-              geometryType: "cone",
-              geometryArgs: {
-                radius: (_o = params.radius) != null ? _o : 0.5,
-                height: (_p = params.height) != null ? _p : 1,
-                radialSegments: (_q = params.radialSegments) != null ? _q : 16,
-                heightSegments: (_r = params.heightSegments) != null ? _r : 1
-              }
-            };
-          case "TorusGeometry":
-            return {
-              geometryType: "torus",
-              geometryArgs: {
-                radius: (_s = params.radius) != null ? _s : 0.5,
-                tube: (_t = params.tube) != null ? _t : 0.2,
-                radialSegments: (_u = params.radialSegments) != null ? _u : 12,
-                tubularSegments: (_v = params.tubularSegments) != null ? _v : 24
-              }
-            };
-          case "PlaneGeometry":
-            return {
-              geometryType: "plane",
-              geometryArgs: {
-                width: (_w = params.width) != null ? _w : 1,
-                height: (_x = params.height) != null ? _x : 1,
-                widthSegments: (_y = params.widthSegments) != null ? _y : 1,
-                heightSegments: (_z = params.heightSegments) != null ? _z : 1
-              }
-            };
-          case "CircleGeometry":
-            return {
-              geometryType: "circle",
-              geometryArgs: {
-                radius: (_A = params.radius) != null ? _A : 0.5,
-                segments: (_B = params.segments) != null ? _B : 16
-              }
-            };
-          case "RingGeometry":
-            return {
-              geometryType: "ring",
-              geometryArgs: {
-                innerRadius: (_C = params.innerRadius) != null ? _C : 0.25,
-                outerRadius: (_D = params.outerRadius) != null ? _D : 0.5,
-                thetaSegments: (_E = params.thetaSegments) != null ? _E : 16
-              }
-            };
-          case "DodecahedronGeometry":
-            return {
-              geometryType: "dodecahedron",
-              geometryArgs: {
-                radius: (_F = params.radius) != null ? _F : 0.5,
-                detail: (_G = params.detail) != null ? _G : 0
-              }
-            };
-          case "IcosahedronGeometry":
-            return {
-              geometryType: "icosahedron",
-              geometryArgs: {
-                radius: (_H = params.radius) != null ? _H : 0.5,
-                detail: (_I = params.detail) != null ? _I : 0
-              }
-            };
-          case "OctahedronGeometry":
-            return {
-              geometryType: "octahedron",
-              geometryArgs: {
-                radius: (_J = params.radius) != null ? _J : 0.5,
-                detail: (_K = params.detail) != null ? _K : 0
-              }
-            };
-          case "TetrahedronGeometry":
-            return {
-              geometryType: "tetrahedron",
-              geometryArgs: {
-                radius: (_L = params.radius) != null ? _L : 0.5,
-                detail: (_M = params.detail) != null ? _M : 0
-              }
-            };
-          case "CapsuleGeometry":
-            return {
-              geometryType: "capsule",
-              geometryArgs: {
-                radius: (_N = params.radius) != null ? _N : 0.25,
-                length: (_O = params.length) != null ? _O : 0.5,
-                capSegments: (_P = params.capSegments) != null ? _P : 4,
-                radialSegments: (_Q = params.radialSegments) != null ? _Q : 8
-              }
-            };
-          default:
-            return { geometryType: "none", geometryArgs: null };
+      import("debug-vfx").then(
+        ({ renderDebugPanel, detectGeometryTypeAndArgs }) => {
+          const initialValues = __spreadValues({
+            name,
+            maxParticles,
+            size,
+            colorStart,
+            colorEnd,
+            fadeSize,
+            fadeSizeCurve: fadeSizeCurve || null,
+            fadeOpacity,
+            fadeOpacityCurve: fadeOpacityCurve || null,
+            velocityCurve: velocityCurve || null,
+            gravity,
+            lifetime,
+            direction,
+            startPosition,
+            startPositionAsDirection,
+            speed,
+            friction,
+            appearance,
+            rotation,
+            rotationSpeed,
+            rotationSpeedCurve: rotationSpeedCurve || null,
+            orientToDirection,
+            orientAxis,
+            stretchBySpeed: stretchBySpeed || null,
+            lighting,
+            shadow,
+            blending,
+            intensity,
+            position,
+            autoStart,
+            delay,
+            emitCount,
+            emitterShape,
+            emitterRadius,
+            emitterAngle,
+            emitterHeight,
+            emitterSurfaceOnly,
+            emitterDirection,
+            turbulence,
+            attractToCenter,
+            softParticles,
+            softDistance,
+            collision
+          }, detectGeometryTypeAndArgs(geometry));
+          debugValuesRef.current = initialValues;
+          prevGeometryTypeRef.current = initialValues.geometryType;
+          prevGeometryArgsRef.current = initialValues.geometryArgs;
+          renderDebugPanel(initialValues, handleDebugUpdate);
         }
-      }
-      debugValuesRef.current = initialValues;
-      prevGeometryTypeRef.current = initialValues.geometryType;
-      prevGeometryArgsRef.current = initialValues.geometryArgs;
-      import("debug-vfx").then(({ renderDebugPanel }) => {
-        renderDebugPanel(initialValues, handleDebugUpdate);
-      });
+      );
       return () => {
         import("debug-vfx").then(({ destroyDebugPanel }) => {
           destroyDebugPanel();
         });
       };
     }, [debug, geometry]);
-    useEffect2(() => {
+    useEffect(() => {
       if (!debug) return;
       import("debug-vfx").then(({ updateDebugPanel }) => {
         if (debugValuesRef.current) {
@@ -1624,24 +655,46 @@ var VFXParticles = forwardRef(
         }
       });
     }, [debug, handleDebugUpdate]);
-    return /* @__PURE__ */ jsx("primitive", { ref: spriteRef, object: renderObject });
+    return /* @__PURE__ */ jsx("primitive", { ref: spriteRef, object: system.renderObject });
+  }
+);
+var warnedWebGL = false;
+var VFXParticles = forwardRef(
+  function VFXParticles2(_a, ref) {
+    var _b = _a, { fallback } = _b, props = __objRest(_b, ["fallback"]);
+    const { gl } = useThree();
+    const isWebGPU = useMemo(() => isWebGPUBackend(gl), [gl]);
+    if (!isWebGPU) {
+      if (!warnedWebGL) {
+        warnedWebGL = true;
+        console.warn(
+          "r3f-vfx: WebGPU backend not detected. Particle system disabled."
+        );
+      }
+      return /* @__PURE__ */ jsx(Fragment, { children: fallback != null ? fallback : null });
+    }
+    return /* @__PURE__ */ jsx(VFXParticlesImpl, __spreadValues({ ref }, props));
   }
 );
 
 // src/VFXEmitter.tsx
 import {
-  useRef as useRef3,
-  useEffect as useEffect3,
+  useRef as useRef2,
+  useEffect as useEffect2,
   useCallback as useCallback2,
+  useMemo as useMemo2,
   forwardRef as forwardRef2,
   useImperativeHandle as useImperativeHandle2
 } from "react";
-import { useFrame as useFrame2 } from "@react-three/fiber";
-import { Vector3 as Vector32, Quaternion } from "three/webgpu";
+import { useFrame as useFrame2, useThree as useThree2 } from "@react-three/fiber";
+import { Vector3, Quaternion } from "three/webgpu";
+import {
+  EmitterController,
+  isWebGPUBackend as isWebGPUBackend2
+} from "core-vfx";
 import { jsx as jsx2 } from "react/jsx-runtime";
-var _worldPos = new Vector32();
-var _worldQuat = new Quaternion();
-var _tempVec = new Vector32();
+var worldPos = new Vector3();
+var worldQuat = new Quaternion();
 var VFXEmitter = forwardRef2(function VFXEmitter2({
   name,
   particlesRef,
@@ -1656,51 +709,75 @@ var VFXEmitter = forwardRef2(function VFXEmitter2({
   onEmit,
   children
 }, ref) {
-  const groupRef = useRef3(null);
-  const emitAccumulator = useRef3(0);
-  const emitting = useRef3(autoStart);
-  const hasEmittedOnce = useRef3(false);
+  const { gl } = useThree2();
+  const isWebGPU = useMemo2(() => isWebGPUBackend2(gl), [gl]);
+  const groupRef = useRef2(null);
+  const controllerRef = useRef2(null);
+  if (!controllerRef.current) {
+    controllerRef.current = new EmitterController({
+      emitCount,
+      delay,
+      autoStart,
+      loop,
+      localDirection,
+      direction,
+      overrides,
+      onEmit
+    });
+  }
+  const controller = controllerRef.current;
   const getParticleSystem = useCallback2(() => {
     if (particlesRef) {
       return particlesRef.current || particlesRef;
     }
     return useVFXStore.getState().getParticles(name);
   }, [name, particlesRef]);
-  const transformDirectionByQuat = useCallback2(
-    (dirRange, quat) => {
-      const minDir = _tempVec.set(
-        dirRange[0][0],
-        dirRange[1][0],
-        dirRange[2][0]
-      );
-      minDir.applyQuaternion(quat);
-      const maxDir = new Vector32(dirRange[0][1], dirRange[1][1], dirRange[2][1]);
-      maxDir.applyQuaternion(quat);
-      return [
-        [Math.min(minDir.x, maxDir.x), Math.max(minDir.x, maxDir.x)],
-        [Math.min(minDir.y, maxDir.y), Math.max(minDir.y, maxDir.y)],
-        [Math.min(minDir.z, maxDir.z), Math.max(minDir.z, maxDir.z)]
-      ];
-    },
-    []
-  );
-  const getEmitParams = useCallback2(() => {
-    if (!groupRef.current) {
-      return { position, direction };
-    }
-    let emitDir = direction;
-    groupRef.current.getWorldPosition(_worldPos);
-    const emitPos = [_worldPos.x, _worldPos.y, _worldPos.z];
-    if (localDirection && direction) {
-      groupRef.current.getWorldQuaternion(_worldQuat);
-      emitDir = transformDirectionByQuat(direction, _worldQuat);
+  useEffect2(() => {
+    if (!isWebGPU) return;
+    const system = getParticleSystem();
+    controller.setSystem(system);
+  }, [isWebGPU, getParticleSystem, controller]);
+  useEffect2(() => {
+    controller.updateOptions({
+      emitCount,
+      delay,
+      autoStart,
+      loop,
+      localDirection,
+      direction,
+      overrides,
+      onEmit
+    });
+  }, [
+    controller,
+    emitCount,
+    delay,
+    autoStart,
+    loop,
+    localDirection,
+    direction,
+    overrides,
+    onEmit
+  ]);
+  useFrame2((_, delta) => {
+    if (!isWebGPU) return;
+    if (!controller.getSystem()) {
+      const system = getParticleSystem();
+      if (system) controller.setSystem(system);
     }
-    return { position: emitPos, direction: emitDir };
-  }, [localDirection, direction, position, transformDirectionByQuat]);
+    if (!groupRef.current) return;
+    groupRef.current.getWorldPosition(worldPos);
+    groupRef.current.getWorldQuaternion(worldQuat);
+    controller.update(delta, worldPos, worldQuat);
+  });
   const emit = useCallback2(
     (emitOverrides = null) => {
-      const particles = getParticleSystem();
-      if (!(particles == null ? void 0 : particles.spawn)) {
+      if (!groupRef.current) return false;
+      if (!controller.getSystem()) {
+        const system = getParticleSystem();
+        if (system) controller.setSystem(system);
+      }
+      if (!controller.getSystem()) {
         if (name) {
           console.warn(
             `VFXEmitter: No particle system found for name "${name}"`
@@ -1708,114 +785,53 @@ var VFXEmitter = forwardRef2(function VFXEmitter2({
         }
         return false;
       }
-      const { position: emitPos, direction: emitDir } = getEmitParams();
-      const [x, y, z] = emitPos;
-      const emitTimeDirection = emitOverrides == null ? void 0 : emitOverrides.direction;
-      let finalDir = emitDir;
-      if (emitTimeDirection && localDirection && groupRef.current) {
-        groupRef.current.getWorldQuaternion(_worldQuat);
-        finalDir = transformDirectionByQuat(emitTimeDirection, _worldQuat);
-      } else if (emitTimeDirection) {
-        finalDir = emitTimeDirection;
-      }
-      const _a = emitOverrides || {}, { direction: _ } = _a, emitOverridesWithoutDir = __objRest(_a, ["direction"]);
-      const mergedOverrides = __spreadValues(__spreadValues({}, overrides), emitOverridesWithoutDir);
-      const finalOverrides = finalDir ? __spreadProps(__spreadValues({}, mergedOverrides), { direction: finalDir }) : mergedOverrides;
-      particles.spawn(x, y, z, emitCount, finalOverrides);
-      if (onEmit) {
-        onEmit({ position: emitPos, count: emitCount, direction: finalDir });
-      }
-      return true;
+      groupRef.current.getWorldPosition(worldPos);
+      groupRef.current.getWorldQuaternion(worldQuat);
+      return controller.emitAtPosition(worldPos, worldQuat, emitOverrides);
     },
-    [
-      getParticleSystem,
-      getEmitParams,
-      name,
-      emitCount,
-      overrides,
-      onEmit,
-      localDirection,
-      transformDirectionByQuat
-    ]
+    [controller, getParticleSystem, name]
   );
-  useFrame2((_, delta) => {
-    if (!emitting.current) return;
-    if (!loop && hasEmittedOnce.current) {
-      return;
-    }
-    if (delay <= 0) {
-      const success = emit();
-      if (success) hasEmittedOnce.current = true;
-    } else {
-      emitAccumulator.current += delta;
-      if (emitAccumulator.current >= delay) {
-        emitAccumulator.current -= delay;
-        const success = emit();
-        if (success) hasEmittedOnce.current = true;
-      }
-    }
-  });
-  const start = useCallback2(() => {
-    emitting.current = true;
-    hasEmittedOnce.current = false;
-    emitAccumulator.current = 0;
-  }, []);
-  const stop = useCallback2(() => {
-    emitting.current = false;
-  }, []);
   const burst = useCallback2(
     (count) => {
-      const particles = getParticleSystem();
-      if (!(particles == null ? void 0 : particles.spawn)) return false;
-      const { position: emitPos, direction: emitDir } = getEmitParams();
-      const [x, y, z] = emitPos;
-      const finalOverrides = emitDir ? __spreadProps(__spreadValues({}, overrides), { direction: emitDir }) : overrides;
-      particles.spawn(x, y, z, count != null ? count : emitCount, finalOverrides);
-      if (onEmit) {
-        onEmit({
-          position: emitPos,
-          count: count != null ? count : emitCount,
-          direction: emitDir
-        });
+      if (!groupRef.current) return false;
+      if (!controller.getSystem()) {
+        const system = getParticleSystem();
+        if (system) controller.setSystem(system);
       }
-      return true;
+      if (!controller.getSystem()) return false;
+      groupRef.current.getWorldPosition(worldPos);
+      groupRef.current.getWorldQuaternion(worldQuat);
+      return controller.burst(count, worldPos, worldQuat);
     },
-    [getParticleSystem, getEmitParams, emitCount, overrides, onEmit]
+    [controller, getParticleSystem]
   );
-  useEffect3(() => {
-    emitting.current = autoStart;
-    if (autoStart) {
-      hasEmittedOnce.current = false;
-      emitAccumulator.current = 0;
-    }
-  }, [autoStart]);
+  const start = useCallback2(() => controller.start(), [controller]);
+  const stop = useCallback2(() => controller.stop(), [controller]);
   useImperativeHandle2(
     ref,
     () => ({
-      /** Emit particles at current position */
       emit,
-      /** Burst emit - emit immediately regardless of autoStart */
       burst,
-      /** Start auto-emission */
       start,
-      /** Stop auto-emission */
       stop,
-      /** Check if currently emitting */
       get isEmitting() {
-        return emitting.current;
+        return controller.isEmitting;
       },
-      /** Get the linked particle system */
       getParticleSystem,
-      /** Get the group ref for direct access */
       get group() {
         return groupRef.current;
       }
     }),
-    [emit, burst, start, stop, getParticleSystem]
+    [emit, burst, start, stop, controller, getParticleSystem]
+  );
+  return (
+    // @ts-expect-error
+    /* @__PURE__ */ jsx2("group", { ref: groupRef, position, children })
   );
-  return /* @__PURE__ */ jsx2("group", { ref: groupRef, position, children });
 });
 function useVFXEmitter(name) {
+  const { gl } = useThree2();
+  const isWebGPU = useMemo2(() => isWebGPUBackend2(gl), [gl]);
   const getParticles = useVFXStore((s) => s.getParticles);
   const storeEmit = useVFXStore((s) => s.emit);
   const storeStart = useVFXStore((s) => s.start);
@@ -1823,31 +839,44 @@ function useVFXEmitter(name) {
   const storeClear = useVFXStore((s) => s.clear);
   const emit = useCallback2(
     (position = [0, 0, 0], count = 20, overrides = null) => {
+      if (!isWebGPU) return false;
       const [x, y, z] = position;
       return storeEmit(name, { x, y, z, count, overrides });
     },
-    [name, storeEmit]
+    [isWebGPU, name, storeEmit]
   );
   const burst = useCallback2(
     (position = [0, 0, 0], count = 50, overrides = null) => {
+      if (!isWebGPU) return false;
       const [x, y, z] = position;
       return storeEmit(name, { x, y, z, count, overrides });
     },
-    [name, storeEmit]
+    [isWebGPU, name, storeEmit]
   );
-  const start = useCallback2(() => storeStart(name), [name, storeStart]);
-  const stop = useCallback2(() => storeStop(name), [name, storeStop]);
-  const clear = useCallback2(() => storeClear(name), [name, storeClear]);
+  const start = useCallback2(() => {
+    if (!isWebGPU) return false;
+    return storeStart(name);
+  }, [isWebGPU, name, storeStart]);
+  const stop = useCallback2(() => {
+    if (!isWebGPU) return false;
+    return storeStop(name);
+  }, [isWebGPU, name, storeStop]);
+  const clear = useCallback2(() => {
+    if (!isWebGPU) return false;
+    return storeClear(name);
+  }, [isWebGPU, name, storeClear]);
   const isEmitting = useCallback2(() => {
     var _a;
+    if (!isWebGPU) return false;
     const particles = getParticles(name);
     return (_a = particles == null ? void 0 : particles.isEmitting) != null ? _a : false;
-  }, [name, getParticles]);
+  }, [isWebGPU, name, getParticles]);
   const getUniforms = useCallback2(() => {
     var _a;
+    if (!isWebGPU) return null;
     const particles = getParticles(name);
     return (_a = particles == null ? void 0 : particles.uniforms) != null ? _a : null;
-  }, [name, getParticles]);
+  }, [isWebGPU, name, getParticles]);
   return {
     emit,
     burst,
@@ -1856,23 +885,38 @@ function useVFXEmitter(name) {
     clear,
     isEmitting,
     getUniforms,
-    getParticles: () => getParticles(name)
+    getParticles: () => isWebGPU ? getParticles(name) : null
   };
 }
+
+// src/index.ts
+import {
+  VFXParticleSystem as VFXParticleSystem2,
+  EmitterController as EmitterController2,
+  isWebGPUBackend as isWebGPUBackend3,
+  isNonDefaultRotation as isNonDefaultRotation2,
+  normalizeProps as normalizeProps2,
+  resolveCurveTexture
+} from "core-vfx";
 export {
   Appearance2 as Appearance,
-  AttractorType2 as AttractorType,
+  AttractorType,
   Blending2 as Blending,
-  CurveChannel2 as CurveChannel,
-  Easing2 as Easing,
+  CurveChannel,
+  Easing,
+  EmitterController2 as EmitterController,
   EmitterShape2 as EmitterShape,
   Lighting2 as Lighting,
   VFXEmitter,
+  VFXParticleSystem2 as VFXParticleSystem,
   VFXParticles,
   bakeCurveToArray,
   buildCurveTextureBin,
-  createCombinedCurveTexture3 as createCombinedCurveTexture,
-  useCurveTextureAsync,
+  createCombinedCurveTexture,
+  isNonDefaultRotation2 as isNonDefaultRotation,
+  isWebGPUBackend3 as isWebGPUBackend,
+  normalizeProps2 as normalizeProps,
+  resolveCurveTexture,
   useVFXEmitter,
   useVFXStore
 };