@codexo/exojs 0.7.13 → 0.8.0

package/dist/exo.esm.js

@@ -1386,7 +1386,7 @@ class Signal {
 }
 
 /** τ = 2π, the full-circle radian constant. */
-const tau = Math.PI * 2;
+const tau$2 = Math.PI * 2;
 /** Multiply a degree value by this constant to convert to radians. */
 const radiansPerDegree = Math.PI / 180;
 /** Multiply a radian value by this constant to convert to degrees. */
@@ -8354,7 +8354,7 @@ class WebGl2MeshRenderer extends AbstractWebGl2Renderer {
     }
 }
 
-var vertexSource$1 = "#version 300 es\nprecision lowp float;\nprecision lowp int;\n\n// Per-instance attributes (one entry per particle, 24 bytes total).\nlayout(location = 0) in vec2 a_translation;     // particle position in system-local space\nlayout(location = 1) in vec2 a_scale;            // particle scale\nlayout(location = 2) in float a_rotation;        // particle rotation in degrees\nlayout(location = 3) in vec4 a_color;            // RGBA tint\n\nuniform mat3 u_projection;\nuniform mat3 u_systemTransform;\nuniform vec4 u_localBounds;                      // left, top, right, bottom (system.vertices)\nuniform vec4 u_uvBounds;                         // uMin, vMin, uMax, vMax (flipY-swapped)\n\nout vec2 v_texcoord;\nout vec4 v_color;\n\nvoid main(void) {\n    // Static index buffer is [0,1,2,0,2,3] (triangle-list), so gl_VertexID 0..3\n    // maps to TL, TR, BR, BL via the same bit math the sprite renderer uses.\n    int vid = gl_VertexID;\n    int cornerX = ((vid + 1) >> 1) & 1;\n    int cornerY = vid >> 1;\n\n    float localX = (cornerX == 0) ? u_localBounds.x : u_localBounds.z;\n    float localY = (cornerY == 0) ? u_localBounds.y : u_localBounds.w;\n\n    // Per-particle scale + rotation.\n    vec2 rotation = vec2(sin(radians(a_rotation)), cos(radians(a_rotation)));\n    vec2 transformed = vec2(\n        (localX * (a_scale.x * rotation.y)) + (localY * (a_scale.y * rotation.x)),\n        (localX * (a_scale.x * -rotation.x)) + (localY * (a_scale.y * rotation.y))\n    );\n\n    vec3 worldPos = vec3(transformed + a_translation, 1.0);\n\n    gl_Position = vec4((u_projection * u_systemTransform * worldPos).xy, 0.0, 1.0);\n\n    float u = (cornerX == 0) ? u_uvBounds.x : u_uvBounds.z;\n    float v = (cornerY == 0) ? u_uvBounds.y : u_uvBounds.w;\n    v_texcoord = vec2(u, v);\n\n    v_color = vec4(a_color.rgb * a_color.a, a_color.a);\n}\n";
+var vertexSource$1 = "#version 300 es\nprecision lowp float;\nprecision lowp int;\n\n// Per-instance attributes (one entry per particle, 40 bytes total).\nlayout(location = 0) in vec2 a_translation;     // particle position in system-local space\nlayout(location = 1) in vec2 a_scale;            // particle scale\nlayout(location = 2) in float a_rotation;        // particle rotation in degrees\nlayout(location = 3) in vec4 a_color;            // RGBA tint\nlayout(location = 4) in vec2 a_uvMin;            // top-left UV (u, v) — pre-resolved per instance\nlayout(location = 5) in vec2 a_uvMax;            // bottom-right UV (u, v) — pre-resolved per instance\n\nuniform mat3 u_projection;\nuniform mat3 u_systemTransform;\nuniform vec4 u_localBounds;                      // left, top, right, bottom (system.vertices)\n\nout vec2 v_texcoord;\nout vec4 v_color;\n\nvoid main(void) {\n    // Static index buffer is [0,1,2,0,2,3] (triangle-list), so gl_VertexID 0..3\n    // maps to TL, TR, BR, BL via the same bit math the sprite renderer uses.\n    int vid = gl_VertexID;\n    int cornerX = ((vid + 1) >> 1) & 1;\n    int cornerY = vid >> 1;\n\n    float localX = (cornerX == 0) ? u_localBounds.x : u_localBounds.z;\n    float localY = (cornerY == 0) ? u_localBounds.y : u_localBounds.w;\n\n    // Per-particle scale + rotation.\n    vec2 rotation = vec2(sin(radians(a_rotation)), cos(radians(a_rotation)));\n    vec2 transformed = vec2(\n        (localX * (a_scale.x * rotation.y)) + (localY * (a_scale.y * rotation.x)),\n        (localX * (a_scale.x * -rotation.x)) + (localY * (a_scale.y * rotation.y))\n    );\n\n    vec3 worldPos = vec3(transformed + a_translation, 1.0);\n\n    gl_Position = vec4((u_projection * u_systemTransform * worldPos).xy, 0.0, 1.0);\n\n    float u = (cornerX == 0) ? a_uvMin.x : a_uvMax.x;\n    float v = (cornerY == 0) ? a_uvMin.y : a_uvMax.y;\n    v_texcoord = vec2(u, v);\n\n    v_color = vec4(a_color.rgb * a_color.a, a_color.a);\n}\n";
 
 var fragmentSource$1 = "#version 300 es\nprecision lowp float;\n\nuniform sampler2D u_texture;\n\nin vec2 v_texcoord;\nin vec4 v_color;\n\nlayout(location = 0) out vec4 fragColor;\n\nvoid main(void) {\n    fragColor = texture(u_texture, v_texcoord) * v_color;\n}\n";
 
@@ -8363,30 +8363,26 @@ var fragmentSource$1 = "#version 300 es\nprecision lowp float;\n\nuniform sample
  *
  * One ParticleSystem = one batch. Each `render(system)` flushes any
  * pending batch, sets the system-level uniforms (transform, local
- * bounds, UV bounds, texture), and packs every active particle into
- * the per-instance buffer. The next `flush()` issues a single
- * `drawElementsInstanced` for that system.
+ * bounds, texture), and packs every active particle into the per-instance
+ * buffer. The next `flush()` issues a single `drawElementsInstanced`.
  *
- * Per-instance layout (24 bytes per particle, 4 attributes):
+ * Per-instance layout (40 bytes per particle, 6 attributes):
  * ```
  *   translation  f32x2  (offset  0,  8 bytes)  particle position (system-local)
  *   scale        f32x2  (offset  8,  8 bytes)
  *   rotation     f32    (offset 16,  4 bytes)  degrees
  *   color        u8x4   (offset 20,  4 bytes)  RGBA tint, normalised
+ *   uvMin        f32x2  (offset 24,  8 bytes)  pre-resolved frame uvMin
+ *   uvMax        f32x2  (offset 32,  8 bytes)  pre-resolved frame uvMax
  * ```
  *
- * vs the previous per-vertex layout (36 bytes per vertex × 4 verts =
- * 144 bytes per particle), this is an 83% bandwidth reduction and
- * roughly 80% fewer CPU writes per particle (one pack call vs four
- * duplicated vertex writes plus per-corner UV coords).
- *
- * The system transform stays as a uniform — mixing systems in one
- * batch would require either a per-instance transform matrix (more
- * bandwidth) or per-particle texture-slot indexing (multi-texture
- * support similar to the sprite renderer). Both are follow-ups; the
- * current pattern keeps the renderer focused on the per-particle win.
+ * UVs are baked per-particle so the system can carry an atlas of frames
+ * — `system.frames` declares the rectangles; each particle's
+ * `textureIndex` selects one. The pack loop resolves frame-rectangle to
+ * UVs once per particle per frame; no per-instance shader-side indexing
+ * needed.
  */
-const instanceStrideBytes$2 = 24;
+const instanceStrideBytes$2 = 40;
 const wordsPerInstance$1 = instanceStrideBytes$2 / Uint32Array.BYTES_PER_ELEMENT;
 const indicesPerQuad = 6;
 const quadIndices$2 = new Uint16Array([0, 1, 2, 0, 2, 3]);
@@ -8415,7 +8411,7 @@ class WebGl2ParticleRenderer extends AbstractWebGl2Renderer {
     }
     render(system) {
         const backend = this.getBackend();
-        const { texture, particles, blendMode } = system;
+        const { texture, blendMode } = system;
         const textureChanged = texture !== this._currentTexture;
         const blendModeChanged = blendMode !== this._currentBlendMode;
         // System transform / texture / UV / local-bounds are uniforms, so
@@ -8433,32 +8429,94 @@ class WebGl2ParticleRenderer extends AbstractWebGl2Renderer {
         // System-level uniforms are set before packing so the eventual
         // flush() can sync them in one go.
         const localBounds = system.vertices;
-        const uvBounds = this._unpackUvBounds(system);
         this._shader
             .getUniform('u_systemTransform')
             .setValue(system.getGlobalTransform().toArray(false));
         this._shader
             .getUniform('u_localBounds')
             .setValue(localBounds);
-        this._shader
-            .getUniform('u_uvBounds')
-            .setValue(uvBounds);
         const f32 = this._instanceFloat32;
         const u32 = this._instanceUint32;
-        const limit = Math.min(particles.length, this._batchSize);
+        const { posX, posY, scaleX, scaleY, rotations, color, textureIndex, alive } = system;
+        const limit = Math.min(system.liveCount, this._batchSize);
+        // Pre-compute frame UVs from system.frames + texture; falls back
+        // to the system.textureFrame when no atlas is declared.
+        const { uvMins, uvMaxs } = this._computeFrameUvs(system);
+        const frameCount = uvMins.length / 2;
+        const fallbackFrame = frameCount > 0 ? 0 : 0;
+        let writeIndex = 0;
         for (let i = 0; i < limit; i++) {
-            const particle = particles[i];
-            const offset = i * wordsPerInstance$1;
-            f32[offset + 0] = particle.position.x;
-            f32[offset + 1] = particle.position.y;
-            f32[offset + 2] = particle.scale.x;
-            f32[offset + 3] = particle.scale.y;
-            f32[offset + 4] = particle.rotation;
-            u32[offset + 5] = particle.tint.toRgba();
-        }
-        this._instanceCount = limit;
-        return this;
-    }
+            // Skip dead slots in GPU-mode systems where the live range can
+            // contain holes.
+            if (alive[i] === 0) {
+                continue;
+            }
+            const offset = writeIndex * wordsPerInstance$1;
+            const frame = textureIndex[i] < frameCount ? textureIndex[i] : fallbackFrame;
+            const uvBase = frame * 2;
+            f32[offset + 0] = posX[i];
+            f32[offset + 1] = posY[i];
+            f32[offset + 2] = scaleX[i];
+            f32[offset + 3] = scaleY[i];
+            f32[offset + 4] = rotations[i];
+            u32[offset + 5] = color[i];
+            f32[offset + 6] = uvMins[uvBase + 0];
+            f32[offset + 7] = uvMins[uvBase + 1];
+            f32[offset + 8] = uvMaxs[uvBase + 0];
+            f32[offset + 9] = uvMaxs[uvBase + 1];
+            writeIndex++;
+        }
+        this._instanceCount = writeIndex;
+        return this;
+    }
+    /**
+     * Compute (uvMin, uvMax) pairs for every declared frame on the system.
+     * Pulled lazily and cached per (system, texture-version) to avoid the
+     * arithmetic in the hot pack loop. Falls back to a single entry from
+     * `system.textureFrame` when no atlas is declared.
+     */
+    _computeFrameUvs(system) {
+        const frames = system.frames;
+        const tex = system.texture;
+        const texW = tex.width;
+        const texH = tex.height;
+        const flipY = tex.flipY;
+        const count = frames.length === 0 ? 1 : frames.length;
+        // Re-allocate scratch when capacity grows.
+        if (this._uvMinsScratch.length < count * 2) {
+            this._uvMinsScratch = new Float32Array(count * 2);
+            this._uvMaxsScratch = new Float32Array(count * 2);
+        }
+        const mins = this._uvMinsScratch;
+        const maxs = this._uvMaxsScratch;
+        if (frames.length === 0) {
+            const f = system.textureFrame;
+            const minU = f.left / texW;
+            const maxU = f.right / texW;
+            const topV = f.top / texH;
+            const bottomV = f.bottom / texH;
+            mins[0] = minU;
+            mins[1] = flipY ? bottomV : topV;
+            maxs[0] = maxU;
+            maxs[1] = flipY ? topV : bottomV;
+            return { uvMins: mins, uvMaxs: maxs };
+        }
+        for (let i = 0; i < frames.length; i++) {
+            const f = frames[i];
+            const o = i * 2;
+            const minU = f.left / texW;
+            const maxU = f.right / texW;
+            const topV = f.top / texH;
+            const bottomV = f.bottom / texH;
+            mins[o + 0] = minU;
+            mins[o + 1] = flipY ? bottomV : topV;
+            maxs[o + 0] = maxU;
+            maxs[o + 1] = flipY ? topV : bottomV;
+        }
+        return { uvMins: mins, uvMaxs: maxs };
+    }
+    _uvMinsScratch = new Float32Array(2);
+    _uvMaxsScratch = new Float32Array(2);
     flush() {
         const backend = this.getBackendOrNull();
         const instanceBuffer = this._instanceBuffer;
@@ -8498,6 +8556,8 @@ class WebGl2ParticleRenderer extends AbstractWebGl2Renderer {
             .addAttribute(this._instanceBuffer, this._shader.getAttribute('a_scale'), gl.FLOAT, false, instanceStrideBytes$2, 8, false, 1)
             .addAttribute(this._instanceBuffer, this._shader.getAttribute('a_rotation'), gl.FLOAT, false, instanceStrideBytes$2, 16, false, 1)
             .addAttribute(this._instanceBuffer, this._shader.getAttribute('a_color'), gl.UNSIGNED_BYTE, true, instanceStrideBytes$2, 20, false, 1)
+            .addAttribute(this._instanceBuffer, this._shader.getAttribute('a_uvMin'), gl.FLOAT, false, instanceStrideBytes$2, 24, false, 1)
+            .addAttribute(this._instanceBuffer, this._shader.getAttribute('a_uvMax'), gl.FLOAT, false, instanceStrideBytes$2, 32, false, 1)
             .connect(this._createVaoRuntime(this._connection));
     }
     onDisconnect() {
@@ -8519,37 +8579,6 @@ class WebGl2ParticleRenderer extends AbstractWebGl2Renderer {
         this.disconnect();
         this._shader.destroy();
     }
-    /**
-     * Convert the system's per-corner packed-u32 texCoords into the
-     * (uMin, vMin, uMax, vMax) bounds the new vertex shader expects.
-     * Already accounts for flipY (the system's `texCoords` baked it in).
-     *
-     * The four packed u32s, by corner index, are:
-     *   [0] TL = (uMin/uMax | vMin/vMax depending on flipY)
-     *   [1] TR
-     *   [2] BR
-     *   [3] BL
-     * We need (uMin, vMin, uMax, vMax) — the corner-extreme values.
-     */
-    _uvBoundsScratch = new Float32Array(4);
-    _unpackUvBounds(system) {
-        const texCoords = system.texCoords;
-        // Each packed u32: low 16 bits = U normalised to 0..65535,
-        //                  high 16 bits = V normalised.
-        const uTopLeft = (texCoords[0] & 0xFFFF) / 0xFFFF;
-        const vTopLeft = ((texCoords[0] >>> 16) & 0xFFFF) / 0xFFFF;
-        const uBottomRight = (texCoords[2] & 0xFFFF) / 0xFFFF;
-        const vBottomRight = ((texCoords[2] >>> 16) & 0xFFFF) / 0xFFFF;
-        // For flipY: TL.v becomes vMax (was minY → maxY). The shader picks
-        // (cornerY == 0 ? vMin : vMax); writing TL.v into vMin and BR.v into
-        // vMax matches the original per-corner ordering whether or not flipY
-        // was applied at texCoords pack time.
-        this._uvBoundsScratch[0] = uTopLeft;
-        this._uvBoundsScratch[1] = vTopLeft;
-        this._uvBoundsScratch[2] = uBottomRight;
-        this._uvBoundsScratch[3] = vBottomRight;
-        return this._uvBoundsScratch;
-    }
     _createConnection(gl) {
         const vaoHandle = gl.createVertexArray();
         if (vaoHandle === null) {
@@ -9068,169 +9097,830 @@ class Sprite extends Drawable {
 RenderNode.setInternalSpriteFactory(() => new Sprite(null));
 
 /**
- * Mutable per-instance state for a single live particle. Implements
- * {@link ParticleProperties} so affectors can mutate it through the shared
- * interface. Particles are pooled by {@link ParticleSystem}: expired instances
- * are moved to the graveyard and reused via {@link ParticleSystem.requestParticle}
- * rather than garbage-collected.
+ * Slices a single {@link Texture} into named frames and optional named
+ * animation sequences.
  *
- * Do not construct directly — use {@link ParticleSystem.requestParticle} to
- * obtain a recycled or fresh instance, then configure it through
- * {@link Particle.applyOptions}.
+ * Each frame is stored as both a {@link Rectangle} (the pixel region) and a
+ * pre-configured {@link Sprite} ready for direct rendering. Animations are
+ * ordered lists of frame names that {@link AnimatedSprite.fromSpritesheet}
+ * consumes to create playback clips.
  */
-class Particle {
-    _totalLifetime = Time.oneSecond.clone();
-    _elapsedLifetime = Time.zero.clone();
-    _position = Vector.zero.clone();
-    _velocity = Vector.zero.clone();
-    _scale = Vector.one.clone();
-    _rotation = 0;
-    _rotationSpeed = 0;
-    _textureIndex = 0;
-    _tint = Color.white.clone();
-    get totalLifetime() {
-        return this._totalLifetime;
-    }
-    set totalLifetime(totalLifetime) {
-        this._totalLifetime.copy(totalLifetime);
-    }
-    get elapsedLifetime() {
-        return this._elapsedLifetime;
-    }
-    set elapsedLifetime(elapsedLifetime) {
-        this._elapsedLifetime.copy(elapsedLifetime);
-    }
-    get position() {
-        return this._position;
-    }
-    set position(position) {
-        this._position.copy(position);
-    }
-    get velocity() {
-        return this._velocity;
-    }
-    set velocity(velocity) {
-        this._velocity.copy(velocity);
+class Spritesheet {
+    texture;
+    frames = new Map();
+    sprites = new Map();
+    animations = new Map();
+    constructor(texture, data) {
+        this.texture = texture;
+        this.parse(data);
     }
-    get scale() {
-        return this._scale;
+    /**
+     * Parse a {@link SpritesheetData} descriptor, populating `frames`,
+     * `sprites`, and `animations`. When `keepFrames` is `false` (default),
+     * all existing frames and sprites are destroyed before parsing.
+     */
+    parse(data, keepFrames = false) {
+        if (!keepFrames) {
+            this.clear();
+        }
+        for (const [name, frame] of Object.entries(data.frames)) {
+            this.addFrame(name, frame);
+        }
+        if (data.animations) {
+            for (const [animationName, frameNames] of Object.entries(data.animations)) {
+                this.defineAnimation(animationName, frameNames);
+            }
+        }
     }
-    set scale(scale) {
-        this._scale.copy(scale);
+    /** Register a single frame by name, creating its {@link Rectangle} and pre-configured {@link Sprite}. */
+    addFrame(name, data) {
+        const { x, y, w, h } = data.frame;
+        const frame = new Rectangle(x, y, w, h);
+        const sprite = new Sprite(this.texture);
+        sprite.setTextureFrame(frame);
+        this.frames.set(name, frame);
+        this.sprites.set(name, sprite);
     }
-    get tint() {
-        return this._tint;
+    /** Register an animation sequence as an ordered list of frame names. All referenced frames must already exist. */
+    defineAnimation(name, frameNames) {
+        if (name.trim().length === 0) {
+            throw new Error('Spritesheet animation names must be non-empty strings.');
+        }
+        if (!Array.isArray(frameNames) || frameNames.length === 0) {
+            throw new Error(`Spritesheet animation "${name}" must reference at least one frame.`);
+        }
+        for (const frameName of frameNames) {
+            if (!this.frames.has(frameName)) {
+                throw new Error(`Spritesheet animation "${name}" references missing frame "${frameName}".`);
+            }
+        }
+        this.animations.set(name, [...frameNames]);
+        return this;
     }
-    set tint(tint) {
-        this._tint.copy(tint);
+    /** Return the {@link Rectangle} for the named frame. Throws if the frame does not exist. */
+    getFrame(name) {
+        const frame = this.frames.get(name);
+        if (!frame) {
+            throw new Error(`Spritesheet frame named ${name} is not available!`);
+        }
+        return frame;
     }
-    get rotation() {
-        return this._rotation;
+    /** Return the ordered frame-name list for the named animation. Throws if the animation does not exist. */
+    getAnimationFrameNames(name) {
+        const frames = this.animations.get(name);
+        if (!frames) {
+            throw new Error(`Spritesheet animation named ${name} is not available!`);
+        }
+        return frames;
     }
-    set rotation(degrees) {
-        this._rotation = trimRotation(degrees);
+    /** Return the pre-configured {@link Sprite} for the named frame. Throws if the frame does not exist. */
+    getFrameSprite(name) {
+        const sprite = this.sprites.get(name);
+        if (!sprite) {
+            throw new Error(`Spritesheet frame named ${name} is not available!`);
+        }
+        return sprite;
     }
-    get rotationSpeed() {
-        return this._rotationSpeed;
+    /** Destroy all registered frames, sprites, and animations, resetting the spritesheet to an empty state. */
+    clear() {
+        for (const frame of this.frames.values()) {
+            frame.destroy();
+        }
+        this.frames.clear();
+        for (const sprite of this.sprites.values()) {
+            sprite.destroy();
+        }
+        this.sprites.clear();
+        this.animations.clear();
+        return this;
     }
-    set rotationSpeed(rotationSpeed) {
-        this._rotationSpeed = rotationSpeed;
+    destroy() {
+        this.clear();
     }
-    get textureIndex() {
-        return this._textureIndex;
+}
+
+/**
+ * Compute the byte size of a uniform struct from its declared fields,
+ * respecting WGSL std140-like alignment rules. Each field aligns to its
+ * natural alignment; the struct itself rounds to its largest alignment.
+ *
+ * Used by the codegen to size the system's combined uniform buffer.
+ */
+const wgslUniformByteSize = (fields) => {
+    let offset = 0;
+    let maxAlign = 4;
+    for (const field of fields) {
+        const { size, align } = wgslFieldLayout(field.type);
+        offset = Math.ceil(offset / align) * align;
+        offset += size;
+        maxAlign = Math.max(maxAlign, align);
+    }
+    return Math.ceil(offset / maxAlign) * maxAlign;
+};
+/** Per-WGSL-primitive size and alignment in bytes. */
+const wgslFieldLayout = (type) => {
+    switch (type) {
+        case 'f32':
+        case 'i32':
+        case 'u32':
+            return { size: 4, align: 4 };
+        case 'vec2<f32>':
+            return { size: 8, align: 8 };
+        case 'vec4<f32>':
+            return { size: 16, align: 16 };
     }
-    set textureIndex(textureIndex) {
-        this._textureIndex = textureIndex;
+};
+
+/// <reference types="@webgpu/types" />
+/**
+ * GPU-side mirror of one {@link ParticleSystem}. Owns:
+ *
+ * - **8 packed storage buffers** for the per-particle SoA data:
+ *   positions/velocities/scales/rotInfo/timing as `vec2<f32>`, color and
+ *   textureIndex as `u32`, plus the instance output buffer. Sits at the
+ *   default WebGPU `maxStorageBuffersPerShaderStage = 8` limit.
+ * - **One uniform buffer** for sim state (`dt`, `liveCount`).
+ * - **One uniform buffer** for module configs (concatenated per-module
+ *   structs with WGSL std140-ish alignment).
+ * - **One uniform buffer** for frame UVs — `array<vec4<f32>, N>` where N
+ *   is the system's frame count (or 1 when no atlas is declared). Each
+ *   vec4 is `(uvMinX, uvMinY, uvMaxX, uvMaxY)` already flipY-adjusted.
+ * - **N 1D textures** for modules that use lookup tables (Curve / Gradient).
+ * - **Composite compute pipeline** built once at construction by
+ *   concatenating the integration step + every registered module body +
+ *   the pack-instances step into a single shader.
+ *
+ * The compute shader's pack-instances step reads `textureIndex[i]`, looks
+ * up the matching frame UV, and writes a 40-byte interleaved record into
+ * the instance output buffer (`STORAGE | VERTEX`). The renderer binds that
+ * buffer directly as instanced vertex source — no readback.
+ */
+const workgroupSize = 64;
+const instanceBytes = 40; // 5 × f32 + 1 × u32 + 4 × f32 (uvMin.xy, uvMax.xy)
+class ParticleGpuState {
+    device;
+    capacity;
+    /** GPU buffer holding interleaved per-instance vertex data, written by compute, read as VERTEX by the renderer. */
+    instanceBuffer;
+    _positions;
+    _velocities;
+    _scales;
+    _rotInfo;
+    _timing;
+    _color;
+    _textureIndex;
+    _simUniformBuffer;
+    _simUniformData = new ArrayBuffer(16);
+    _simUniformView;
+    _moduleUniformBuffer;
+    _moduleUniformData;
+    _moduleUniformView;
+    _moduleSlots;
+    _framesUniformBuffer;
+    _framesUniformData;
+    _framesUniformView;
+    _frameCount;
+    _moduleTextures = new Map();
+    _samplerFiltering;
+    _samplerNonFiltering;
+    _pipeline;
+    _bindGroup0;
+    _bindGroup1;
+    constructor(device, capacity, modules, frames, texture) {
+        this.device = device;
+        this.capacity = capacity;
+        for (const m of modules) {
+            if (!m.wgsl) {
+                throw new Error(`ParticleGpuState: module ${m.constructor.name} has no wgsl() — `
+                    + 'all registered UpdateModules must be GPU-eligible.');
+            }
+        }
+        // Module uniform layout.
+        const slots = [];
+        let uniformOffset = 0;
+        for (const m of modules) {
+            const c = m.wgsl();
+            const fields = c.uniforms ?? [];
+            const size = wgslUniformByteSize(fields);
+            uniformOffset = Math.ceil(uniformOffset / 16) * 16;
+            slots.push({
+                module: m,
+                contribution: c,
+                uniformByteOffset: uniformOffset,
+                uniformByteSize: size,
+            });
+            uniformOffset += size;
+        }
+        const totalUniformBytes = Math.max(16, Math.ceil(uniformOffset / 16) * 16);
+        this._moduleSlots = slots;
+        if (uniformOffset > 0) {
+            this._moduleUniformData = new ArrayBuffer(totalUniformBytes);
+            this._moduleUniformView = new DataView(this._moduleUniformData);
+            this._moduleUniformBuffer = device.createBuffer({
+                label: 'particle-module-uniforms',
+                size: totalUniformBytes,
+                usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+            });
+        }
+        else {
+            this._moduleUniformData = null;
+            this._moduleUniformView = null;
+            this._moduleUniformBuffer = null;
+        }
+        // Frames uniform buffer.
+        this._frameCount = Math.max(1, frames.length);
+        this._framesUniformData = new ArrayBuffer(this._frameCount * 16);
+        this._framesUniformView = new Float32Array(this._framesUniformData);
+        this._framesUniformBuffer = device.createBuffer({
+            label: 'particle-frames-uniforms',
+            size: this._framesUniformData.byteLength,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+        });
+        this._writeFrames(frames, texture);
+        const vec2Bytes = capacity * 8;
+        const u32Bytes = capacity * 4;
+        this._positions = device.createBuffer({ label: 'particle-positions', size: vec2Bytes, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST });
+        this._velocities = device.createBuffer({ label: 'particle-velocities', size: vec2Bytes, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST });
+        this._scales = device.createBuffer({ label: 'particle-scales', size: vec2Bytes, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST });
+        this._rotInfo = device.createBuffer({ label: 'particle-rotInfo', size: vec2Bytes, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST });
+        this._timing = device.createBuffer({ label: 'particle-timing', size: vec2Bytes, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST });
+        this._color = device.createBuffer({ label: 'particle-color', size: u32Bytes, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST });
+        this._textureIndex = device.createBuffer({ label: 'particle-textureIndex', size: u32Bytes, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST });
+        this.instanceBuffer = device.createBuffer({
+            label: 'particle-instance-output',
+            size: capacity * instanceBytes,
+            usage: GPUBufferUsage.STORAGE | GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+        });
+        this._simUniformView = new DataView(this._simUniformData);
+        this._simUniformBuffer = device.createBuffer({
+            label: 'particle-sim-uniforms',
+            size: 16,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+        });
+        // r32float textures aren't filterable in core WebGPU (would require
+        // the optional `float32-filterable` feature). Use `nearest` for
+        // r32float curve LUTs (256 taps is fine without interpolation) and
+        // `linear` for rgba8unorm gradients which support filtering natively.
+        this._samplerFiltering = device.createSampler({
+            label: 'particle-lookup-sampler-filtering',
+            minFilter: 'linear',
+            magFilter: 'linear',
+            addressModeU: 'clamp-to-edge',
+        });
+        this._samplerNonFiltering = device.createSampler({
+            label: 'particle-lookup-sampler-non-filtering',
+            minFilter: 'nearest',
+            magFilter: 'nearest',
+            addressModeU: 'clamp-to-edge',
+        });
+        // Allocate textures for modules that need them.
+        for (const slot of slots) {
+            const c = slot.contribution;
+            if (!c.textures)
+                continue;
+            for (const t of c.textures) {
+                const tex = device.createTexture({
+                    label: `particle-tex-${c.key}-${t.name}`,
+                    size: { width: 256, height: 1, depthOrArrayLayers: 1 },
+                    format: t.format,
+                    usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST,
+                    dimension: '1d',
+                });
+                this._moduleTextures.set(`${c.key}_${t.name}`, tex);
+            }
+        }
+        const wgsl = this._buildShader(slots);
+        const bindGroup0Layout = this._buildBindGroup0Layout(slots);
+        const bindGroup1Layout = device.createBindGroupLayout({
+            label: 'particle-soa-bgl',
+            entries: [
+                { binding: 0, visibility: GPUShaderStage.COMPUTE, buffer: { type: 'storage' } },
+                { binding: 1, visibility: GPUShaderStage.COMPUTE, buffer: { type: 'storage' } },
+                { binding: 2, visibility: GPUShaderStage.COMPUTE, buffer: { type: 'storage' } },
+                { binding: 3, visibility: GPUShaderStage.COMPUTE, buffer: { type: 'storage' } },
+                { binding: 4, visibility: GPUShaderStage.COMPUTE, buffer: { type: 'storage' } },
+                { binding: 5, visibility: GPUShaderStage.COMPUTE, buffer: { type: 'storage' } },
+                { binding: 6, visibility: GPUShaderStage.COMPUTE, buffer: { type: 'read-only-storage' } }, // textureIndex (matches WGSL `var<storage, read>`)
+                { binding: 7, visibility: GPUShaderStage.COMPUTE, buffer: { type: 'storage' } },
+            ],
+        });
+        const pipelineLayout = device.createPipelineLayout({
+            label: 'particle-compute-layout',
+            bindGroupLayouts: [bindGroup0Layout, bindGroup1Layout],
+        });
+        const shaderModule = device.createShaderModule({
+            label: 'particle-compute-shader',
+            code: wgsl,
+        });
+        this._pipeline = device.createComputePipeline({
+            label: 'particle-compute-pipeline',
+            layout: pipelineLayout,
+            compute: {
+                module: shaderModule,
+                entryPoint: 'main',
+            },
+        });
+        this._bindGroup0 = this._buildBindGroup0(bindGroup0Layout, slots);
+        this._bindGroup1 = device.createBindGroup({
+            label: 'particle-soa-bg',
+            layout: bindGroup1Layout,
+            entries: [
+                { binding: 0, resource: { buffer: this._positions } },
+                { binding: 1, resource: { buffer: this._velocities } },
+                { binding: 2, resource: { buffer: this._scales } },
+                { binding: 3, resource: { buffer: this._rotInfo } },
+                { binding: 4, resource: { buffer: this._timing } },
+                { binding: 5, resource: { buffer: this._color } },
+                { binding: 6, resource: { buffer: this._textureIndex } },
+                { binding: 7, resource: { buffer: this.instanceBuffer } },
+            ],
+        });
+        // Modules upload their lookup textures.
+        for (const slot of slots) {
+            if (!slot.module.uploadTextures)
+                continue;
+            const moduleTextures = new Map();
+            for (const t of slot.contribution.textures ?? []) {
+                const tex = this._moduleTextures.get(`${slot.contribution.key}_${t.name}`);
+                if (tex !== undefined) {
+                    moduleTextures.set(t.name, tex);
+                }
+            }
+            slot.module.uploadTextures(device, moduleTextures);
+        }
     }
-    /**
-     * Time remaining before this particle expires, returned via the shared
-     * `Time.temp` scratch value — copy before storing if you need it beyond
-     * the current frame.
-     */
-    get remainingLifetime() {
-        return Time.temp.set(this._totalLifetime.milliseconds - this._elapsedLifetime.milliseconds);
+    dispatch(system, dt) {
+        const liveCount = system.liveCount;
+        if (liveCount <= 0) {
+            return;
+        }
+        this._writeSimUniforms(dt, liveCount);
+        this._writeModuleUniforms(dt);
+        const encoder = this.device.createCommandEncoder({ label: 'particle-compute' });
+        const pass = encoder.beginComputePass({ label: 'particle-compute-pass' });
+        pass.setPipeline(this._pipeline);
+        pass.setBindGroup(0, this._bindGroup0);
+        pass.setBindGroup(1, this._bindGroup1);
+        pass.dispatchWorkgroups(Math.ceil(liveCount / workgroupSize));
+        pass.end();
+        this.device.queue.submit([encoder.finish()]);
     }
-    /**
-     * Fraction of total lifetime already elapsed, in [0, 1]. Used by
-     * {@link ColorAffector} as the interpolation factor for tint blending.
-     */
-    get elapsedRatio() {
-        return this._elapsedLifetime.milliseconds / this._totalLifetime.milliseconds;
+    destroy() {
+        this._positions.destroy();
+        this._velocities.destroy();
+        this._scales.destroy();
+        this._rotInfo.destroy();
+        this._timing.destroy();
+        this._color.destroy();
+        this._textureIndex.destroy();
+        this.instanceBuffer.destroy();
+        this._simUniformBuffer.destroy();
+        this._framesUniformBuffer.destroy();
+        this._moduleUniformBuffer?.destroy();
+        for (const tex of this._moduleTextures.values()) {
+            tex.destroy();
+        }
+        this._moduleTextures.clear();
+    }
+    _writeFrames(frames, texture) {
+        const view = this._framesUniformView;
+        const w = texture.width;
+        const h = texture.height;
+        const flipY = texture.flipY;
+        if (frames.length === 0) {
+            // Single-frame fallback — full texture.
+            view[0] = 0;
+            view[1] = flipY ? 1 : 0;
+            view[2] = 1;
+            view[3] = flipY ? 0 : 1;
+        }
+        else {
+            for (let i = 0; i < frames.length; i++) {
+                const f = frames[i];
+                const o = i * 4;
+                const minU = f.left / w;
+                const maxU = f.right / w;
+                const topV = f.top / h;
+                const bottomV = f.bottom / h;
+                view[o + 0] = minU;
+                view[o + 1] = flipY ? bottomV : topV;
+                view[o + 2] = maxU;
+                view[o + 3] = flipY ? topV : bottomV;
+            }
+        }
+        this.device.queue.writeBuffer(this._framesUniformBuffer, 0, this._framesUniformData);
+    }
+    /**
+     * Push the listed CPU SoA slots to the GPU. Called by `ParticleSystem`
+     * with newly-spawned slots and just-expired slots (lifetime sentinel).
+     * Slots not in the dirty set are left alone — GPU keeps the integrated
+     * state from previous compute dispatches.
+     *
+     * Each dirty slot triggers 7 small `queue.writeBuffer` calls (one per
+     * SoA channel). For typical spawn rates (≤200/s) this is negligible
+     * (≤1400 calls/s); contiguous-range batching is a future optimisation.
+     */
+    uploadDirty(system, slots) {
+        const queue = this.device.queue;
+        const scratch2 = this._dirtyScratchVec2;
+        const scratch1 = this._dirtyScratchU32;
+        for (const slot of slots) {
+            const byteOffset2 = slot * 8;
+            const byteOffset1 = slot * 4;
+            scratch2[0] = system.posX[slot];
+            scratch2[1] = system.posY[slot];
+            queue.writeBuffer(this._positions, byteOffset2, scratch2.buffer, 0, 8);
+            scratch2[0] = system.velX[slot];
+            scratch2[1] = system.velY[slot];
+            queue.writeBuffer(this._velocities, byteOffset2, scratch2.buffer, 0, 8);
+            scratch2[0] = system.scaleX[slot];
+            scratch2[1] = system.scaleY[slot];
+            queue.writeBuffer(this._scales, byteOffset2, scratch2.buffer, 0, 8);
+            scratch2[0] = system.rotations[slot];
+            scratch2[1] = system.rotationSpeeds[slot];
+            queue.writeBuffer(this._rotInfo, byteOffset2, scratch2.buffer, 0, 8);
+            scratch2[0] = system.elapsed[slot];
+            scratch2[1] = system.lifetime[slot];
+            queue.writeBuffer(this._timing, byteOffset2, scratch2.buffer, 0, 8);
+            scratch1[0] = system.color[slot];
+            queue.writeBuffer(this._color, byteOffset1, scratch1.buffer, 0, 4);
+            scratch1[0] = system.textureIndex[slot];
+            queue.writeBuffer(this._textureIndex, byteOffset1, scratch1.buffer, 0, 4);
+        }
+    }
+    _dirtyScratchVec2 = new Float32Array(2);
+    _dirtyScratchU32 = new Uint32Array(1);
+    _writeSimUniforms(dt, liveCount) {
+        this._simUniformView.setFloat32(0, dt, true);
+        this._simUniformView.setUint32(4, liveCount, true);
+        this.device.queue.writeBuffer(this._simUniformBuffer, 0, this._simUniformData);
+    }
+    _writeModuleUniforms(dt) {
+        if (this._moduleUniformView === null || this._moduleUniformBuffer === null || this._moduleUniformData === null) {
+            return;
+        }
+        for (const slot of this._moduleSlots) {
+            slot.module.writeUniforms?.(this._moduleUniformView, slot.uniformByteOffset, dt);
+        }
+        this.device.queue.writeBuffer(this._moduleUniformBuffer, 0, this._moduleUniformData);
     }
-    /** Fraction of total lifetime still remaining, in [0, 1]. */
-    get remainingRatio() {
-        return this.remainingLifetime.milliseconds / this._totalLifetime.milliseconds;
+    _buildBindGroup0Layout(slots) {
+        const entries = [
+            { binding: 0, visibility: GPUShaderStage.COMPUTE, buffer: { type: 'uniform' } },
+            { binding: 1, visibility: GPUShaderStage.COMPUTE, buffer: { type: 'uniform' } },
+        ];
+        if (this._moduleUniformBuffer !== null) {
+            entries.push({ binding: 2, visibility: GPUShaderStage.COMPUTE, buffer: { type: 'uniform' } });
+        }
+        let textureBindingIdx = this._moduleUniformBuffer !== null ? 3 : 2;
+        for (const slot of slots) {
+            for (const t of slot.contribution.textures ?? []) {
+                const filterable = t.format !== 'r32float';
+                entries.push({
+                    binding: textureBindingIdx++,
+                    visibility: GPUShaderStage.COMPUTE,
+                    texture: {
+                        viewDimension: '1d',
+                        sampleType: filterable ? 'float' : 'unfilterable-float',
+                    },
+                });
+                entries.push({
+                    binding: textureBindingIdx++,
+                    visibility: GPUShaderStage.COMPUTE,
+                    sampler: { type: filterable ? 'filtering' : 'non-filtering' },
+                });
+            }
+        }
+        return this.device.createBindGroupLayout({ label: 'particle-uniforms-bgl', entries });
     }
-    /**
-     * Returns `true` once `elapsedLifetime` exceeds `totalLifetime`. Expired
-     * particles are moved to the graveyard by {@link ParticleSystem.update}
-     * before affectors run.
-     */
-    get expired() {
-        return this._elapsedLifetime.greaterThan(this._totalLifetime);
+    _buildBindGroup0(layout, slots) {
+        const entries = [
+            { binding: 0, resource: { buffer: this._simUniformBuffer } },
+            { binding: 1, resource: { buffer: this._framesUniformBuffer } },
+        ];
+        if (this._moduleUniformBuffer !== null) {
+            entries.push({ binding: 2, resource: { buffer: this._moduleUniformBuffer } });
+        }
+        let textureBindingIdx = this._moduleUniformBuffer !== null ? 3 : 2;
+        for (const slot of slots) {
+            for (const t of slot.contribution.textures ?? []) {
+                const tex = this._moduleTextures.get(`${slot.contribution.key}_${t.name}`);
+                const filterable = t.format !== 'r32float';
+                const sampler = filterable ? this._samplerFiltering : this._samplerNonFiltering;
+                entries.push({ binding: textureBindingIdx++, resource: tex.createView({ dimension: '1d' }) });
+                entries.push({ binding: textureBindingIdx++, resource: sampler });
+            }
+        }
+        return this.device.createBindGroup({ label: 'particle-uniforms-bg', layout, entries });
+    }
+    _buildShader(slots) {
+        const sections = [];
+        sections.push(`
+struct SimUniforms {
+    dt: f32,
+    liveCount: u32,
+    _pad0: u32,
+    _pad1: u32,
+}
+
+struct FrameUniforms {
+    frames: array<vec4<f32>, ${this._frameCount}>,
+}
+
+@group(0) @binding(0) var<uniform> sim: SimUniforms;
+@group(0) @binding(1) var<uniform> frameUv: FrameUniforms;
+        `);
+        const moduleStructFields = [];
+        for (const slot of slots) {
+            const c = slot.contribution;
+            const fields = c.uniforms ?? [];
+            if (fields.length === 0) {
+                continue;
+            }
+            sections.push(this._renderModuleStruct(c.key, fields));
+            moduleStructFields.push(`u_${c.key}: ${c.key}Uniforms,`);
+        }
+        if (moduleStructFields.length > 0) {
+            sections.push(`
+struct ModuleUniforms {
+${moduleStructFields.map((s) => `    ${s}`).join('\n')}
+}
+
+@group(0) @binding(2) var<uniform> modules: ModuleUniforms;
+            `);
+        }
+        let textureBindingIdx = moduleStructFields.length > 0 ? 3 : 2;
+        for (const slot of slots) {
+            for (const t of slot.contribution.textures ?? []) {
+                sections.push(`
+@group(0) @binding(${textureBindingIdx++}) var u_${slot.contribution.key}_${t.name}: texture_1d<f32>;
+@group(0) @binding(${textureBindingIdx++}) var u_${slot.contribution.key}_${t.name}_sampler: sampler;
+                `);
+            }
+        }
+        sections.push(`
+@group(1) @binding(0) var<storage, read_write> positions: array<vec2<f32>>;
+@group(1) @binding(1) var<storage, read_write> velocities: array<vec2<f32>>;
+@group(1) @binding(2) var<storage, read_write> scales: array<vec2<f32>>;
+@group(1) @binding(3) var<storage, read_write> rotInfo: array<vec2<f32>>;
+@group(1) @binding(4) var<storage, read_write> timing: array<vec2<f32>>;
+@group(1) @binding(5) var<storage, read_write> color: array<u32>;
+@group(1) @binding(6) var<storage, read>       textureIndex: array<u32>;
+@group(1) @binding(7) var<storage, read_write> instanceOutput: array<u32>;
+        `);
+        // Module preludes (helper functions/constants). Concatenated in
+        // registration order; modules sharing the same key are emitted only
+        // once (the contribution body strings are still inlined per-instance,
+        // but the prelude function definitions can't be duplicated).
+        const seenPreludeKeys = new Set();
+        for (const slot of slots) {
+            const prelude = slot.contribution.prelude;
+            if (prelude === undefined || prelude.trim() === '')
+                continue;
+            if (seenPreludeKeys.has(slot.contribution.key))
+                continue;
+            seenPreludeKeys.add(slot.contribution.key);
+            sections.push(prelude);
+        }
+        const moduleBodies = slots.map((s) => s.contribution.body).join('\n');
+        const frameCountConst = this._frameCount;
+        sections.push(`
+@compute @workgroup_size(${workgroupSize})
+fn main(@builtin(global_invocation_id) gid: vec3<u32>) {
+    let idx = gid.x;
+    if (idx >= sim.liveCount) { return; }
+
+    let dt = sim.dt;
+
+    // Skip dead particles (lifetime sentinel < 0). Write zero-scale instance
+    // so the renderer doesn't accidentally draw them.
+    if (timing[idx].y < 0.0) {
+        let outBaseDead = idx * 10u;
+        for (var k: u32 = 0u; k < 10u; k++) { instanceOutput[outBaseDead + k] = 0u; }
+        return;
     }
-    /**
-     * Bulk-copies every field from `options` into this particle, replacing all
-     * previous state. Called immediately after {@link ParticleSystem.requestParticle}
-     * to configure a recycled particle for reuse.
-     */
-    applyOptions(options) {
-        const { totalLifetime, elapsedLifetime, position, velocity, scale, tint, rotation, rotationSpeed, textureIndex, } = options;
-        this._totalLifetime.copy(totalLifetime);
-        this._elapsedLifetime.copy(elapsedLifetime);
-        this._position.copy(position);
-        this._velocity.copy(velocity);
-        this._scale.copy(scale);
-        this._tint.copy(tint);
-        this._rotation = rotation;
-        this._rotationSpeed = rotationSpeed;
-        this._textureIndex = textureIndex;
-        return this;
+
+    // Integration.
+    positions[idx] = positions[idx] + velocities[idx] * dt;
+    rotInfo[idx].x = rotInfo[idx].x + rotInfo[idx].y * dt;
+    timing[idx].x = timing[idx].x + dt;
+
+    // Module bodies (in registration order).
+${moduleBodies}
+
+    // Resolve frame UVs.
+    let frameIndex = min(textureIndex[idx], ${frameCountConst}u - 1u);
+    let frameUvBounds = frameUv.frames[frameIndex];
+
+    // Pack interleaved instance data (10 u32s per particle):
+    //   x, y, scaleX, scaleY, rotation (f32×5) + color (u32) + uvMin.xy (f32×2) + uvMax.xy (f32×2)
+    let outBase = idx * 10u;
+    instanceOutput[outBase + 0u] = bitcast<u32>(positions[idx].x);
+    instanceOutput[outBase + 1u] = bitcast<u32>(positions[idx].y);
+    instanceOutput[outBase + 2u] = bitcast<u32>(scales[idx].x);
+    instanceOutput[outBase + 3u] = bitcast<u32>(scales[idx].y);
+    instanceOutput[outBase + 4u] = bitcast<u32>(rotInfo[idx].x);
+    instanceOutput[outBase + 5u] = color[idx];
+    instanceOutput[outBase + 6u] = bitcast<u32>(frameUvBounds.x);
+    instanceOutput[outBase + 7u] = bitcast<u32>(frameUvBounds.y);
+    instanceOutput[outBase + 8u] = bitcast<u32>(frameUvBounds.z);
+    instanceOutput[outBase + 9u] = bitcast<u32>(frameUvBounds.w);
+}
+        `);
+        return sections.join('\n\n');
     }
-    /**
-     * Destroys all owned value objects. Called by
-     * {@link ParticleSystem.clearParticles} when the pool is flushed entirely.
-     * Do not call on individual particles mid-simulation; let the system
-     * recycle them via the graveyard instead.
-     */
-    destroy() {
-        this._totalLifetime.destroy();
-        this._elapsedLifetime.destroy();
-        this._position.destroy();
-        this._velocity.destroy();
-        this._scale.destroy();
-        this._tint.destroy();
+    _renderModuleStruct(key, fields) {
+        const lines = fields.map((f) => `    ${f.name}: ${f.type},`).join('\n');
+        return `struct ${key}Uniforms {\n${lines}\n}`;
     }
 }
 
+/// <reference types="@webgpu/types" />
+const defaultCapacity = 4096;
+/**
+ * Lazily-initialised 1×1 opaque-white texture used as the default sprite
+ * when a {@link ParticleSystem} is constructed without one. Particles
+ * render as solid color quads (the per-particle `color` channel times
+ * white-with-alpha-1). Shared across systems to avoid wasted texture
+ * allocations.
+ */
+let defaultWhiteTexture = null;
+const getDefaultWhiteTexture = () => {
+    if (defaultWhiteTexture === null) {
+        const canvas = document.createElement('canvas');
+        canvas.width = 1;
+        canvas.height = 1;
+        const ctx = canvas.getContext('2d');
+        if (ctx !== null) {
+            ctx.fillStyle = '#ffffff';
+            ctx.fillRect(0, 0, 1, 1);
+        }
+        defaultWhiteTexture = new Texture(canvas);
+    }
+    return defaultWhiteTexture;
+};
 /**
- * The central coordinator of the particle triad. `ParticleSystem` is a
- * {@link Drawable} that owns a list of {@link ParticleEmitter} spawners, a
- * list of {@link ParticleAffector} mutators, and the live/graveyard particle
- * pools. Each call to {@link ParticleSystem.update} runs all emitters to
- * spawn new particles, advances every live particle's position and lifetime,
- * retires expired ones to the graveyard for pooling, and runs all affectors
- * on the survivors.
+ * The central coordinator of the particle pipeline. `ParticleSystem` is a
+ * {@link Drawable} that owns:
+ *
+ * - **SoA particle storage** — one typed array per attribute (position,
+ *   velocity, scale, rotation, color, lifetime, ...), sized to a fixed
+ *   capacity at construction. User code reads/writes via
+ *   `system.posX[slot]`, `system.velX[slot]`, etc.
+ * - **Spawn modules** — write new particles into freshly allocated slots.
+ * - **Update modules** — mutate the live range each frame (forces, color
+ *   blends, scale curves, drag, ...). Built-in modules ship both CPU and
+ *   WGSL implementations; custom modules can opt into GPU acceleration by
+ *   implementing `wgsl()`.
+ * - **Death modules** — fire once per dying particle, before its slot is
+ *   recycled (sub-emitters, event hooks).
+ *
+ * **Auto-routing CPU vs GPU:** at first {@link update}, the system checks:
+ * if a `WebGpuBackend` was supplied AND every registered update module has
+ * `wgsl()`, the GPU path engages — a composite compute pipeline runs
+ * integration plus all module bodies in one dispatch and writes directly
+ * into the renderer's instance buffer (no CPU readback). Otherwise the CPU
+ * path runs the existing per-module `apply()` loops.
+ *
+ * **Per-frame order in {@link update} (CPU mode):**
+ * 1. Run every spawn module.
+ * 2. Integrate position from velocity, rotation from rotationSpeed, advance `elapsed`.
+ * 3. Run every update module on the live range.
+ * 4. Compact: scan `[0, liveCount)` forward, fire death modules on expired
+ *    slots, copy survivors down. `liveCount` shrinks to the survivor count.
+ *
+ * **Per-frame order in {@link update} (GPU mode):**
+ * 1. Run every spawn module (CPU writes initial values into the spawn slot).
+ * 2. Detect expiries on CPU (via `elapsed >= lifetime`); fire death modules;
+ *    set `lifetime[slot] = -1` sentinel + clear `alive[slot]` so the GPU
+ *    shader skips them. **No compaction** — slots are recycled on next spawn.
+ * 3. Dispatch the composite compute pipeline. Integration + update modules
+ *    + pack-instances run in one pass; the instance buffer is written
+ *    directly. CPU SoA stays as-is for spawn writes.
+ *
+ * **Coordinate space:** particle positions are LOCAL to the system. The
+ * system's `getGlobalTransform()` is applied on top during rendering — both
+ * the WebGL2 and WebGPU shaders multiply `projection * translation * rotated`.
+ * Setting world-space positions on individual particles double-translates.
+ * Position the system itself via `system.setPosition(...)` and emit relative
+ * to `(0, 0)`.
+ *
+ * @example
+ * // Backend-agnostic — runs CPU on WebGL2, GPU on WebGPU automatically.
+ * const system = new ParticleSystem(loader.get(Texture, 'spark'), {
+ *     capacity: 8192,
+ *     backend: app.backend,
+ * });
  *
- * Rendering reads {@link ParticleSystem.vertices} and
- * {@link ParticleSystem.texCoords} (lazily recomputed on texture-frame
- * changes) plus the live {@link ParticleSystem.particles} array to draw each
- * sprite.
+ * system.addSpawnModule(new RateSpawn({ rate: new Constant(60), ... }));
+ * system.addUpdateModule(new ApplyForce(0, 980));     // gravity, GPU-eligible
+ * system.addUpdateModule(new ColorOverLifetime(fireGradient));
+ * scene.addChild(system);
  */
 class ParticleSystem extends Drawable {
-    _emitters = [];
-    _affectors = [];
-    _particles = [];
-    _graveyard = [];
+    /** Maximum particle count this system will store. Fixed at construction. */
+    capacity;
+    posX;
+    posY;
+    velX;
+    velY;
+    scaleX;
+    scaleY;
+    rotations;
+    rotationSpeeds;
+    color; // packed 0xAABBGGRR
+    elapsed; // seconds since spawn
+    lifetime; // total seconds before expiry; -1 sentinel for dead in GPU mode
+    textureIndex;
+    /**
+     * Number of currently live particles. In CPU mode this is exact: slots
+     * `[0, liveCount)` are all alive after each `update()`. In GPU mode
+     * this is a high-water mark — slots `[0, liveCount)` may contain dead
+     * holes (filled in by future spawns); use {@link aliveCount} for the
+     * actual alive count.
+     */
+    liveCount = 0;
+    /**
+     * Per-slot alive flag (1 = alive, 0 = dead). Maintained in both CPU
+     * and GPU mode. Custom modules iterating the live range should check
+     * this to skip dead slots in GPU mode.
+     */
+    alive;
+    _spawnModules = [];
+    _updateModules = [];
+    _deathModules = [];
+    _backend = null;
+    _device = null;
+    _gpuState = null;
+    _gpuMode = false;
+    _compiled = false;
+    _spawnHint = 0; // round-robin pointer for first-dead lookup in GPU mode
+    /**
+     * In GPU mode, slots whose CPU SoA values need re-uploading to the GPU
+     * (newly spawned, or just-expired with lifetime sentinel). Cleared
+     * after each compute dispatch. CPU never overwrites integrated GPU
+     * state — only dirty slots flow CPU → GPU.
+     */
+    _gpuDirtySlots = new Set();
     _texture;
+    _frames = [];
     _textureFrame = new Rectangle();
     _vertices = new Float32Array(4);
     _texCoords = new Uint32Array(4);
     _updateTexCoords = true;
     _updateVertices = true;
-    constructor(texture) {
+    constructor(arg1, arg2, arg3) {
         super();
-        this._texture = texture;
+        // Disambiguate the four valid call shapes via instanceof checks.
+        // The TS overloads above already prevent illegal combinations like
+        // `(texture, sheet)` or `(sheet, frames)` at compile time; this
+        // narrowing only sorts out the legal ones.
+        let texture = null;
+        let frames = null;
+        let options = {};
+        if (arg1 instanceof Texture) {
+            texture = arg1;
+            if (Array.isArray(arg2)) {
+                frames = arg2;
+                options = arg3 ?? {};
+            }
+            else {
+                options = arg2 ?? {};
+            }
+        }
+        else if (arg1 instanceof Spritesheet) {
+            texture = arg1.texture;
+            frames = [...arg1.frames.values()];
+            options = arg2 ?? {};
+        }
+        else {
+            options = arg1 ?? {};
+        }
+        const capacity = options.capacity ?? defaultCapacity;
+        if (capacity <= 0 || !Number.isInteger(capacity)) {
+            throw new Error(`ParticleSystem capacity must be a positive integer (got ${capacity}).`);
+        }
+        this.capacity = capacity;
+        this.posX = new Float32Array(capacity);
+        this.posY = new Float32Array(capacity);
+        this.velX = new Float32Array(capacity);
+        this.velY = new Float32Array(capacity);
+        this.scaleX = new Float32Array(capacity);
+        this.scaleY = new Float32Array(capacity);
+        this.rotations = new Float32Array(capacity);
+        this.rotationSpeeds = new Float32Array(capacity);
+        this.color = new Uint32Array(capacity);
+        this.elapsed = new Float32Array(capacity);
+        this.lifetime = new Float32Array(capacity);
+        this.textureIndex = new Uint16Array(capacity);
+        this.alive = new Uint8Array(capacity);
+        this._device = options.device ?? null;
+        this._texture = texture ?? getDefaultWhiteTexture();
+        if (frames !== null) {
+            for (const frame of frames) {
+                this._frames.push(frame.clone());
+            }
+        }
         this.resetTextureFrame();
     }
     get texture() {
@@ -9246,11 +9936,17 @@ class ParticleSystem extends Drawable {
         this.setTextureFrame(frame);
     }
     /**
-     * Quad corner offsets for the current {@link textureFrame}, in local
-     * space as `[minX, minY, maxX, maxY]`. Recomputed lazily whenever
-     * `textureFrame` changes. Used by the renderer to position each particle
-     * sprite relative to its world position.
+     * Atlas frames declared on this system, or empty when the texture is
+     * used as a single frame. Each particle's `textureIndex[i]` selects
+     * an entry from this list; out-of-range indices are clamped to 0.
      */
+    get frames() {
+        return this._frames;
+    }
+    /** `true` when the system declares more than one atlas frame. */
+    get hasAtlas() {
+        return this._frames.length > 1;
+    }
     get vertices() {
         if (this._updateVertices) {
             const { x, y, width, height } = this._textureFrame;
@@ -9264,12 +9960,6 @@ class ParticleSystem extends Drawable {
         }
         return this._vertices;
     }
-    /**
-     * Packed UV coordinates for the current {@link textureFrame} as four
-     * `Uint32` values, each encoding a `(u, v)` pair in the upper/lower 16
-     * bits (normalised to 0–65535). Vertex order respects
-     * {@link Texture.flipY}. Recomputed lazily on texture or frame changes.
-     */
     get texCoords() {
         if (this._updateTexCoords) {
             const { width, height } = this._texture;
@@ -9294,27 +9984,32 @@ class ParticleSystem extends Drawable {
         }
         return this._texCoords;
     }
-    get emitters() {
-        return this._emitters;
+    /** `true` when the system is running on the GPU compute pipeline. */
+    get gpuMode() {
+        return this._gpuMode;
     }
-    get affectors() {
-        return this._affectors;
+    /** GPU-side state, or `null` in CPU mode. */
+    get gpuState() {
+        return this._gpuState;
     }
-    get particles() {
-        return this._particles;
+    /** Actual count of live particles (slots with `alive[i] === 1`). May differ from `liveCount` in GPU mode. */
+    get aliveCount() {
+        let count = 0;
+        for (let i = 0; i < this.liveCount; i++) {
+            if (this.alive[i])
+                count++;
+        }
+        return count;
     }
-    /**
-     * Pool of expired {@link Particle} instances waiting to be recycled.
-     * {@link requestParticle} pops from this array before allocating a new
-     * instance, keeping GC pressure low during sustained emission.
-     */
-    get graveyard() {
-        return this._graveyard;
+    get spawnModules() {
+        return this._spawnModules;
+    }
+    get updateModules() {
+        return this._updateModules;
+    }
+    get deathModules() {
+        return this._deathModules;
     }
-    /**
-     * Replaces the particle sprite texture and resets the texture frame to
-     * cover the full new texture. No-ops if `texture` is the same instance.
-     */
     setTexture(texture) {
         if (this._texture !== texture) {
             this._texture = texture;
@@ -9322,11 +10017,6 @@ class ParticleSystem extends Drawable {
         }
         return this;
     }
-    /**
-     * Sets the sub-rectangle of the texture used as the particle sprite,
-     * invalidating cached vertices and UV coordinates and updating the system's
-     * local bounds to match the frame dimensions.
-     */
     setTextureFrame(frame) {
         this._textureFrame.copy(frame);
         this._updateTexCoords = true;
@@ -9335,122 +10025,275 @@ class ParticleSystem extends Drawable {
         this._invalidateBoundsCascade();
         return this;
     }
-    /** Resets the texture frame to the full dimensions of the current texture. */
     resetTextureFrame() {
         return this.setTextureFrame(Rectangle.temp.set(0, 0, this._texture.width, this._texture.height));
     }
-    /** Registers `emitter` to be called each tick during {@link update}. */
-    addEmitter(emitter) {
-        this._emitters.push(emitter);
+    addSpawnModule(mod) {
+        this._spawnModules.push(mod);
         return this;
     }
-    /** Destroys and removes all registered emitters. */
-    clearEmitters() {
-        for (const emitter of this._emitters) {
-            emitter.destroy();
+    addUpdateModule(mod) {
+        if (this._compiled) {
+            throw new Error('Cannot add update modules after the system has been compiled (first update). Register all modules before the first update().');
         }
-        this._emitters.length = 0;
+        this._updateModules.push(mod);
         return this;
     }
-    /** Registers `affector` to run on every live particle each tick during {@link update}. */
-    addAffector(affector) {
-        this._affectors.push(affector);
+    addDeathModule(mod) {
+        this._deathModules.push(mod);
         return this;
     }
-    /** Destroys and removes all registered affectors. */
-    clearAffectors() {
-        for (const affector of this._affectors) {
-            affector.destroy();
-        }
-        this._affectors.length = 0;
+    clearSpawnModules() {
+        for (const mod of this._spawnModules)
+            mod.destroy();
+        this._spawnModules.length = 0;
         return this;
     }
-    /**
-     * Returns a recycled particle from the {@link graveyard}, or allocates a
-     * new one if the pool is empty. Call {@link Particle.applyOptions}
-     * immediately after to reset its state before passing it to
-     * {@link emitParticle}.
-     */
-    requestParticle() {
-        return this._graveyard.pop() || new Particle();
-    }
-    /** Adds a fully-configured `particle` to the live pool. Typically called by emitters. */
-    emitParticle(particle) {
-        this._particles.push(particle);
+    clearUpdateModules() {
+        for (const mod of this._updateModules)
+            mod.destroy();
+        this._updateModules.length = 0;
         return this;
     }
-    /**
-     * Advances a single particle by one `delta` step: increments
-     * `elapsedLifetime`, integrates velocity into position, and applies
-     * `rotationSpeed` to rotation. Called for every live particle by
-     * {@link update} before the affector pass.
-     */
-    updateParticle(particle, delta) {
-        const seconds = delta.seconds;
-        particle.elapsedLifetime.addTime(delta);
-        particle.position.add(seconds * particle.velocity.x, seconds * particle.velocity.y);
-        particle.rotation += (seconds * particle.rotationSpeed);
+    clearDeathModules() {
+        for (const mod of this._deathModules)
+            mod.destroy();
+        this._deathModules.length = 0;
         return this;
     }
     /**
-     * Destroys and removes all particles from both the live pool and the
-     * graveyard. Use when resetting or recycling the entire system.
+     * Allocates a particle slot and returns its index. Returns `-1` when
+     * the system is at {@link capacity}.
+     *
+     * **CPU mode:** slots are dense in `[0, liveCount)`. `spawn()` returns
+     * the next sequential slot; `liveCount++`.
+     *
+     * **GPU mode:** slots may have dead holes. `spawn()` finds the first
+     * `alive[i] === 0` slot via a round-robin hint pointer (amortised O(1),
+     * worst case O(capacity) on full systems).
      */
-    clearParticles() {
-        for (const particle of this._particles) {
-            particle.destroy();
-        }
-        for (const particle of this._graveyard) {
-            particle.destroy();
+    spawn() {
+        if (this._gpuMode) {
+            return this._spawnGpu();
         }
-        this._particles.length = 0;
-        this._graveyard.length = 0;
+        return this._spawnCpu();
+    }
+    /** Resets the system to zero live particles without destroying it. */
+    clearParticles() {
+        this.liveCount = 0;
+        this._spawnHint = 0;
+        this.alive.fill(0);
+        this.lifetime.fill(0);
+        this.elapsed.fill(0);
         return this;
     }
     /**
-     * Advances the full simulation by one `delta` step: runs all emitters,
-     * then for each live particle calls {@link updateParticle}, moves expired
-     * ones to the {@link graveyard}, and runs all affectors on survivors.
-     * The particle array is iterated in reverse to allow in-place splice
-     * without re-indexing.
+     * Engine-side render hook. Captures the active backend on each call so
+     * the next `update()` can compile a GPU pipeline if the backend turned
+     * out to be `WebGpuBackend`. Re-captures and rebuilds when the backend
+     * reference changes (e.g. after device-loss recovery).
      */
-    update(delta) {
-        const emitters = this._emitters;
-        const affectors = this._affectors;
-        const particles = this._particles;
-        const graveyard = this._graveyard;
-        const len = particles.length;
-        for (const emitter of emitters) {
-            emitter.apply(this, delta);
-        }
-        let expireCount = 0;
-        for (let i = len - 1; i >= 0; i--) {
-            this.updateParticle(particles[i], delta);
-            if (particles[i].expired) {
-                graveyard.push(particles[i]);
-                expireCount++;
-                continue;
-            }
-            if (expireCount > 0) {
-                particles.splice(i + 1, expireCount);
-                expireCount = 0;
-            }
-            for (const affector of affectors) {
-                affector.apply(particles[i], delta);
+    render(backend) {
+        if (this._backend !== backend) {
+            this._backend = backend;
+            if (this._gpuState !== null) {
+                this._gpuState.destroy();
+                this._gpuState = null;
             }
+            this._gpuMode = false;
+            this._compiled = false;
+        }
+        return super.render(backend);
+    }
+    /** Per-frame entry point. Routes to CPU or GPU pipeline based on auto-detection at first call. */
+    update(delta) {
+        if (!this._compiled) {
+            this._compile();
         }
-        if (expireCount > 0) {
-            particles.splice(0, expireCount);
+        const dt = delta.seconds;
+        // 1. Spawn (CPU writes SoA in both modes).
+        for (let i = 0; i < this._spawnModules.length; i++) {
+            this._spawnModules[i].apply(this, dt);
+        }
+        if (this._gpuMode) {
+            this._updateGpu(dt);
+        }
+        else {
+            this._updateCpu(dt);
         }
         return this;
     }
     destroy() {
         super.destroy();
-        this.clearEmitters();
-        this.clearAffectors();
-        this.clearParticles();
+        this.clearSpawnModules();
+        this.clearUpdateModules();
+        this.clearDeathModules();
+        if (this._gpuState !== null) {
+            this._gpuState.destroy();
+            this._gpuState = null;
+        }
+        for (const frame of this._frames) {
+            frame.destroy();
+        }
+        this._frames.length = 0;
+        this._gpuMode = false;
+        this._compiled = false;
+        this.liveCount = 0;
+        this.alive.fill(0);
         this._textureFrame.destroy();
     }
+    _compile() {
+        this._compiled = true;
+        // Duck-typed `instanceof WebGpuBackend` — avoids importing the
+        // backend class (which registers a renderer for ParticleSystem
+        // and would create a circular dependency). WebGl2Backend has no
+        // `device` field, so this naturally falls back to CPU mode.
+        const backendDevice = this._backend?.device ?? null;
+        const device = this._device ?? backendDevice;
+        if (device === null) {
+            return;
+        }
+        const allEligible = this._updateModules.every((m) => typeof m.wgsl === 'function');
+        if (!allEligible) {
+            return;
+        }
+        this._gpuState = new ParticleGpuState(device, this.capacity, this._updateModules, this._frames, this._texture);
+        this._gpuMode = true;
+        // Mark every currently-alive slot dirty so the initial upload
+        // matches CPU state; subsequent frames only push deltas.
+        for (let i = 0; i < this.liveCount; i++) {
+            if (this.alive[i])
+                this._gpuDirtySlots.add(i);
+        }
+    }
+    _spawnCpu() {
+        if (this.liveCount >= this.capacity) {
+            return -1;
+        }
+        const slot = this.liveCount++;
+        this.alive[slot] = 1;
+        this.elapsed[slot] = 0;
+        return slot;
+    }
+    _spawnGpu() {
+        const capacity = this.capacity;
+        const alive = this.alive;
+        const start = this._spawnHint;
+        // Search forward from hint, then wrap.
+        for (let i = start; i < capacity; i++) {
+            if (alive[i] === 0) {
+                alive[i] = 1;
+                this.elapsed[i] = 0;
+                this._spawnHint = i + 1 === capacity ? 0 : i + 1;
+                if (i >= this.liveCount)
+                    this.liveCount = i + 1;
+                this._gpuDirtySlots.add(i);
+                return i;
+            }
+        }
+        for (let i = 0; i < start; i++) {
+            if (alive[i] === 0) {
+                alive[i] = 1;
+                this.elapsed[i] = 0;
+                this._spawnHint = i + 1;
+                if (i >= this.liveCount)
+                    this.liveCount = i + 1;
+                this._gpuDirtySlots.add(i);
+                return i;
+            }
+        }
+        return -1;
+    }
+    _updateCpu(dt) {
+        const { posX, posY, velX, velY, rotations, rotationSpeeds, elapsed } = this;
+        const liveCount = this.liveCount;
+        for (let i = 0; i < liveCount; i++) {
+            posX[i] += velX[i] * dt;
+            posY[i] += velY[i] * dt;
+            rotations[i] += rotationSpeeds[i] * dt;
+            elapsed[i] += dt;
+        }
+        for (let i = 0; i < this._updateModules.length; i++) {
+            this._updateModules[i].apply(this, dt);
+        }
+        // Compact: forward pass, fire death modules on expired, copy survivors down.
+        const lifetime = this.lifetime;
+        const alive = this.alive;
+        const deathModules = this._deathModules;
+        let writeIndex = 0;
+        for (let readIndex = 0; readIndex < this.liveCount; readIndex++) {
+            if (elapsed[readIndex] >= lifetime[readIndex]) {
+                for (let m = 0; m < deathModules.length; m++) {
+                    deathModules[m].onDeath(this, readIndex);
+                }
+                alive[readIndex] = 0;
+                continue;
+            }
+            if (writeIndex !== readIndex) {
+                this._copySlot(readIndex, writeIndex);
+                alive[writeIndex] = 1;
+            }
+            writeIndex++;
+        }
+        for (let i = writeIndex; i < this.liveCount; i++) {
+            alive[i] = 0;
+        }
+        this.liveCount = writeIndex;
+    }
+    _updateGpu(dt) {
+        // CPU advances its own copy of `elapsed` for expire detection only.
+        // GPU's `timing[idx].x` is advanced independently inside the compute
+        // shader; the two are never synced after spawn. They tick at the
+        // same rate (both add `dt` per frame) so they stay equivalent in
+        // practice (modulo numerical drift).
+        const elapsed = this.elapsed;
+        const lifetime = this.lifetime;
+        const alive = this.alive;
+        const deathModules = this._deathModules;
+        const liveCount = this.liveCount;
+        for (let i = 0; i < liveCount; i++) {
+            if (alive[i] === 0)
+                continue;
+            elapsed[i] += dt;
+            if (elapsed[i] >= lifetime[i]) {
+                for (let m = 0; m < deathModules.length; m++) {
+                    deathModules[m].onDeath(this, i);
+                }
+                alive[i] = 0;
+                lifetime[i] = -1; // sentinel — GPU shader skips
+                this._gpuDirtySlots.add(i); // upload the sentinel so GPU sees the death
+            }
+        }
+        // Trim trailing dead slots.
+        let newLiveCount = this.liveCount;
+        while (newLiveCount > 0 && alive[newLiveCount - 1] === 0) {
+            newLiveCount--;
+        }
+        this.liveCount = newLiveCount;
+        // Push dirty slots (new spawns + just-expired) to GPU. CPU is NOT
+        // the source of truth for integrated position/velocity/etc. after
+        // spawn — uploading the full live range every frame would wipe
+        // out GPU's integrated state.
+        if (this._gpuDirtySlots.size > 0) {
+            this._gpuState.uploadDirty(this, this._gpuDirtySlots);
+            this._gpuDirtySlots.clear();
+        }
+        this._gpuState.dispatch(this, dt);
+    }
+    _copySlot(from, to) {
+        this.posX[to] = this.posX[from];
+        this.posY[to] = this.posY[from];
+        this.velX[to] = this.velX[from];
+        this.velY[to] = this.velY[from];
+        this.scaleX[to] = this.scaleX[from];
+        this.scaleY[to] = this.scaleY[from];
+        this.rotations[to] = this.rotations[from];
+        this.rotationSpeeds[to] = this.rotationSpeeds[from];
+        this.color[to] = this.color[from];
+        this.elapsed[to] = this.elapsed[from];
+        this.lifetime[to] = this.lifetime[from];
+        this.textureIndex[to] = this.textureIndex[from];
+    }
 }
 
 /**
@@ -11306,13 +12149,15 @@ var particleTexture: texture_2d<f32>;
 @group(1) @binding(1)
 var particleSampler: sampler;
 
-// Per-instance attributes (one entry per particle, 24 bytes total).
+// Per-instance attributes (one entry per particle, 40 bytes total).
 struct VertexInput {
     @location(0) unitPosition: vec2<f32>,    // per-vertex (static unit quad)
     @location(1) translation: vec2<f32>,
     @location(2) scale: vec2<f32>,
     @location(3) rotation: f32,
     @location(4) color: vec4<f32>,
+    @location(5) uvMin: vec2<f32>,            // pre-resolved frame UV (top-left)
+    @location(6) uvMax: vec2<f32>,            // pre-resolved frame UV (bottom-right)
 };
 
 struct VertexOutput {
@@ -11325,8 +12170,6 @@ struct VertexOutput {
 fn vertexMain(input: VertexInput) -> VertexOutput {
     let quadMin = uniforms.localBounds.xy;
     let quadSize = uniforms.localBounds.zw;
-    let uvMin = uniforms.uvBounds.xy;
-    let uvMax = uniforms.uvBounds.zw;
 
     let localPosition = quadMin + (input.unitPosition * quadSize);
     let radians = radians(input.rotation);
@@ -11340,7 +12183,7 @@ fn vertexMain(input: VertexInput) -> VertexOutput {
     var output: VertexOutput;
 
     output.position = uniforms.projection * uniforms.translation * vec4<f32>(rotated, 0.0, 1.0);
-    output.texcoord = uvMin + ((uvMax - uvMin) * input.unitPosition);
+    output.texcoord = input.uvMin + ((input.uvMax - input.uvMin) * input.unitPosition);
     output.color = vec4(input.color.rgb * input.color.a, input.color.a);
 
     return output;
@@ -11355,8 +12198,8 @@ fn fragmentMain(input: VertexOutput) -> @location(0) vec4<f32> {
 }
 `;
 const staticVertexStrideBytes = 8;
-const instanceWords = 6;
-const instanceStrideBytes = 24;
+const instanceWords = 10;
+const instanceStrideBytes = 40;
 const indicesPerParticle = 6;
 const uniformByteLength = 176;
 const initialParticleCapacity = 1;
@@ -11397,7 +12240,7 @@ class WebGpuParticleRenderer extends AbstractWebGpuRenderer {
             || texture.source === null
             || texture.width === 0
             || texture.height === 0
-            || system.particles.length === 0) {
+            || system.liveCount === 0) {
             return;
         }
         backend.setBlendMode(system.blendMode);
@@ -11459,7 +12302,7 @@ class WebGpuParticleRenderer extends AbstractWebGpuRenderer {
         for (let drawCallIndex = 0; drawCallIndex < this._drawCallCount; drawCallIndex++) {
             const drawCall = this._drawCalls[drawCallIndex];
             const system = drawCall.system;
-            const particleCount = system.particles.length;
+            const particleCount = system.liveCount;
             if (particleCount === 0) {
                 continue;
             }
@@ -11475,10 +12318,21 @@ class WebGpuParticleRenderer extends AbstractWebGpuRenderer {
                         resource: textureBinding.sampler,
                     }],
             });
-            this._ensureCapacity(particleCount);
-            this._writeInstanceData(system.vertices, system.texCoords, system.particles);
             this._writeUniformData(backend, system, drawCall.texture);
-            device.queue.writeBuffer(this._instanceBuffer, 0, this._instanceData, 0, particleCount * instanceStrideBytes);
+            // GPU mode: the system's compute pipeline already wrote the
+            // interleaved instance data into its own buffer. Bind it
+            // directly — no CPU pack, no writeBuffer for instance data.
+            // CPU mode: pack from CPU SoA into our owned instance buffer.
+            let drawInstanceCount = particleCount;
+            const instanceBuffer = (() => {
+                if (system.gpuMode && system.gpuState !== null) {
+                    return system.gpuState.instanceBuffer;
+                }
+                this._ensureCapacity(particleCount);
+                drawInstanceCount = this._writeInstanceData(system);
+                device.queue.writeBuffer(this._instanceBuffer, 0, this._instanceData, 0, drawInstanceCount * instanceStrideBytes);
+                return this._instanceBuffer;
+            })();
             device.queue.writeBuffer(uniformBuffer, 0, this._uniformData.buffer, this._uniformData.byteOffset, this._uniformData.byteLength);
             const encoder = device.createCommandEncoder();
             const pass = encoder.beginRenderPass({
@@ -11492,9 +12346,9 @@ class WebGpuParticleRenderer extends AbstractWebGpuRenderer {
             pass.setPipeline(pipeline);
             pass.setBindGroup(1, textureBindGroup);
             pass.setVertexBuffer(0, staticVertexBuffer);
-            pass.setVertexBuffer(1, this._instanceBuffer);
+            pass.setVertexBuffer(1, instanceBuffer);
             pass.setIndexBuffer(indexBuffer, 'uint16');
-            pass.drawIndexed(indicesPerParticle, particleCount, 0, 0, 0);
+            pass.drawIndexed(indicesPerParticle, drawInstanceCount, 0, 0, 0);
             backend.stats.batches++;
             backend.stats.drawCalls++;
             pass.end();
@@ -11637,17 +12491,82 @@ class WebGpuParticleRenderer extends AbstractWebGpuRenderer {
             uvMinX, uvMinY, uvMaxX, uvMaxY,
         ]);
     }
-    _writeInstanceData(_vertices, _texCoords, particles) {
-        for (let particleIndex = 0; particleIndex < particles.length; particleIndex++) {
-            const particle = particles[particleIndex];
-            const targetIndex = particleIndex * instanceWords;
-            this._float32View[targetIndex + 0] = particle.position.x;
-            this._float32View[targetIndex + 1] = particle.position.y;
-            this._float32View[targetIndex + 2] = particle.scale.x;
-            this._float32View[targetIndex + 3] = particle.scale.y;
-            this._float32View[targetIndex + 4] = particle.rotation;
-            this._uint32View[targetIndex + 5] = particle.tint.toRgba();
-        }
+    _writeInstanceData(system) {
+        const { posX, posY, scaleX, scaleY, rotations, color, textureIndex, alive, liveCount } = system;
+        const f32 = this._float32View;
+        const u32 = this._uint32View;
+        const { uvMins, uvMaxs } = this._computeFrameUvs(system);
+        const frameCount = uvMins.length / 2;
+        let writeIndex = 0;
+        for (let particleIndex = 0; particleIndex < liveCount; particleIndex++) {
+            // Skip dead slots — present in GPU-mode systems where the live
+            // range can carry holes filled in on next spawn.
+            if (alive[particleIndex] === 0) {
+                continue;
+            }
+            const targetIndex = writeIndex * instanceWords;
+            const frame = textureIndex[particleIndex] < frameCount ? textureIndex[particleIndex] : 0;
+            const uvBase = frame * 2;
+            f32[targetIndex + 0] = posX[particleIndex];
+            f32[targetIndex + 1] = posY[particleIndex];
+            f32[targetIndex + 2] = scaleX[particleIndex];
+            f32[targetIndex + 3] = scaleY[particleIndex];
+            f32[targetIndex + 4] = rotations[particleIndex];
+            u32[targetIndex + 5] = color[particleIndex];
+            f32[targetIndex + 6] = uvMins[uvBase + 0];
+            f32[targetIndex + 7] = uvMins[uvBase + 1];
+            f32[targetIndex + 8] = uvMaxs[uvBase + 0];
+            f32[targetIndex + 9] = uvMaxs[uvBase + 1];
+            writeIndex++;
+        }
+        return writeIndex;
+    }
+    /**
+     * Same atlas/UV-resolution as the WebGL2 path. Returns the per-frame
+     * (uvMin, uvMax) pairs derived from `system.frames` (or fallback to
+     * `system.textureFrame` when no atlas is declared), already flipY-
+     * adjusted for the current texture.
+     */
+    _uvMinsScratch = new Float32Array(2);
+    _uvMaxsScratch = new Float32Array(2);
+    _computeFrameUvs(system) {
+        const frames = system.frames;
+        const tex = system.texture;
+        const texW = tex.width;
+        const texH = tex.height;
+        const flipY = tex.flipY;
+        const count = frames.length === 0 ? 1 : frames.length;
+        if (this._uvMinsScratch.length < count * 2) {
+            this._uvMinsScratch = new Float32Array(count * 2);
+            this._uvMaxsScratch = new Float32Array(count * 2);
+        }
+        const mins = this._uvMinsScratch;
+        const maxs = this._uvMaxsScratch;
+        if (frames.length === 0) {
+            const f = system.textureFrame;
+            const minU = f.left / texW;
+            const maxU = f.right / texW;
+            const topV = f.top / texH;
+            const bottomV = f.bottom / texH;
+            mins[0] = minU;
+            mins[1] = flipY ? bottomV : topV;
+            maxs[0] = maxU;
+            maxs[1] = flipY ? topV : bottomV;
+            return { uvMins: mins, uvMaxs: maxs };
+        }
+        for (let i = 0; i < frames.length; i++) {
+            const f = frames[i];
+            const o = i * 2;
+            const minU = f.left / texW;
+            const maxU = f.right / texW;
+            const topV = f.top / texH;
+            const bottomV = f.bottom / texH;
+            mins[o + 0] = minU;
+            mins[o + 1] = flipY ? bottomV : topV;
+            maxs[o + 0] = maxU;
+            maxs[o + 1] = flipY ? topV : bottomV;
+        }
+        return { uvMins: mins, uvMaxs: maxs };
     }
     _getPipeline(blendMode, format) {
         const pipelineKey = `${blendMode}:${format}`;
@@ -11686,6 +12605,14 @@ class WebGpuParticleRenderer extends AbstractWebGpuRenderer {
                                 shaderLocation: 4,
                                 offset: 20,
                                 format: 'unorm8x4',
+                            }, {
+                                shaderLocation: 5,
+                                offset: 24,
+                                format: 'float32x2',
+                            }, {
+                                shaderLocation: 6,
+                                offset: 32,
+                                format: 'float32x2',
                             }],
                     }],
             },
@@ -24309,7 +25236,7 @@ const buildRectangle = (x, y, width, height) => {
 const buildStar = (centerX, centerY, points, radius, innerRadius = radius / 2, rotation = 0) => {
     const startAngle = (Math.PI / -2) + rotation;
     const length = points * 2;
-    const delta = tau / length;
+    const delta = tau$2 / length;
     const path = [];
     for (let i = 0; i < length; i++) {
         const angle = startAngle + (i * delta);
@@ -25381,347 +26308,1438 @@ function* substepSweep(fromX, fromY, deltaX, deltaY, maxStepSize) {
 }
 
 /**
- * Linearly interpolates a particle's {@link Particle.tint} from `fromColor`
- * to `toColor` over the particle's full lifetime. The blend factor is
- * {@link Particle.elapsedRatio} — 0 at birth, 1 at expiry — so the
- * transition is always proportional to how long the particle has lived
- * regardless of delta size.
+ * Distribution that always returns the same value. Implements both
+ * {@link Distribution} and {@link LifetimeFunction} so it can stand in
+ * wherever a randomized or time-parameterised value is expected.
+ *
+ * For mutable types (Vector, Color, ...) the constant value is copied into
+ * `out` if provided, otherwise the constructor's value is returned directly.
+ * Mutating that returned reference mutates the distribution's source.
  */
-class ColorAffector {
-    _fromColor;
-    _toColor;
-    constructor(fromColor, toColor) {
-        this._fromColor = fromColor.clone();
-        this._toColor = toColor.clone();
-    }
-    get fromColor() {
-        return this._fromColor;
+class Constant {
+    value;
+    constructor(value) {
+        this.value = value;
     }
-    set fromColor(color) {
-        this.setFromColor(color);
+    sample(out) {
+        return this._copyOrReturn(out);
     }
-    get toColor() {
-        return this._toColor;
+    evaluate(_t, out) {
+        return this._copyOrReturn(out);
     }
-    set toColor(color) {
-        this.setToColor(color);
-    }
-    setFromColor(color) {
-        this._fromColor.copy(color);
-        return this;
-    }
-    setToColor(color) {
-        this._toColor.copy(color);
-        return this;
-    }
-    /**
-     * Sets `particle.tint` to the RGBA value interpolated between
-     * {@link fromColor} and {@link toColor} at the particle's current
-     * {@link Particle.elapsedRatio}. `delta` is unused but required by the
-     * {@link ParticleAffector} contract.
-     */
-    apply(particle, delta) {
-        const ratio = particle.elapsedRatio;
-        const { r: r1, g: g1, b: b1, a: a1 } = this._fromColor;
-        const { r: r2, g: g2, b: b2, a: a2 } = this._toColor;
-        particle.tint.set(((r2 - r1) * ratio) + r1, ((g2 - g1) * ratio) + g1, ((b2 - b1) * ratio) + b1, ((a2 - a1) * ratio) + a1);
-        return this;
-    }
-    destroy() {
-        this._fromColor.destroy();
-        this._toColor.destroy();
+    _copyOrReturn(out) {
+        if (out === undefined || out === null) {
+            return this.value;
+        }
+        const target = out;
+        if (typeof target.copy === 'function') {
+            target.copy(this.value);
+            return out;
+        }
+        return this.value;
     }
 }
 
 /**
- * Applies a constant 2-D acceleration to every particle's
- * {@link Particle.velocity} each tick, simulating forces such as gravity
- * (`new ForceAffector(0, 980)`) or wind. Velocity is mutated in place;
- * the system then integrates position from velocity in
- * {@link ParticleSystem.updateParticle}.
+ * Uniform random number in `[min, max]`. Each `sample()` returns a fresh
+ * roll; the bounds are inclusive on both ends (modulo the rounding bias
+ * inherent to `Math.random()`).
  */
-class ForceAffector {
-    _acceleration;
-    constructor(accelerationX, accelerationY) {
-        this._acceleration = new Vector(accelerationX, accelerationY);
-    }
-    get acceleration() {
-        return this._acceleration;
-    }
-    set acceleration(acceleration) {
-        this.setAcceleration(acceleration);
-    }
-    setAcceleration(acceleration) {
-        this._acceleration.copy(acceleration);
-        return this;
-    }
-    /**
-     * Adds `acceleration * delta.seconds` to `particle.velocity`, implementing
-     * Euler integration for the configured force vector.
-     */
-    apply(particle, delta) {
-        particle.velocity.add(delta.seconds * this._acceleration.x, delta.seconds * this._acceleration.y);
-        return this;
+class Range {
+    min;
+    max;
+    constructor(min, max) {
+        this.min = min;
+        this.max = max;
     }
-    destroy() {
-        this._acceleration.destroy();
+    sample() {
+        return this.min + Math.random() * (this.max - this.min);
     }
 }
 
 /**
- * Additively grows or shrinks a particle's {@link Particle.scale} each tick
- * by a constant rate vector. A positive factor enlarges the sprite; a
- * negative factor shrinks it. Use `new ScaleAffector(-1, -1)` to make
- * particles fade out in size over one second.
+ * Uniform random vector with each axis sampled independently in its own
+ * `[min, max]` range. Each `sample()` writes into the provided `out` Vector
+ * (or an internal scratch instance when `out` is omitted).
+ *
+ * @example
+ * const knockback = new VectorRange(-300, 300, -800, -200);  // any X, upward Y
+ * knockback.sample(particle.velocity);  // writes into existing instance, no alloc
  */
-class ScaleAffector {
-    _scaleFactor;
-    constructor(factorX, factorY) {
-        this._scaleFactor = new Vector(factorX, factorY);
-    }
-    get scaleFactor() {
-        return this._scaleFactor;
-    }
-    set scaleFactor(scaleFactor) {
-        this.setScaleFactor(scaleFactor);
-    }
-    setScaleFactor(scaleFactor) {
-        this._scaleFactor.copy(scaleFactor);
-        return this;
-    }
-    /**
-     * Adds `scaleFactor * delta.seconds` to `particle.scale` on both axes,
-     * implementing linear scale drift for the configured rate.
-     */
-    apply(particle, delta) {
-        particle.scale.add(delta.seconds * this._scaleFactor.x, delta.seconds * this._scaleFactor.y);
-        return this;
-    }
-    destroy() {
-        this._scaleFactor.destroy();
+class VectorRange {
+    minX;
+    maxX;
+    minY;
+    maxY;
+    _scratch = new Vector();
+    constructor(minX, maxX, minY, maxY) {
+        this.minX = minX;
+        this.maxX = maxX;
+        this.minY = minY;
+        this.maxY = maxY;
+    }
+    sample(out = this._scratch) {
+        out.set(this.minX + Math.random() * (this.maxX - this.minX), this.minY + Math.random() * (this.maxY - this.minY));
+        return out;
     }
 }
 
+const tau$1 = Math.PI * 2;
 /**
- * Accelerates a particle's angular velocity ({@link Particle.rotationSpeed})
- * by a constant `angularAcceleration` (degrees per second²) each tick.
- * The updated `rotationSpeed` is then integrated into
- * {@link Particle.rotation} by {@link ParticleSystem.updateParticle}.
- * Use a negative value to decelerate spin over time.
+ * Random unit vector inside a cone, scaled by a speed magnitude.
+ *
+ * The cone is centred on `directionAngle` (in radians, 0 = +X, π/2 = +Y for
+ * screen-down coordinates) and spans `±halfAngle` radians around it. Speed
+ * is sampled uniformly in `[minSpeed, maxSpeed]`.
+ *
+ * Use for emission cones, explosions, fountain spread — anywhere the
+ * direction has a preferred axis with bounded variance.
+ *
+ * @example
+ * // Upward fountain with ±15° spread, 200-300 px/s:
+ * const up = new ConeDirection(-Math.PI / 2, Math.PI / 12, 200, 300);
+ * up.sample(particle.velocity);
  */
-class TorqueAffector {
-    _angularAcceleration;
-    constructor(angularAcceleration) {
-        this._angularAcceleration = angularAcceleration;
-    }
-    get angularAcceleration() {
-        return this._angularAcceleration;
-    }
-    set angularAcceleration(angularAcceleration) {
-        this.setAngularAcceleration(angularAcceleration);
-    }
-    setAngularAcceleration(angularAcceleration) {
-        this._angularAcceleration = angularAcceleration;
-        return this;
-    }
-    /**
-     * Adds `angularAcceleration * delta.seconds` to `particle.rotationSpeed`,
-     * increasing or decreasing spin rate for this timestep.
-     */
-    apply(particle, delta) {
-        particle.rotationSpeed += (delta.seconds * this._angularAcceleration);
-        return this;
-    }
-    destroy() {
-        // no-op — pure value class, kept for Destroyable interface conformance
+class ConeDirection {
+    directionAngle;
+    halfAngle;
+    minSpeed;
+    maxSpeed;
+    _scratch = new Vector();
+    constructor(directionAngle, halfAngle, minSpeed, maxSpeed) {
+        this.directionAngle = directionAngle;
+        this.halfAngle = halfAngle;
+        this.minSpeed = minSpeed;
+        this.maxSpeed = maxSpeed;
+    }
+    sample(out = this._scratch) {
+        const angle = this.directionAngle + (Math.random() * 2 - 1) * this.halfAngle;
+        const speed = this.minSpeed + Math.random() * (this.maxSpeed - this.minSpeed);
+        out.set(Math.cos(angle) * speed, Math.sin(angle) * speed);
+        return out;
+    }
+    /** Convenience: omnidirectional emission (full circle, 0..2π). */
+    static omni(minSpeed, maxSpeed) {
+        return new ConeDirection(0, tau$1 / 2, minSpeed, maxSpeed);
     }
 }
 
+const tau = Math.PI * 2;
 /**
- * Spawn-time configuration snapshot passed to {@link ParticleEmitter.apply}
- * implementations. Implements {@link ParticleProperties} so the same affector
- * interface can read default values when needed. All fields have sensible
- * defaults (1 s lifetime, zero position/velocity, unit scale, white tint)
- * and every object-valued field is deep-cloned on construction, making it
- * safe to share one `ParticleOptions` instance across multiple emitters.
+ * Random point on or inside a circle of radius `radius`, centred at
+ * `(centerX, centerY)`. With `mode: 'edge'` the result lies exactly on the
+ * circumference; with `mode: 'volume'` (default) it lies anywhere in the
+ * disk, with uniform area density (sqrt-of-random-radius distribution).
+ *
+ * Use as a spawn-position distribution for circular emitters.
  */
-class ParticleOptions {
-    _totalLifetime;
-    _elapsedLifetime;
-    _position;
-    _velocity;
-    _scale;
-    _tint;
-    _rotation;
-    _rotationSpeed;
-    _textureIndex;
-    /**
-     * Creates a new options snapshot. Any omitted field falls back to its
-     * default value (1 s lifetime, zero position/velocity, unit scale,
-     * zero rotation, white tint, texture index 0). All object values are
-     * cloned so later mutations to the source objects do not affect this
-     * instance.
-     */
-    constructor(options = {}) {
-        const { totalLifetime, elapsedLifetime, position, velocity, scale, rotation, rotationSpeed, textureIndex, tint, } = options;
-        this._totalLifetime = (totalLifetime ?? Time.oneSecond).clone();
-        this._elapsedLifetime = (elapsedLifetime ?? Time.zero).clone();
-        this._position = (position ?? Vector.zero).clone();
-        this._velocity = (velocity ?? Vector.zero).clone();
-        this._scale = (scale ?? Vector.one).clone();
-        this._tint = (tint ?? Color.white).clone();
-        this._rotation = rotation ?? 0;
-        this._rotationSpeed = rotationSpeed ?? 0;
-        this._textureIndex = textureIndex ?? 0;
-    }
-    get totalLifetime() {
-        return this._totalLifetime;
-    }
-    set totalLifetime(totalLifetime) {
-        this._totalLifetime.copy(totalLifetime);
-    }
-    get elapsedLifetime() {
-        return this._elapsedLifetime;
-    }
-    set elapsedLifetime(elapsedLifetime) {
-        this._elapsedLifetime.copy(elapsedLifetime);
-    }
-    /**
-     * Spawn position for particles emitted with these options, expressed in
-     * the owning ParticleSystem's LOCAL coordinate space — the system's own
-     * `getGlobalTransform()` is applied on top during rendering (both the
-     * WebGL2 and WebGPU shaders do `projection * translation * rotated`).
-     *
-     * Setting a world-space value here (e.g. `system.x + offset`) will
-     * double-translate the emitter because the shader will translate again.
-     * For an emitter anchored at the system origin, use small offsets around
-     * `(0, 0)` and position the system itself via `system.setPosition(...)`.
-     */
-    get position() {
-        return this._position;
-    }
-    set position(position) {
-        this._position.copy(position);
-    }
-    get velocity() {
-        return this._velocity;
-    }
-    set velocity(velocity) {
-        this._velocity.copy(velocity);
-    }
-    get scale() {
-        return this._scale;
-    }
-    set scale(scale) {
-        this._scale.copy(scale);
-    }
-    get rotation() {
-        return this._rotation;
-    }
-    set rotation(degrees) {
-        this._rotation = trimRotation(degrees);
-    }
-    get rotationSpeed() {
-        return this._rotationSpeed;
-    }
-    set rotationSpeed(rotationSpeed) {
-        this._rotationSpeed = rotationSpeed;
-    }
-    get textureIndex() {
-        return this._textureIndex;
-    }
-    set textureIndex(textureIndex) {
-        this._textureIndex = textureIndex;
+class CircleArea {
+    centerX;
+    centerY;
+    radius;
+    mode;
+    _scratch = new Vector();
+    constructor(centerX, centerY, radius, mode = 'volume') {
+        this.centerX = centerX;
+        this.centerY = centerY;
+        this.radius = radius;
+        this.mode = mode;
     }
-    get tint() {
-        return this._tint;
+    sample(out = this._scratch) {
+        const angle = Math.random() * tau;
+        const r = this.mode === 'edge' ? this.radius : this.radius * Math.sqrt(Math.random());
+        out.set(this.centerX + Math.cos(angle) * r, this.centerY + Math.sin(angle) * r);
+        return out;
     }
-    set tint(color) {
-        this._tint.copy(color);
+}
+
+/**
+ * Random point inside an axis-aligned box. With `mode: 'edge'` the result
+ * lies on the perimeter (uniform along all four edges combined); with
+ * `mode: 'volume'` (default) it's uniformly distributed across the area.
+ */
+class BoxArea {
+    minX;
+    maxX;
+    minY;
+    maxY;
+    mode;
+    _scratch = new Vector();
+    constructor(minX, maxX, minY, maxY, mode = 'volume') {
+        this.minX = minX;
+        this.maxX = maxX;
+        this.minY = minY;
+        this.maxY = maxY;
+        this.mode = mode;
+    }
+    sample(out = this._scratch) {
+        if (this.mode === 'volume') {
+            out.set(this.minX + Math.random() * (this.maxX - this.minX), this.minY + Math.random() * (this.maxY - this.minY));
+            return out;
+        }
+        const w = this.maxX - this.minX;
+        const h = this.maxY - this.minY;
+        const perimeter = (w + h) * 2;
+        const t = Math.random() * perimeter;
+        if (t < w) {
+            out.set(this.minX + t, this.minY);
+        }
+        else if (t < w + h) {
+            out.set(this.maxX, this.minY + (t - w));
+        }
+        else if (t < w * 2 + h) {
+            out.set(this.maxX - (t - w - h), this.maxY);
+        }
+        else {
+            out.set(this.minX, this.maxY - (t - w * 2 - h));
+        }
+        return out;
     }
-    /** Destroys all owned value objects. Called by the owning emitter's `destroy()`. */
-    destroy() {
-        this._totalLifetime.destroy();
-        this._elapsedLifetime.destroy();
-        this._position.destroy();
-        this._velocity.destroy();
-        this._scale.destroy();
-        this._tint.destroy();
+}
+
+/**
+ * Random point on a line segment between `(x0, y0)` and `(x1, y1)`. Uniform
+ * parameter distribution: `t = Math.random()` then `lerp(start, end, t)`.
+ */
+class LineSegment {
+    x0;
+    y0;
+    x1;
+    y1;
+    _scratch = new Vector();
+    constructor(x0, y0, x1, y1) {
+        this.x0 = x0;
+        this.y0 = y0;
+        this.x1 = x1;
+        this.y1 = y1;
+    }
+    sample(out = this._scratch) {
+        const t = Math.random();
+        out.set(this.x0 + (this.x1 - this.x0) * t, this.y0 + (this.y1 - this.y0) * t);
+        return out;
     }
 }
 
+const compareT$1 = (a, b) => a.t - b.t;
 /**
- * Rate-based concrete {@link ParticleEmitter} that spawns a fixed number of
- * particles per second, configured via {@link UniversalEmitter.emissionRate}
- * and {@link UniversalEmitter.particleOptions}. Sub-frame fractions are
- * accumulated in an internal delta so that low emission rates (e.g. 0.5
- * particles/s) remain accurate over time without integer truncation error.
+ * Piecewise-linear keyframe curve sampled by lifetime ratio `t` in `[0, 1]`.
+ *
+ * Keyframes are stored sorted by `t` and clamped at the endpoints — sampling
+ * outside the keyframe range returns the nearest endpoint value. The
+ * implementation tracks the last accessed segment so monotonically advancing
+ * `t` (the typical case for per-particle lifetime sampling) costs O(1)
+ * amortized per call instead of O(log n).
  *
  * @example
- * const emitter = new UniversalEmitter(60, new ParticleOptions({ velocity: new Vector(0, -200) }));
- * particleSystem.addEmitter(emitter);
+ * // Scale pulses up then down over lifetime:
+ * const sizeCurve = new Curve([
+ *     { t: 0,    v: 0.2 },
+ *     { t: 0.4,  v: 1.5 },
+ *     { t: 1,    v: 0.0 },
+ * ]);
+ * scale.x = scale.y = sizeCurve.evaluate(particle.elapsedRatio);
  */
-class UniversalEmitter {
-    _emissionRate;
-    _particleOptions;
-    _emissionDelta = 0;
-    constructor(emissionRate, particleOptions) {
-        this._emissionRate = emissionRate;
-        this._particleOptions = particleOptions ?? new ParticleOptions();
-    }
-    get emissionRate() {
-        return this._emissionRate;
+class Curve {
+    _keys;
+    _lastSegment = 0;
+    constructor(keys) {
+        if (keys.length === 0) {
+            throw new Error('Curve requires at least one keyframe.');
+        }
+        this._keys = [...keys].sort(compareT$1);
+    }
+    evaluate(t) {
+        const keys = this._keys;
+        const last = keys.length - 1;
+        if (t <= keys[0].t)
+            return keys[0].v;
+        if (t >= keys[last].t)
+            return keys[last].v;
+        // Cache-friendly forward search: most callers sweep t monotonically.
+        let segment = this._lastSegment;
+        if (t < keys[segment].t) {
+            segment = 0;
+        }
+        while (segment < last && t > keys[segment + 1].t) {
+            segment++;
+        }
+        this._lastSegment = segment;
+        const a = keys[segment];
+        const b = keys[segment + 1];
+        const ratio = (t - a.t) / (b.t - a.t);
+        return a.v + (b.v - a.v) * ratio;
     }
-    set emissionRate(particlesPerSecond) {
-        this._emissionRate = particlesPerSecond;
-    }
-    get particleOptions() {
-        return this._particleOptions;
-    }
-    set particleOptions(particleOptions) {
-        this._particleOptions = particleOptions;
-    }
-    /**
-     * Computes how many whole particles to spawn for the given `time` slice,
-     * carrying any fractional remainder into the next call. This accumulator
-     * prevents emission-rate drift when `emissionRate * delta` is not an
-     * integer (e.g. 30 fps × 0.5 particles/s = 0.5 per frame → every other
-     * frame emits one).
-     */
-    computeParticleCount(time) {
-        const particleAmount = (this._emissionRate * time.seconds) + this._emissionDelta;
-        const particles = particleAmount | 0;
-        this._emissionDelta = (particleAmount - particles);
-        return particles;
+}
+
+const compareT = (a, b) => a.t - b.t;
+/**
+ * Piecewise-linear color gradient sampled by lifetime ratio `t` in `[0, 1]`.
+ * Keyframes are stored sorted by `t`; sampling outside the range returns
+ * the nearest endpoint color. Like {@link Curve}, the last accessed segment
+ * is cached so monotonically advancing `t` is O(1) amortised.
+ *
+ * Two output paths:
+ * - {@link evaluate} — writes into a `Color` instance (own scratch by default).
+ * - {@link evaluateRgba} — returns the packed `0xAABBGGRR` u32 directly,
+ *   skipping the Color object. Use this in tight per-particle inner loops
+ *   that write into a `Uint32Array` instance buffer.
+ *
+ * @example
+ * const fire = new Gradient([
+ *     { t: 0,   color: new Color(1, 1, 1, 1) },     // white
+ *     { t: 0.3, color: new Color(1, 0.7, 0.1, 1) }, // orange
+ *     { t: 0.7, color: new Color(0.4, 0.1, 0, 0.6) },
+ *     { t: 1,   color: new Color(0, 0, 0, 0) },     // transparent black
+ * ]);
+ */
+class Gradient {
+    _keys;
+    _scratch = new Color();
+    _lastSegment = 0;
+    constructor(keys) {
+        if (keys.length === 0) {
+            throw new Error('Gradient requires at least one keyframe.');
+        }
+        this._keys = [...keys].map((k) => ({ t: k.t, color: k.color.clone() })).sort(compareT);
+    }
+    evaluate(t, out = this._scratch) {
+        const keys = this._keys;
+        const last = keys.length - 1;
+        if (t <= keys[0].t) {
+            out.copy(keys[0].color);
+            return out;
+        }
+        if (t >= keys[last].t) {
+            out.copy(keys[last].color);
+            return out;
+        }
+        let segment = this._lastSegment;
+        if (t < keys[segment].t) {
+            segment = 0;
+        }
+        while (segment < last && t > keys[segment + 1].t) {
+            segment++;
+        }
+        this._lastSegment = segment;
+        const a = keys[segment].color;
+        const b = keys[segment + 1].color;
+        const ka = keys[segment].t;
+        const kb = keys[segment + 1].t;
+        const ratio = (t - ka) / (kb - ka);
+        out.set(a.r + (b.r - a.r) * ratio, a.g + (b.g - a.g) * ratio, a.b + (b.b - a.b) * ratio, a.a + (b.a - a.a) * ratio);
+        return out;
+    }
+    /**
+     * Returns the gradient sample at `t` packed into a single 32-bit RGBA
+     * integer (`0xAABBGGRR`). Avoids the {@link Color} object on the hot
+     * path; suitable for direct write into a `Uint32Array` instance buffer.
+     */
+    evaluateRgba(t) {
+        return this.evaluate(t, this._scratch).toRgba();
     }
-    /**
-     * Requests the correct number of particles from `system` for this frame,
-     * configures each one with {@link particleOptions} via
-     * {@link Particle.applyOptions}, and emits them into the live pool.
-     */
-    apply(system, delta) {
-        const count = this.computeParticleCount(delta);
-        const options = this._particleOptions;
+}
+
+/**
+ * Per-frame particle spawner. Subclasses decide how many particles to emit
+ * each tick (rate-based, burst, on-demand) and write their initial values
+ * directly into the system's typed-array slots.
+ *
+ * Implementation pattern:
+ *
+ * ```ts
+ * apply(system, dt) {
+ *     const count = this.computeSpawnCount(dt);
+ *     for (let i = 0; i < count; i++) {
+ *         const slot = system.spawn();
+ *         if (slot < 0) break;          // capacity exhausted
+ *         system.posX[slot] = ...;
+ *         system.velX[slot] = ...;
+ *         system.lifetime[slot] = ...;
+ *         // ...etc
+ *     }
+ * }
+ * ```
+ *
+ * Spawn modules run before integration each frame. Multiple modules can be
+ * registered on one system and execute in registration order.
+ */
+class SpawnModule {
+    /** Optional cleanup hook called from `ParticleSystem.destroy`. */
+    destroy() { }
+}
+
+/**
+ * Per-frame, per-batch mutator. Operates on the system's SoA storage
+ * directly — typically a single tight loop over `[0, system.liveCount)`
+ * that reads/writes the relevant `Float32Array`s.
+ *
+ * Implementations must always provide a CPU `apply()`. To make a module
+ * GPU-eligible (executed inside the system's composite compute shader on
+ * WebGPU backends), additionally implement {@link wgsl} and
+ * {@link writeUniforms}. Modules that declare a {@link WgslContribution}
+ * may also opt to declare a 1D texture binding via the `textures` field
+ * (used by `Curve` / `Gradient`-driven modules) — in which case
+ * {@link uploadTextures} runs once at compile time to upload the data.
+ *
+ * Implementation pattern (CPU-only module):
+ *
+ * ```ts
+ * class MyModule extends UpdateModule {
+ *     apply(system, dt) {
+ *         const { velX, velY, liveCount } = system;
+ *         for (let i = 0; i < liveCount; i++) { velX[i] *= 0.99; velY[i] *= 0.99; }
+ *     }
+ * }
+ * ```
+ *
+ * Implementation pattern (GPU-eligible module):
+ *
+ * ```ts
+ * class MyForce extends UpdateModule {
+ *     constructor(public ax: number, public ay: number) { super(); }
+ *
+ *     apply(system, dt) {
+ *         const { velX, velY, liveCount } = system;
+ *         for (let i = 0; i < liveCount; i++) { velX[i] += this.ax * dt; velY[i] += this.ay * dt; }
+ *     }
+ *
+ *     wgsl(): WgslContribution {
+ *         return {
+ *             key: 'MyForce',
+ *             uniforms: [{ name: 'ax', type: 'f32' }, { name: 'ay', type: 'f32' }],
+ *             body: `velX[idx] += u_MyForce.ax * dt; velY[idx] += u_MyForce.ay * dt;`,
+ *         };
+ *     }
+ *
+ *     writeUniforms(view, offset) {
+ *         view.setFloat32(offset + 0, this.ax, true);
+ *         view.setFloat32(offset + 4, this.ay, true);
+ *     }
+ * }
+ * ```
+ *
+ * If *any* registered update module on a system lacks `wgsl()`, the system
+ * forces CPU mode regardless of backend — preserving the contract that
+ * `apply()` is always honoured. Built-in modules ship both
+ * implementations; custom modules can opt into GPU acceleration at their
+ * authors' discretion.
+ *
+ * Update modules run after integration each frame. Multiple modules execute
+ * in registration order; later modules see the effects of earlier ones.
+ */
+class UpdateModule {
+    /** Optional cleanup hook called from `ParticleSystem.destroy`. */
+    destroy() { }
+}
+
+/**
+ * Per-particle hook invoked exactly once when a particle expires, before
+ * its slot is recycled by the compaction pass. The dying particle's data
+ * is still readable at `system.posX[slot]` etc.
+ *
+ * Use for sub-emitters (spawn child particles where this one died), event
+ * dispatch (trigger an audio cue, score event), or trail termination.
+ *
+ * Implementation pattern:
+ *
+ * ```ts
+ * onDeath(system, slot) {
+ *     const x = system.posX[slot];
+ *     const y = system.posY[slot];
+ *     this._childSystem.spawnBurstAt(x, y, 8);
+ * }
+ * ```
+ */
+class DeathModule {
+    /** Optional cleanup hook called from `ParticleSystem.destroy`. */
+    destroy() { }
+}
+
+/**
+ * Continuous, rate-based spawner. Emits a {@link RateSpawnConfig.rate}
+ * sample per second; sub-frame fractions accumulate so low rates (e.g.
+ * 0.5 particles/s) remain accurate over time.
+ *
+ * Each property is independently randomised via its {@link Distribution}.
+ * Every spawned particle gets a fresh sample for every configured field.
+ */
+class RateSpawn extends SpawnModule {
+    config;
+    _accumulator = 0;
+    _vec = new Vector();
+    _color = new Color();
+    constructor(config) {
+        super();
+        this.config = config;
+    }
+    apply(system, dt) {
+        const cfg = this.config;
+        const rate = cfg.rate.sample();
+        this._accumulator += rate * dt;
+        const count = this._accumulator | 0;
+        if (count <= 0) {
+            return;
+        }
+        this._accumulator -= count;
+        const v = this._vec;
+        const c = this._color;
         for (let i = 0; i < count; i++) {
-            const particle = system.requestParticle();
-            particle.applyOptions(options);
-            system.emitParticle(particle);
+            const slot = system.spawn();
+            if (slot < 0) {
+                this._accumulator = 0;
+                return;
+            }
+            system.lifetime[slot] = cfg.lifetime ? cfg.lifetime.sample() : 1;
+            if (cfg.position) {
+                cfg.position.sample(v);
+                system.posX[slot] = v.x;
+                system.posY[slot] = v.y;
+            }
+            else {
+                system.posX[slot] = 0;
+                system.posY[slot] = 0;
+            }
+            if (cfg.velocity) {
+                cfg.velocity.sample(v);
+                system.velX[slot] = v.x;
+                system.velY[slot] = v.y;
+            }
+            else {
+                system.velX[slot] = 0;
+                system.velY[slot] = 0;
+            }
+            if (cfg.scale) {
+                cfg.scale.sample(v);
+                system.scaleX[slot] = v.x;
+                system.scaleY[slot] = v.y;
+            }
+            else {
+                system.scaleX[slot] = 1;
+                system.scaleY[slot] = 1;
+            }
+            system.rotations[slot] = cfg.rotation ? cfg.rotation.sample() : 0;
+            system.rotationSpeeds[slot] = cfg.rotationSpeed ? cfg.rotationSpeed.sample() : 0;
+            system.color[slot] = cfg.tint ? cfg.tint.sample(c).toRgba() : 0xffffffff;
+            system.textureIndex[slot] = cfg.textureIndex ? (cfg.textureIndex.sample() | 0) : 0;
         }
-        return this;
-    }
-    destroy() {
-        this._particleOptions.destroy();
     }
 }
 
 /**
- * Immediate-mode 2D shape API backed by {@link Mesh} children.
- *
- * Each draw call (e.g. `drawCircle`, `drawRectangle`, `drawLine`) appends a
- * new {@link Mesh} child colored with the current `fillColor` or `lineColor`.
- * The active `lineWidth` controls stroke thickness for path and outline draws.
- * Path commands (`moveTo`, `lineTo`, `quadraticCurveTo`, etc.) track a cursor
- * point and flush a Mesh on each segment.
+ * Discrete-burst spawner. Fires at scheduled times with a fixed count per
+ * burst. Useful for explosions, hit-impacts, level-up effects.
+ *
+ * @example
+ * new BurstSpawn({
+ *     schedule: [{ time: 0, count: 50 }, { time: 0.2, count: 25 }],
+ *     velocity: ConeDirection.omni(150, 350),
+ *     lifetime: new Range(0.4, 0.9),
+ * });
+ */
+class BurstSpawn extends SpawnModule {
+    config;
+    _elapsed = 0;
+    _nextIndex = 0;
+    _vec = new Vector();
+    _color = new Color();
+    constructor(config) {
+        super();
+        this.config = config;
+    }
+    apply(system, dt) {
+        const cfg = this.config;
+        const schedule = cfg.schedule;
+        if (schedule.length === 0) {
+            return;
+        }
+        this._elapsed += dt;
+        while (this._nextIndex < schedule.length && this._elapsed >= schedule[this._nextIndex].time) {
+            this._spawnBurst(system, schedule[this._nextIndex].count);
+            this._nextIndex++;
+        }
+        if (cfg.loop && this._nextIndex >= schedule.length) {
+            this._elapsed = 0;
+            this._nextIndex = 0;
+        }
+    }
+    /** Restart the schedule from t=0. */
+    reset() {
+        this._elapsed = 0;
+        this._nextIndex = 0;
+        return this;
+    }
+    _spawnBurst(system, count) {
+        const cfg = this.config;
+        const v = this._vec;
+        const c = this._color;
+        for (let i = 0; i < count; i++) {
+            const slot = system.spawn();
+            if (slot < 0) {
+                return;
+            }
+            system.lifetime[slot] = cfg.lifetime ? cfg.lifetime.sample() : 1;
+            if (cfg.position) {
+                cfg.position.sample(v);
+                system.posX[slot] = v.x;
+                system.posY[slot] = v.y;
+            }
+            else {
+                system.posX[slot] = 0;
+                system.posY[slot] = 0;
+            }
+            if (cfg.velocity) {
+                cfg.velocity.sample(v);
+                system.velX[slot] = v.x;
+                system.velY[slot] = v.y;
+            }
+            else {
+                system.velX[slot] = 0;
+                system.velY[slot] = 0;
+            }
+            if (cfg.scale) {
+                cfg.scale.sample(v);
+                system.scaleX[slot] = v.x;
+                system.scaleY[slot] = v.y;
+            }
+            else {
+                system.scaleX[slot] = 1;
+                system.scaleY[slot] = 1;
+            }
+            system.rotations[slot] = cfg.rotation ? cfg.rotation.sample() : 0;
+            system.rotationSpeeds[slot] = cfg.rotationSpeed ? cfg.rotationSpeed.sample() : 0;
+            system.color[slot] = cfg.tint ? cfg.tint.sample(c).toRgba() : 0xffffffff;
+            system.textureIndex[slot] = cfg.textureIndex ? (cfg.textureIndex.sample() | 0) : 0;
+        }
+    }
+}
+
+/**
+ * Adds a constant 2D acceleration to every live particle's velocity each
+ * frame. Use for gravity (`new ApplyForce(0, 980)`), wind, or any uniform
+ * force field. Force is applied to all particles equally — for per-particle
+ * variation, layer multiple ApplyForce modules with different gates.
+ *
+ * GPU-eligible: implements {@link UpdateModule.wgsl} so this module runs in
+ * the system's compute shader on WebGPU backends with no CPU readback.
+ */
+class ApplyForce extends UpdateModule {
+    accelerationX;
+    accelerationY;
+    constructor(accelerationX, accelerationY) {
+        super();
+        this.accelerationX = accelerationX;
+        this.accelerationY = accelerationY;
+    }
+    apply(system, dt) {
+        const { velX, velY, liveCount } = system;
+        const ax = this.accelerationX * dt;
+        const ay = this.accelerationY * dt;
+        for (let i = 0; i < liveCount; i++) {
+            velX[i] += ax;
+            velY[i] += ay;
+        }
+    }
+    wgsl() {
+        return {
+            key: 'ApplyForce',
+            uniforms: [
+                { name: 'ax', type: 'f32' },
+                { name: 'ay', type: 'f32' },
+            ],
+            body: `
+                velocities[idx] = velocities[idx] + vec2<f32>(modules.u_ApplyForce.ax, modules.u_ApplyForce.ay) * dt;
+            `,
+        };
+    }
+    writeUniforms(view, offset) {
+        view.setFloat32(offset + 0, this.accelerationX, true);
+        view.setFloat32(offset + 4, this.accelerationY, true);
+    }
+}
+
+/**
+ * Exponential velocity damping. Each frame multiplies every live particle's
+ * velocity by `(1 - drag * dt)`, simulating linear air resistance.
+ *
+ * `drag = 0` is no damping; `drag = 1` halves velocity in ~1 second; higher
+ * values slow particles faster. Negative values accelerate (don't do that
+ * unless you mean it).
+ *
+ * GPU-eligible.
+ */
+class Drag extends UpdateModule {
+    drag;
+    constructor(drag) {
+        super();
+        this.drag = drag;
+    }
+    apply(system, dt) {
+        const { velX, velY, liveCount } = system;
+        const factor = 1 - this.drag * dt;
+        for (let i = 0; i < liveCount; i++) {
+            velX[i] *= factor;
+            velY[i] *= factor;
+        }
+    }
+    wgsl() {
+        return {
+            key: 'Drag',
+            uniforms: [
+                { name: 'drag', type: 'f32' },
+            ],
+            body: `
+                let dragFactor = 1.0 - modules.u_Drag.drag * dt;
+                velocities[idx] = velocities[idx] * dragFactor;
+            `,
+        };
+    }
+    writeUniforms(view, offset) {
+        view.setFloat32(offset + 0, this.drag, true);
+    }
+}
+
+/// <reference types="@webgpu/types" />
+const lookupSize$4 = 256;
+/**
+ * Per-frame, per-particle color sampler. Each live particle's tint is set
+ * to the gradient evaluated at the particle's current `elapsed / lifetime`
+ * ratio, packed RGBA. Replaces the per-particle blend of `ColorAffector`
+ * (legacy) with a multi-keyframe gradient.
+ *
+ * GPU-eligible: the gradient is uploaded once as a 256-tap 1D RGBA8 texture
+ * and sampled with linear filtering on the GPU.
+ */
+class ColorOverLifetime extends UpdateModule {
+    gradient;
+    constructor(gradient) {
+        super();
+        this.gradient = gradient;
+    }
+    apply(system, _dt) {
+        const { color, elapsed, lifetime, liveCount } = system;
+        const gradient = this.gradient;
+        for (let i = 0; i < liveCount; i++) {
+            const t = elapsed[i] / lifetime[i];
+            color[i] = gradient.evaluateRgba(t);
+        }
+    }
+    wgsl() {
+        return {
+            key: 'ColorOverLifetime',
+            textures: [{ name: 'gradient', format: 'rgba8unorm' }],
+            body: `
+                let colorT = clamp(timing[idx].x / max(timing[idx].y, 0.000001), 0.0, 1.0);
+                let colorSample = textureSampleLevel(u_ColorOverLifetime_gradient, u_ColorOverLifetime_gradient_sampler, colorT, 0.0);
+                let r = u32(colorSample.r * 255.0) & 255u;
+                let g = u32(colorSample.g * 255.0) & 255u;
+                let b = u32(colorSample.b * 255.0) & 255u;
+                let a = u32(colorSample.a * 255.0) & 255u;
+                color[idx] = (a << 24u) | (b << 16u) | (g << 8u) | r;
+            `,
+        };
+    }
+    uploadTextures(device, textures) {
+        const texture = textures.get('gradient');
+        if (texture === undefined) {
+            return;
+        }
+        const data = new Uint8Array(lookupSize$4 * 4);
+        const scratch = new Color();
+        for (let i = 0; i < lookupSize$4; i++) {
+            const t = i / (lookupSize$4 - 1);
+            this.gradient.evaluate(t, scratch);
+            const o = i * 4;
+            data[o + 0] = scratch.r & 255;
+            data[o + 1] = scratch.g & 255;
+            data[o + 2] = scratch.b & 255;
+            data[o + 3] = ((scratch.a * 255) | 0) & 255;
+        }
+        device.queue.writeTexture({ texture }, data.buffer, { offset: 0, bytesPerRow: lookupSize$4 * 4, rowsPerImage: 1 }, { width: lookupSize$4, height: 1, depthOrArrayLayers: 1 });
+    }
+}
+
+/// <reference types="@webgpu/types" />
+const lookupSize$3 = 256;
+/**
+ * Per-frame, per-particle color sampler driven by velocity magnitude rather
+ * than lifetime ratio. Each live particle's tint is set to the gradient
+ * evaluated at `clamp((|velocity| - minSpeed) / (maxSpeed - minSpeed), 0, 1)`.
+ *
+ * Use cases: heat-mapping (slow=blue, fast=red), velocity-tinted trails,
+ * speed-gated highlights.
+ *
+ * GPU-eligible: gradient uploaded as a 256-tap 1D RGBA8 texture, sampled
+ * with linear filtering. Replaces the full color word — pair with a
+ * separate {@link AlphaFadeOverLifetime} after this module if you want to
+ * keep alpha controlled by lifetime.
+ */
+class ColorOverSpeed extends UpdateModule {
+    gradient;
+    minSpeed;
+    maxSpeed;
+    constructor(gradient, minSpeed, maxSpeed) {
+        super();
+        this.gradient = gradient;
+        this.minSpeed = minSpeed;
+        this.maxSpeed = maxSpeed;
+    }
+    apply(system, _dt) {
+        const { velX, velY, color, liveCount } = system;
+        const gradient = this.gradient;
+        const min = this.minSpeed;
+        const span = Math.max(1e-5, this.maxSpeed - this.minSpeed);
+        for (let i = 0; i < liveCount; i++) {
+            const speed = Math.sqrt(velX[i] * velX[i] + velY[i] * velY[i]);
+            const t = Math.max(0, Math.min(1, (speed - min) / span));
+            color[i] = gradient.evaluateRgba(t);
+        }
+    }
+    wgsl() {
+        return {
+            key: 'ColorOverSpeed',
+            uniforms: [
+                { name: 'minSpeed', type: 'f32' },
+                { name: 'invSpan', type: 'f32' },
+            ],
+            textures: [{ name: 'gradient', format: 'rgba8unorm' }],
+            body: `
+                let speedMag = length(velocities[idx]);
+                let speedT = clamp((speedMag - modules.u_ColorOverSpeed.minSpeed) * modules.u_ColorOverSpeed.invSpan, 0.0, 1.0);
+                let speedSample = textureSampleLevel(u_ColorOverSpeed_gradient, u_ColorOverSpeed_gradient_sampler, speedT, 0.0);
+                let speedR = u32(speedSample.r * 255.0) & 255u;
+                let speedG = u32(speedSample.g * 255.0) & 255u;
+                let speedB = u32(speedSample.b * 255.0) & 255u;
+                let speedA = u32(speedSample.a * 255.0) & 255u;
+                color[idx] = (speedA << 24u) | (speedB << 16u) | (speedG << 8u) | speedR;
+            `,
+        };
+    }
+    writeUniforms(view, offset) {
+        const span = Math.max(1e-5, this.maxSpeed - this.minSpeed);
+        view.setFloat32(offset + 0, this.minSpeed, true);
+        view.setFloat32(offset + 4, 1 / span, true);
+    }
+    uploadTextures(device, textures) {
+        const texture = textures.get('gradient');
+        if (texture === undefined) {
+            return;
+        }
+        const data = new Uint8Array(lookupSize$3 * 4);
+        const scratch = new Color();
+        for (let i = 0; i < lookupSize$3; i++) {
+            const t = i / (lookupSize$3 - 1);
+            this.gradient.evaluate(t, scratch);
+            const o = i * 4;
+            data[o + 0] = scratch.r & 255;
+            data[o + 1] = scratch.g & 255;
+            data[o + 2] = scratch.b & 255;
+            data[o + 3] = ((scratch.a * 255) | 0) & 255;
+        }
+        device.queue.writeTexture({ texture }, data.buffer, { offset: 0, bytesPerRow: lookupSize$3 * 4, rowsPerImage: 1 }, { width: lookupSize$3, height: 1, depthOrArrayLayers: 1 });
+    }
+}
+
+/// <reference types="@webgpu/types" />
+const lookupSize$2 = 256;
+/**
+ * Sets every live particle's scale to a curve sampled at the particle's
+ * current lifetime ratio. Both axes share one curve — for non-uniform
+ * scaling layer two ScaleOverLifetime modules with separate `axis` filters
+ * (or extend with a per-axis variant).
+ *
+ * Common patterns: shrink-to-zero (start at 1, end at 0), pulse (sine-like
+ * curve up to peak then down), slow-grow (linear ramp).
+ *
+ * GPU-eligible: the curve is uploaded once as a 256-tap 1D R32F texture and
+ * sampled with linear filtering on the GPU — no curve evaluation cost in
+ * the inner loop.
+ */
+class ScaleOverLifetime extends UpdateModule {
+    curve;
+    constructor(curve) {
+        super();
+        this.curve = curve;
+    }
+    apply(system, _dt) {
+        const { scaleX, scaleY, elapsed, lifetime, liveCount } = system;
+        const curve = this.curve;
+        for (let i = 0; i < liveCount; i++) {
+            const t = elapsed[i] / lifetime[i];
+            const s = curve.evaluate(t);
+            scaleX[i] = s;
+            scaleY[i] = s;
+        }
+    }
+    wgsl() {
+        return {
+            key: 'ScaleOverLifetime',
+            textures: [{ name: 'curve', format: 'r32float' }],
+            body: `
+                let scaleT = clamp(timing[idx].x / max(timing[idx].y, 0.000001), 0.0, 1.0);
+                let scaleSample = textureSampleLevel(u_ScaleOverLifetime_curve, u_ScaleOverLifetime_curve_sampler, scaleT, 0.0).r;
+                scales[idx] = vec2<f32>(scaleSample, scaleSample);
+            `,
+        };
+    }
+    uploadTextures(device, textures) {
+        const texture = textures.get('curve');
+        if (texture === undefined) {
+            return;
+        }
+        const data = new Float32Array(lookupSize$2);
+        for (let i = 0; i < lookupSize$2; i++) {
+            data[i] = this.curve.evaluate(i / (lookupSize$2 - 1));
+        }
+        device.queue.writeTexture({ texture }, data.buffer, { offset: 0, bytesPerRow: lookupSize$2 * 4, rowsPerImage: 1 }, { width: lookupSize$2, height: 1, depthOrArrayLayers: 1 });
+    }
+}
+
+/**
+ * Adds a constant angular acceleration to every live particle each frame
+ * (analogous to the legacy `TorqueAffector`). The system's integrate pass
+ * advances `rotation` from `rotationSpeed`; this module increments
+ * `rotationSpeed` itself.
+ *
+ * Units: degrees per second². Negative values decelerate spin.
+ *
+ * GPU-eligible.
+ */
+class RotateOverLifetime extends UpdateModule {
+    angularAcceleration;
+    constructor(angularAcceleration) {
+        super();
+        this.angularAcceleration = angularAcceleration;
+    }
+    apply(system, dt) {
+        const { rotationSpeeds, liveCount } = system;
+        const delta = this.angularAcceleration * dt;
+        for (let i = 0; i < liveCount; i++) {
+            rotationSpeeds[i] += delta;
+        }
+    }
+    wgsl() {
+        return {
+            key: 'RotateOverLifetime',
+            uniforms: [
+                { name: 'angularAcceleration', type: 'f32' },
+            ],
+            body: `
+                rotInfo[idx].y = rotInfo[idx].y + modules.u_RotateOverLifetime.angularAcceleration * dt;
+            `,
+        };
+    }
+    writeUniforms(view, offset) {
+        view.setFloat32(offset + 0, this.angularAcceleration, true);
+    }
+}
+
+/// <reference types="@webgpu/types" />
+const lookupSize$1 = 256;
+/**
+ * Fades only the alpha channel over a particle's lifetime, leaving RGB
+ * untouched. Pair with a spawn-time tint or a separate `ColorOverLifetime`
+ * to keep the color layer stable while controlling opacity from a single
+ * curve.
+ *
+ * The default curve `1 → 0` produces a linear fade-out. For a fade-in then
+ * fade-out, pass a curve like `[0,0]→[0.5,1]→[1,0]`.
+ *
+ * GPU-eligible: uploads the curve as a 256-tap 1D R32F texture; alpha is
+ * resampled per-particle in the compute shader and stitched into the
+ * existing color word with a single mask + shift.
+ */
+class AlphaFadeOverLifetime extends UpdateModule {
+    curve;
+    constructor(curve) {
+        super();
+        this.curve = curve;
+    }
+    apply(system, _dt) {
+        const { color, elapsed, lifetime, liveCount } = system;
+        const curve = this.curve;
+        for (let i = 0; i < liveCount; i++) {
+            const t = elapsed[i] / lifetime[i];
+            const a = curve.evaluate(t);
+            const alphaByte = (Math.max(0, Math.min(1, a)) * 255) & 255;
+            color[i] = (color[i] & 0x00ffffff) | (alphaByte << 24);
+        }
+    }
+    wgsl() {
+        return {
+            key: 'AlphaFadeOverLifetime',
+            textures: [{ name: 'curve', format: 'r32float' }],
+            body: `
+                let alphaT = clamp(timing[idx].x / max(timing[idx].y, 0.000001), 0.0, 1.0);
+                let alphaSample = textureSampleLevel(u_AlphaFadeOverLifetime_curve, u_AlphaFadeOverLifetime_curve_sampler, alphaT, 0.0).r;
+                let alphaByte = u32(clamp(alphaSample, 0.0, 1.0) * 255.0) & 255u;
+                color[idx] = (color[idx] & 0x00ffffffu) | (alphaByte << 24u);
+            `,
+        };
+    }
+    uploadTextures(device, textures) {
+        const texture = textures.get('curve');
+        if (texture === undefined) {
+            return;
+        }
+        const data = new Float32Array(lookupSize$1);
+        for (let i = 0; i < lookupSize$1; i++) {
+            data[i] = this.curve.evaluate(i / (lookupSize$1 - 1));
+        }
+        device.queue.writeTexture({ texture }, data.buffer, { offset: 0, bytesPerRow: lookupSize$1 * 4, rowsPerImage: 1 }, { width: lookupSize$1, height: 1, depthOrArrayLayers: 1 });
+    }
+}
+
+/// <reference types="@webgpu/types" />
+const lookupSize = 256;
+/**
+ * Multiplies every live particle's velocity by a curve sampled at the
+ * particle's current `elapsed / lifetime` ratio. The same scalar is applied
+ * to both axes — the direction is preserved, only the magnitude scales.
+ *
+ * Common patterns:
+ * - **Snappy spawn, slow drift:** `[0,1]→[1,0.1]` — fast initial motion
+ *   that decays over lifetime.
+ * - **Late acceleration:** `[0,0.2]→[1,1]` — particles ease in.
+ * - **Pulse:** sine-shaped curve for breathing-style motion.
+ *
+ * Note: the curve **replaces** velocity each frame relative to the previous
+ * frame's velocity, so the effect is multiplicative. Pair with `ApplyForce`
+ * if you want a constant external acceleration on top.
+ *
+ * GPU-eligible: uploads the curve as a 256-tap 1D R32F texture; sampled
+ * once per particle per frame.
+ */
+class VelocityOverLifetime extends UpdateModule {
+    curve;
+    _prevSample = new Float32Array(0);
+    constructor(curve) {
+        super();
+        this.curve = curve;
+    }
+    apply(system, _dt) {
+        const { velX, velY, elapsed, lifetime, liveCount } = system;
+        const curve = this.curve;
+        // Resize per-particle previous-sample cache once.
+        if (this._prevSample.length < system.capacity) {
+            this._prevSample = new Float32Array(system.capacity);
+            this._prevSample.fill(1);
+        }
+        const prev = this._prevSample;
+        for (let i = 0; i < liveCount; i++) {
+            const t = elapsed[i] / lifetime[i];
+            const sample = curve.evaluate(t);
+            const last = prev[i] === 0 ? 1 : prev[i];
+            const delta = sample / last;
+            velX[i] *= delta;
+            velY[i] *= delta;
+            prev[i] = sample === 0 ? 1e-6 : sample;
+        }
+    }
+    wgsl() {
+        // GPU path uses a different formulation: re-derive velocity from
+        // initial speed at t=0 by storing nothing — instead, scale relative
+        // to the previous sample stored in scales[idx] alpha? No — keep it
+        // simple and stateless: scale the integrated velocity by the
+        // *ratio* of (current sample) / (sample at previous frame's t).
+        // We approximate the previous t with `(elapsed - dt) / lifetime`.
+        return {
+            key: 'VelocityOverLifetime',
+            textures: [{ name: 'curve', format: 'r32float' }],
+            body: `
+                let velLifetime = max(timing[idx].y, 0.000001);
+                let velTNow = clamp(timing[idx].x / velLifetime, 0.0, 1.0);
+                let velTPrev = clamp((timing[idx].x - dt) / velLifetime, 0.0, 1.0);
+                let velSampleNow = textureSampleLevel(u_VelocityOverLifetime_curve, u_VelocityOverLifetime_curve_sampler, velTNow, 0.0).r;
+                let velSamplePrev = textureSampleLevel(u_VelocityOverLifetime_curve, u_VelocityOverLifetime_curve_sampler, velTPrev, 0.0).r;
+                let velRatio = velSampleNow / max(velSamplePrev, 0.000001);
+                velocities[idx] = velocities[idx] * velRatio;
+            `,
+        };
+    }
+    uploadTextures(device, textures) {
+        const texture = textures.get('curve');
+        if (texture === undefined) {
+            return;
+        }
+        const data = new Float32Array(lookupSize);
+        for (let i = 0; i < lookupSize; i++) {
+            data[i] = this.curve.evaluate(i / (lookupSize - 1));
+        }
+        device.queue.writeTexture({ texture }, data.buffer, { offset: 0, bytesPerRow: lookupSize * 4, rowsPerImage: 1 }, { width: lookupSize, height: 1, depthOrArrayLayers: 1 });
+    }
+}
+
+/**
+ * Pulls every live particle toward a fixed point in the system's local
+ * coordinate space. Acceleration magnitude is `strength` (units / s²),
+ * applied along the direction `(point − particle)`. The optional `falloff`
+ * radius softens the pull near the center — particles within `falloff`
+ * units lerp the strength linearly to zero, preventing the singularity at
+ * `r = 0` from yielding infinite acceleration.
+ *
+ * Use cases: orbit anchors, pin emitters to a moving target, simulate a
+ * "black hole" pickup. For repulsion, use {@link RepelFromPoint}; for
+ * tangential motion, layer with {@link OrbitalForce}.
+ *
+ * GPU-eligible.
+ */
+class AttractToPoint extends UpdateModule {
+    x;
+    y;
+    strength;
+    falloff;
+    constructor(x, y, strength, falloff = 0) {
+        super();
+        this.x = x;
+        this.y = y;
+        this.strength = strength;
+        this.falloff = falloff;
+    }
+    apply(system, dt) {
+        const { posX, posY, velX, velY, liveCount } = system;
+        const { x, y, strength, falloff } = this;
+        for (let i = 0; i < liveCount; i++) {
+            const dx = x - posX[i];
+            const dy = y - posY[i];
+            const distSq = dx * dx + dy * dy;
+            const dist = Math.sqrt(distSq);
+            if (dist < 1e-5)
+                continue;
+            const k = falloff > 0 ? Math.min(1, dist / falloff) : 1;
+            const a = (strength * k * dt) / dist;
+            velX[i] += dx * a;
+            velY[i] += dy * a;
+        }
+    }
+    wgsl() {
+        return {
+            key: 'AttractToPoint',
+            uniforms: [
+                { name: 'point', type: 'vec2<f32>' },
+                { name: 'strength', type: 'f32' },
+                { name: 'falloff', type: 'f32' },
+            ],
+            body: `
+                let attractDelta = modules.u_AttractToPoint.point - positions[idx];
+                let attractDist = length(attractDelta);
+                if (attractDist > 0.00001) {
+                    let attractK = select(1.0, min(1.0, attractDist / max(modules.u_AttractToPoint.falloff, 0.000001)), modules.u_AttractToPoint.falloff > 0.0);
+                    let attractAccel = (modules.u_AttractToPoint.strength * attractK * dt) / attractDist;
+                    velocities[idx] = velocities[idx] + attractDelta * attractAccel;
+                }
+            `,
+        };
+    }
+    writeUniforms(view, offset) {
+        view.setFloat32(offset + 0, this.x, true);
+        view.setFloat32(offset + 4, this.y, true);
+        view.setFloat32(offset + 8, this.strength, true);
+        view.setFloat32(offset + 12, this.falloff, true);
+    }
+}
+
+/**
+ * Pushes every live particle away from a fixed point in the system's local
+ * coordinate space. Acceleration magnitude is `strength` (units / s²)
+ * along the direction `(particle − point)`. The optional `radius` controls
+ * the influence range — particles farther than `radius` are unaffected.
+ * Setting `radius = 0` (default) means infinite range with no falloff.
+ *
+ * Use cases: shockwaves, explosion blast, mouse-cursor repel field.
+ *
+ * GPU-eligible.
+ */
+class RepelFromPoint extends UpdateModule {
+    x;
+    y;
+    strength;
+    radius;
+    constructor(x, y, strength, radius = 0) {
+        super();
+        this.x = x;
+        this.y = y;
+        this.strength = strength;
+        this.radius = radius;
+    }
+    apply(system, dt) {
+        const { posX, posY, velX, velY, liveCount } = system;
+        const { x, y, strength, radius } = this;
+        const radiusSq = radius * radius;
+        for (let i = 0; i < liveCount; i++) {
+            const dx = posX[i] - x;
+            const dy = posY[i] - y;
+            const distSq = dx * dx + dy * dy;
+            if (distSq < 1e-10)
+                continue;
+            if (radius > 0 && distSq > radiusSq)
+                continue;
+            const dist = Math.sqrt(distSq);
+            const falloff = radius > 0 ? 1 - dist / radius : 1;
+            const a = (strength * falloff * dt) / dist;
+            velX[i] += dx * a;
+            velY[i] += dy * a;
+        }
+    }
+    wgsl() {
+        return {
+            key: 'RepelFromPoint',
+            uniforms: [
+                { name: 'point', type: 'vec2<f32>' },
+                { name: 'strength', type: 'f32' },
+                { name: 'radius', type: 'f32' },
+            ],
+            body: `
+                let repelDelta = positions[idx] - modules.u_RepelFromPoint.point;
+                let repelDistSq = dot(repelDelta, repelDelta);
+                let repelRadius = modules.u_RepelFromPoint.radius;
+                let repelInRange = (repelRadius <= 0.0) || (repelDistSq <= repelRadius * repelRadius);
+                if (repelDistSq > 0.0000001 && repelInRange) {
+                    let repelDist = sqrt(repelDistSq);
+                    let repelFalloff = select(1.0, 1.0 - repelDist / max(repelRadius, 0.000001), repelRadius > 0.0);
+                    let repelAccel = (modules.u_RepelFromPoint.strength * repelFalloff * dt) / repelDist;
+                    velocities[idx] = velocities[idx] + repelDelta * repelAccel;
+                }
+            `,
+        };
+    }
+    writeUniforms(view, offset) {
+        view.setFloat32(offset + 0, this.x, true);
+        view.setFloat32(offset + 4, this.y, true);
+        view.setFloat32(offset + 8, this.strength, true);
+        view.setFloat32(offset + 12, this.radius, true);
+    }
+}
+
+/**
+ * Applies a tangential acceleration around a center point — perpendicular
+ * to the radial vector `(particle − center)`. Combined with an attract /
+ * repel module that controls the radial distance, this produces orbital,
+ * spiral, or vortex motion.
+ *
+ * `angularSpeed` is the target angular velocity in radians/second. The
+ * effective tangential acceleration scales with `radius * angularSpeed`,
+ * so distant particles get pushed harder (matching uniform circular
+ * motion). Positive values orbit counter-clockwise, negative clockwise.
+ *
+ * Use cases: galactic spirals, smoke vortices around an attractor, wind
+ * eddies. Layer with {@link AttractToPoint} for stable orbits.
+ *
+ * GPU-eligible.
+ */
+class OrbitalForce extends UpdateModule {
+    x;
+    y;
+    angularSpeed;
+    constructor(x, y, angularSpeed) {
+        super();
+        this.x = x;
+        this.y = y;
+        this.angularSpeed = angularSpeed;
+    }
+    apply(system, dt) {
+        const { posX, posY, velX, velY, liveCount } = system;
+        const { x, y, angularSpeed } = this;
+        const omega = angularSpeed * dt;
+        for (let i = 0; i < liveCount; i++) {
+            const dx = posX[i] - x;
+            const dy = posY[i] - y;
+            // Perpendicular vector: (-dy, dx) for counter-clockwise.
+            velX[i] += -dy * omega;
+            velY[i] += dx * omega;
+        }
+    }
+    wgsl() {
+        return {
+            key: 'OrbitalForce',
+            uniforms: [
+                { name: 'center', type: 'vec2<f32>' },
+                { name: 'angularSpeed', type: 'f32' },
+                { name: '_pad0', type: 'f32' },
+            ],
+            body: `
+                let orbitDelta = positions[idx] - modules.u_OrbitalForce.center;
+                let orbitOmega = modules.u_OrbitalForce.angularSpeed * dt;
+                velocities[idx] = velocities[idx] + vec2<f32>(-orbitDelta.y, orbitDelta.x) * orbitOmega;
+            `,
+        };
+    }
+    writeUniforms(view, offset) {
+        view.setFloat32(offset + 0, this.x, true);
+        view.setFloat32(offset + 4, this.y, true);
+        view.setFloat32(offset + 8, this.angularSpeed, true);
+        view.setFloat32(offset + 12, 0, true);
+    }
+}
+
+/**
+ * Adds a smooth pseudo-random force field that animates over time.
+ * Implemented as 2D value noise with cubic Hermite smoothing — sampled
+ * twice per particle (offset to decorrelate x and y components) and scaled
+ * by `strength`. The field evolves at `timeScale` units per second; lower
+ * values produce slow-moving currents, higher values produce buzzy chaos.
+ *
+ * `frequency` controls the spatial granularity: small values (≈ 0.005)
+ * yield broad swirls across the playfield, large values (≈ 0.1) produce
+ * tight per-particle jitter.
+ *
+ * Use cases: smoke turbulence, organic swirls, wind eddies, dust haze.
+ * Pair with {@link Drag} to keep particle velocities bounded.
+ *
+ * GPU-eligible. The noise function is identical on CPU and GPU so visual
+ * results match across backends (modulo float precision).
+ */
+class Turbulence extends UpdateModule {
+    strength;
+    frequency;
+    timeScale;
+    _time = 0;
+    constructor(strength, frequency = 0.01, timeScale = 1) {
+        super();
+        this.strength = strength;
+        this.frequency = frequency;
+        this.timeScale = timeScale;
+    }
+    apply(system, dt) {
+        this._time += dt * this.timeScale;
+        const t = this._time;
+        const f = this.frequency;
+        const s = this.strength * dt;
+        const { posX, posY, velX, velY, liveCount } = system;
+        for (let i = 0; i < liveCount; i++) {
+            const x = posX[i] * f;
+            const y = posY[i] * f;
+            const nx = valueNoise2(x + t, y);
+            const ny = valueNoise2(x, y + t + 17.31);
+            velX[i] += (nx * 2 - 1) * s;
+            velY[i] += (ny * 2 - 1) * s;
+        }
+    }
+    wgsl() {
+        return {
+            key: 'Turbulence',
+            uniforms: [
+                { name: 'strength', type: 'f32' },
+                { name: 'frequency', type: 'f32' },
+                { name: 'time', type: 'f32' },
+                { name: '_pad0', type: 'f32' },
+            ],
+            prelude: `
+fn exojs_turbulence_hash21(p: vec2<f32>) -> f32 {
+    let n = sin(dot(p, vec2<f32>(127.1, 311.7))) * 43758.5453;
+    return fract(n);
+}
+
+fn exojs_turbulence_valueNoise2(x: f32, y: f32) -> f32 {
+    let xi = floor(x);
+    let yi = floor(y);
+    let xf = x - xi;
+    let yf = y - yi;
+    let u = xf * xf * (3.0 - 2.0 * xf);
+    let v = yf * yf * (3.0 - 2.0 * yf);
+    let a = exojs_turbulence_hash21(vec2<f32>(xi, yi));
+    let b = exojs_turbulence_hash21(vec2<f32>(xi + 1.0, yi));
+    let c = exojs_turbulence_hash21(vec2<f32>(xi, yi + 1.0));
+    let d = exojs_turbulence_hash21(vec2<f32>(xi + 1.0, yi + 1.0));
+    let ab = a + (b - a) * u;
+    let cd = c + (d - c) * u;
+    return ab + (cd - ab) * v;
+}
+            `,
+            body: `
+                let turbF = modules.u_Turbulence.frequency;
+                let turbT = modules.u_Turbulence.time;
+                let turbS = modules.u_Turbulence.strength * dt;
+                let turbX = positions[idx].x * turbF;
+                let turbY = positions[idx].y * turbF;
+                let turbNx = exojs_turbulence_valueNoise2(turbX + turbT, turbY);
+                let turbNy = exojs_turbulence_valueNoise2(turbX, turbY + turbT + 17.31);
+                velocities[idx] = velocities[idx] + vec2<f32>(turbNx * 2.0 - 1.0, turbNy * 2.0 - 1.0) * turbS;
+            `,
+        };
+    }
+    writeUniforms(view, offset, dt) {
+        // GPU mode: apply() never runs, so advance _time here once per frame.
+        // CPU mode: apply() already advances _time before update finishes,
+        // and writeUniforms is not called → no double-advance.
+        this._time += dt * this.timeScale;
+        view.setFloat32(offset + 0, this.strength, true);
+        view.setFloat32(offset + 4, this.frequency, true);
+        view.setFloat32(offset + 8, this._time, true);
+        view.setFloat32(offset + 12, 0, true);
+    }
+}
+function hash21(x, y) {
+    let n = Math.sin(x * 127.1 + y * 311.7) * 43758.5453;
+    n = n - Math.floor(n);
+    return n;
+}
+function valueNoise2(x, y) {
+    const xi = Math.floor(x);
+    const yi = Math.floor(y);
+    const xf = x - xi;
+    const yf = y - yi;
+    const u = xf * xf * (3 - 2 * xf);
+    const v = yf * yf * (3 - 2 * yf);
+    const a = hash21(xi, yi);
+    const b = hash21(xi + 1, yi);
+    const c = hash21(xi, yi + 1);
+    const d = hash21(xi + 1, yi + 1);
+    const ab = a + (b - a) * u;
+    const cd = c + (d - c) * u;
+    return ab + (cd - ab) * v;
+}
+
+/**
+ * Sub-emitter: triggers a child {@link SpawnModule} on a target system at
+ * the dying particle's position. Use for explosion-on-impact, sparks at
+ * end-of-life, multi-stage VFX.
+ *
+ * The child module receives a synthesized `dt` of 0 — it must spawn
+ * immediately rather than rely on rate accumulation. {@link BurstSpawn}
+ * works naturally; {@link RateSpawn} is the wrong fit here.
+ *
+ * Position is the only field forwarded — child distributions decide
+ * everything else. To keep child particles riding the parent's velocity,
+ * configure the child's velocity distribution to match.
+ */
+class SpawnOnDeath extends DeathModule {
+    targetSystem;
+    spawner;
+    /** Number of times to invoke the spawner per dying particle. Default 1. */
+    count;
+    constructor(targetSystem, spawner, count = 1) {
+        super();
+        this.targetSystem = targetSystem;
+        this.spawner = spawner;
+        this.count = count;
+    }
+    onDeath(parent, slot) {
+        const target = this.targetSystem;
+        const x = parent.posX[slot];
+        const y = parent.posY[slot];
+        // Snapshot the target's pre-spawn count so we can apply the
+        // position to whichever slots the spawner adds.
+        const before = target.liveCount;
+        for (let n = 0; n < this.count; n++) {
+            this.spawner.apply(target, 0);
+        }
+        const added = target.liveCount - before;
+        for (let i = 0; i < added; i++) {
+            const dst = before + i;
+            target.posX[dst] += x;
+            target.posY[dst] += y;
+        }
+    }
+}
+
+/**
+ * Immediate-mode 2D shape API backed by {@link Mesh} children.
+ *
+ * Each draw call (e.g. `drawCircle`, `drawRectangle`, `drawLine`) appends a
+ * new {@link Mesh} child colored with the current `fillColor` or `lineColor`.
+ * The active `lineWidth` controls stroke thickness for path and outline draws.
+ * Path commands (`moveTo`, `lineTo`, `quadraticCurveTo`, etc.) track a cursor
+ * point and flush a Mesh on each segment.
  *
  * Call {@link clear} to remove all child meshes and reset pen state. Because
  * each shape is a separate Mesh, `Graphics` inherits full filter, blend,
@@ -25850,10 +27868,10 @@ class Graphics extends Container {
         }
         let sweep = endAngle - startAngle;
         if (!anticlockwise && sweep < 0) {
-            sweep += tau;
+            sweep += tau$2;
         }
         else if (anticlockwise && sweep > 0) {
-            sweep -= tau;
+            sweep -= tau$2;
         }
         if (sweep === 0) {
             return this;
@@ -26013,109 +28031,6 @@ function upgradeFragmentShaderToGl300(source) {
     return header + transformed;
 }
 
-/**
- * Slices a single {@link Texture} into named frames and optional named
- * animation sequences.
- *
- * Each frame is stored as both a {@link Rectangle} (the pixel region) and a
- * pre-configured {@link Sprite} ready for direct rendering. Animations are
- * ordered lists of frame names that {@link AnimatedSprite.fromSpritesheet}
- * consumes to create playback clips.
- */
-class Spritesheet {
-    texture;
-    frames = new Map();
-    sprites = new Map();
-    animations = new Map();
-    constructor(texture, data) {
-        this.texture = texture;
-        this.parse(data);
-    }
-    /**
-     * Parse a {@link SpritesheetData} descriptor, populating `frames`,
-     * `sprites`, and `animations`. When `keepFrames` is `false` (default),
-     * all existing frames and sprites are destroyed before parsing.
-     */
-    parse(data, keepFrames = false) {
-        if (!keepFrames) {
-            this.clear();
-        }
-        for (const [name, frame] of Object.entries(data.frames)) {
-            this.addFrame(name, frame);
-        }
-        if (data.animations) {
-            for (const [animationName, frameNames] of Object.entries(data.animations)) {
-                this.defineAnimation(animationName, frameNames);
-            }
-        }
-    }
-    /** Register a single frame by name, creating its {@link Rectangle} and pre-configured {@link Sprite}. */
-    addFrame(name, data) {
-        const { x, y, w, h } = data.frame;
-        const frame = new Rectangle(x, y, w, h);
-        const sprite = new Sprite(this.texture);
-        sprite.setTextureFrame(frame);
-        this.frames.set(name, frame);
-        this.sprites.set(name, sprite);
-    }
-    /** Register an animation sequence as an ordered list of frame names. All referenced frames must already exist. */
-    defineAnimation(name, frameNames) {
-        if (name.trim().length === 0) {
-            throw new Error('Spritesheet animation names must be non-empty strings.');
-        }
-        if (!Array.isArray(frameNames) || frameNames.length === 0) {
-            throw new Error(`Spritesheet animation "${name}" must reference at least one frame.`);
-        }
-        for (const frameName of frameNames) {
-            if (!this.frames.has(frameName)) {
-                throw new Error(`Spritesheet animation "${name}" references missing frame "${frameName}".`);
-            }
-        }
-        this.animations.set(name, [...frameNames]);
-        return this;
-    }
-    /** Return the {@link Rectangle} for the named frame. Throws if the frame does not exist. */
-    getFrame(name) {
-        const frame = this.frames.get(name);
-        if (!frame) {
-            throw new Error(`Spritesheet frame named ${name} is not available!`);
-        }
-        return frame;
-    }
-    /** Return the ordered frame-name list for the named animation. Throws if the animation does not exist. */
-    getAnimationFrameNames(name) {
-        const frames = this.animations.get(name);
-        if (!frames) {
-            throw new Error(`Spritesheet animation named ${name} is not available!`);
-        }
-        return frames;
-    }
-    /** Return the pre-configured {@link Sprite} for the named frame. Throws if the frame does not exist. */
-    getFrameSprite(name) {
-        const sprite = this.sprites.get(name);
-        if (!sprite) {
-            throw new Error(`Spritesheet frame named ${name} is not available!`);
-        }
-        return sprite;
-    }
-    /** Destroy all registered frames, sprites, and animations, resetting the spritesheet to an empty state. */
-    clear() {
-        for (const frame of this.frames.values()) {
-            frame.destroy();
-        }
-        this.frames.clear();
-        for (const sprite of this.sprites.values()) {
-            sprite.destroy();
-        }
-        this.sprites.clear();
-        this.animations.clear();
-        return this;
-    }
-    destroy() {
-        this.clear();
-    }
-}
-
 const defaultClipFps = 12;
 /**
  * A {@link Sprite} that advances through a sequence of texture-frame
@@ -28227,5 +30142,5 @@ class IndexedDbStore {
     }
 }
 
-export { AbstractAssetFactory, AbstractMedia, AbstractWebGl2BatchedRenderer, AbstractWebGl2Renderer, AbstractWebGpuRenderer, AnimatedSprite, Application, ApplicationStatus, ArcadeStickGamepadMapping, AudioAnalyser, AudioBus, AudioFilter, AudioListener, AudioManager, BeatDetector, BinaryFactory, BlendModes, BlurFilter, Bounds, BufferTypes, BufferUsage, BundleLoadError, CacheFirstStrategy, CallbackRenderPass, Capabilities, ChannelOffset, ChannelSize, ChorusFilter, Circle, Clock, CollisionType, Color, ColorAffector, ColorFilter, CompressorFilter, Container, DelayFilter, Drawable, DuckingFilter, DynamicGlyphAtlas, Ease, Ellipse, Envelope, EqualizerFilter, FactoryRegistry, Filter, Flags, FontFactory, ForceAffector, GameCubeGamepadMapping, Gamepad, GamepadAxis, GamepadButton, GamepadMapping, GamepadMappingFamily, GamepadPromptLayouts, GenericDualAnalogGamepadMapping, GranularFilter, Graphics, HighpassFilter, ImageFactory, IndexedDbDatabase, IndexedDbStore, InputBinding, InputManager, InteractionEvent, InteractionManager, Interval, JoyConLeftGamepadMapping, JoyConRightGamepadMapping, Json, JsonFactory, Keyboard, Line, Loader, LowpassFilter, Matrix, Mesh, Music, MusicFactory, NetworkOnlyStrategy, ObservableSize, ObservableVector, OscillatorSound, Particle, ParticleOptions, ParticleSystem, PitchShiftFilter, PlayStationGamepadMapping, Pointer, PointerState, PointerStateFlag, PolarVector, Polygon, Quadtree, Random, Rectangle, RenderBackendType, RenderNode, RenderTarget, RenderTargetPass, RenderTexture, RendererRegistry, RenderingPrimitives, ReverbFilter, Sampler, ScaleAffector, ScaleModes, Scene, SceneManager, SceneNode, Segment, Shader, ShaderAttribute, ShaderPrimitives, ShaderUniform, Signal, Size, Sound, SoundFactory, SoundPoolStrategy, Sprite, SpriteFlags, Spritesheet, SteamControllerGamepadMapping, SteamDeckGamepadMapping, SvgAsset, SvgFactory, SwitchProGamepadMapping, Text, TextAsset, TextFactory, TextStyle, Texture, TextureFactory, Time, Timer, TorqueAffector, Tween, TweenManager, TweenState, UniversalEmitter, Vector, Video, VideoFactory, View, ViewFlags, VocoderFilter, VoronoiRegion, VttAsset, VttFactory, WasmFactory, WebGl2Backend, WebGl2MeshRenderer, WebGl2ParticleRenderer, WebGl2RenderBuffer, WebGl2ShaderBlock, WebGl2ShaderFilter, WebGl2SpriteRenderer, WebGl2VertexArrayObject, WebGpuBackend, WebGpuMeshRenderer, WebGpuParticleRenderer, WebGpuShaderFilter, WebGpuSpriteRenderer, WorkletFilter, WrapModes, XboxGamepadMapping, bezierCurveTo, buildCircle, buildEllipse, buildLine, buildPath, buildPolygon, buildRectangle, buildStar, builtInGamepadDefinitions, canvasSourceToDataUrl, clamp, createRenderStats, createWebGl2ShaderProgram, crossFade, decodeAudioData, defineAssetManifest, degreesPerRadian, degreesToRadians, determineMimeType, emptyArrayBuffer, getAudioContext, getAudioManager, getCanvasSourceSize, getCollisionCircleCircle, getCollisionCircleRectangle, getCollisionEllipseCircle, getCollisionEllipseRectangle, getCollisionPolygonCircle, getCollisionRectangleRectangle, getCollisionSat, getDistance, getOfflineAudioContext, getPreciseTime, getTextureSourceSize, getVoronoiRegion$1 as getVoronoiRegion, getWebGpuBlendState, hours, inRange, intersectionCircleCircle, intersectionCircleEllipse, intersectionCirclePoly, intersectionEllipseEllipse, intersectionEllipsePoly, intersectionLineCircle, intersectionLineEllipse, intersectionLineLine, intersectionLinePoly, intersectionLineRect, intersectionPointCircle, intersectionPointEllipse, intersectionPointLine, intersectionPointPoint, intersectionPointPoly, intersectionPointRect, intersectionPolyPoly, intersectionRectCircle, intersectionRectEllipse, intersectionRectPoly, intersectionRectRect, intersectionSat, isAudioContextReady, isPowerOfTwo, layoutText, lerp, matchesIds, maxPointers, milliseconds, minutes, noop$1 as noop, onAudioContextReady, parseGamepadDescriptor, pointerSlotSize, quadraticCurveTo, radiansPerDegree, radiansToDegrees, rand, registerWorkletProcessor, removeArrayItems, resetRenderStats, resolveDefinition, resolveGamepadDefinition, seconds, sign, stopEvent, substepSweep, supportsCodec, supportsEventOptions, supportsIndexedDb, supportsPointerEvents, supportsTouchEvents, supportsWebAudio, sweepCircleAgainst, sweepCircleVsCircle, sweepCircleVsRectangle, sweepRectangle, sweepRectangleAgainst, tau, trimRotation, upgradeFragmentShaderToGl300, webGl2PrimitiveArrayConstructors, webGl2PrimitiveByteSizeMapping, webGl2PrimitiveTypeNames };
+export { AbstractAssetFactory, AbstractMedia, AbstractWebGl2BatchedRenderer, AbstractWebGl2Renderer, AbstractWebGpuRenderer, AlphaFadeOverLifetime, AnimatedSprite, Application, ApplicationStatus, ApplyForce, ArcadeStickGamepadMapping, AttractToPoint, AudioAnalyser, AudioBus, AudioFilter, AudioListener, AudioManager, BeatDetector, BinaryFactory, BlendModes, BlurFilter, Bounds, BoxArea, BufferTypes, BufferUsage, BundleLoadError, BurstSpawn, CacheFirstStrategy, CallbackRenderPass, Capabilities, ChannelOffset, ChannelSize, ChorusFilter, Circle, CircleArea, Clock, CollisionType, Color, ColorFilter, ColorOverLifetime, ColorOverSpeed, CompressorFilter, ConeDirection, Constant, Container, Curve, DeathModule, DelayFilter, Drag, Drawable, DuckingFilter, DynamicGlyphAtlas, Ease, Ellipse, Envelope, EqualizerFilter, FactoryRegistry, Filter, Flags, FontFactory, GameCubeGamepadMapping, Gamepad, GamepadAxis, GamepadButton, GamepadMapping, GamepadMappingFamily, GamepadPromptLayouts, GenericDualAnalogGamepadMapping, Gradient, GranularFilter, Graphics, HighpassFilter, ImageFactory, IndexedDbDatabase, IndexedDbStore, InputBinding, InputManager, InteractionEvent, InteractionManager, Interval, JoyConLeftGamepadMapping, JoyConRightGamepadMapping, Json, JsonFactory, Keyboard, Line, LineSegment, Loader, LowpassFilter, Matrix, Mesh, Music, MusicFactory, NetworkOnlyStrategy, ObservableSize, ObservableVector, OrbitalForce, OscillatorSound, ParticleSystem, PitchShiftFilter, PlayStationGamepadMapping, Pointer, PointerState, PointerStateFlag, PolarVector, Polygon, Quadtree, Random, Range, RateSpawn, Rectangle, RenderBackendType, RenderNode, RenderTarget, RenderTargetPass, RenderTexture, RendererRegistry, RenderingPrimitives, RepelFromPoint, ReverbFilter, RotateOverLifetime, Sampler, ScaleModes, ScaleOverLifetime, Scene, SceneManager, SceneNode, Segment, Shader, ShaderAttribute, ShaderPrimitives, ShaderUniform, Signal, Size, Sound, SoundFactory, SoundPoolStrategy, SpawnModule, SpawnOnDeath, Sprite, SpriteFlags, Spritesheet, SteamControllerGamepadMapping, SteamDeckGamepadMapping, SvgAsset, SvgFactory, SwitchProGamepadMapping, Text, TextAsset, TextFactory, TextStyle, Texture, TextureFactory, Time, Timer, Turbulence, Tween, TweenManager, TweenState, UpdateModule, Vector, VectorRange, VelocityOverLifetime, Video, VideoFactory, View, ViewFlags, VocoderFilter, VoronoiRegion, VttAsset, VttFactory, WasmFactory, WebGl2Backend, WebGl2MeshRenderer, WebGl2ParticleRenderer, WebGl2RenderBuffer, WebGl2ShaderBlock, WebGl2ShaderFilter, WebGl2SpriteRenderer, WebGl2VertexArrayObject, WebGpuBackend, WebGpuMeshRenderer, WebGpuParticleRenderer, WebGpuShaderFilter, WebGpuSpriteRenderer, WorkletFilter, WrapModes, XboxGamepadMapping, bezierCurveTo, buildCircle, buildEllipse, buildLine, buildPath, buildPolygon, buildRectangle, buildStar, builtInGamepadDefinitions, canvasSourceToDataUrl, clamp, createRenderStats, createWebGl2ShaderProgram, crossFade, decodeAudioData, defineAssetManifest, degreesPerRadian, degreesToRadians, determineMimeType, emptyArrayBuffer, getAudioContext, getAudioManager, getCanvasSourceSize, getCollisionCircleCircle, getCollisionCircleRectangle, getCollisionEllipseCircle, getCollisionEllipseRectangle, getCollisionPolygonCircle, getCollisionRectangleRectangle, getCollisionSat, getDistance, getOfflineAudioContext, getPreciseTime, getTextureSourceSize, getVoronoiRegion$1 as getVoronoiRegion, getWebGpuBlendState, hours, inRange, intersectionCircleCircle, intersectionCircleEllipse, intersectionCirclePoly, intersectionEllipseEllipse, intersectionEllipsePoly, intersectionLineCircle, intersectionLineEllipse, intersectionLineLine, intersectionLinePoly, intersectionLineRect, intersectionPointCircle, intersectionPointEllipse, intersectionPointLine, intersectionPointPoint, intersectionPointPoly, intersectionPointRect, intersectionPolyPoly, intersectionRectCircle, intersectionRectEllipse, intersectionRectPoly, intersectionRectRect, intersectionSat, isAudioContextReady, isPowerOfTwo, layoutText, lerp, matchesIds, maxPointers, milliseconds, minutes, noop$1 as noop, onAudioContextReady, parseGamepadDescriptor, pointerSlotSize, quadraticCurveTo, radiansPerDegree, radiansToDegrees, rand, registerWorkletProcessor, removeArrayItems, resetRenderStats, resolveDefinition, resolveGamepadDefinition, seconds, sign, stopEvent, substepSweep, supportsCodec, supportsEventOptions, supportsIndexedDb, supportsPointerEvents, supportsTouchEvents, supportsWebAudio, sweepCircleAgainst, sweepCircleVsCircle, sweepCircleVsRectangle, sweepRectangle, sweepRectangleAgainst, tau$2 as tau, trimRotation, upgradeFragmentShaderToGl300, webGl2PrimitiveArrayConstructors, webGl2PrimitiveByteSizeMapping, webGl2PrimitiveTypeNames, wgslFieldLayout, wgslUniformByteSize };
 //# sourceMappingURL=exo.esm.js.map