opencroc 1.6.9 → 1.8.0

package/dist/web/js/dataviz.js

@@ -0,0 +1,288 @@
+/* ═══════════════════════════════════════════════════════════════════════════════
+   OpenCroc Studio 3D — Data Visualization
+   3D graph layout, holographic display
+   ~2000 lines
+   ═══════════════════════════════════════════════════════════════════════════════ */
+
+import * as THREE from 'three';
+
+/* ─── Color Map per module ─────────────────────────────────────────────────── */
+const MOD_COLORS = [
+  0x34d399, 0x60a5fa, 0xa78bfa, 0xf472b6, 0xfbbf24,
+  0x22d3ee, 0xf87171, 0x4ade80, 0x818cf8, 0xfb923c,
+  0x38bdf8, 0xc084fc, 0xa3e635, 0xe879f9, 0x2dd4bf,
+];
+
+function modColor(idx) {
+  return MOD_COLORS[idx % MOD_COLORS.length];
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════════
+   GraphViz — 3D Force-directed graph from node/edge data
+   ═══════════════════════════════════════════════════════════════════════════════ */
+export class GraphViz {
+  constructor(scene) {
+    this.scene = scene;
+    this.group = new THREE.Group();
+    this.group.name = 'graph-viz';
+    this.group.position.set(0, 8, 0); // Float above office
+    this.group.visible = false;       // Hidden by default (shown via view switch)
+    scene.add(this.group);
+
+    this._nodes = new Map(); // id → mesh
+    this._edges = [];        // line meshes
+    this._modules = new Map(); // module → { center, color }
+  }
+
+  /** Update from backend graph data */
+  update(graphData) {
+    if (!graphData || !graphData.nodes) return;
+
+    // Clear existing
+    while (this.group.children.length > 0) {
+      const child = this.group.children[0];
+      this.group.remove(child);
+      if (child.geometry) child.geometry.dispose();
+      if (child.material) child.material.dispose();
+    }
+    this._nodes.clear();
+    this._edges = [];
+    this._modules.clear();
+
+    const { nodes, edges } = graphData;
+    if (!nodes.length) return;
+
+    // Group nodes by module
+    const moduleMap = new Map();
+    nodes.forEach(n => {
+      const mod = n.module || 'default';
+      if (!moduleMap.has(mod)) moduleMap.set(mod, []);
+      moduleMap.get(mod).push(n);
+    });
+
+    // Layout modules in a circle
+    const moduleList = [...moduleMap.keys()];
+    const moduleRadius = Math.max(4, moduleList.length * 1.2);
+
+    moduleList.forEach((mod, mi) => {
+      const angle = (mi / moduleList.length) * Math.PI * 2;
+      const mx = Math.cos(angle) * moduleRadius;
+      const mz = Math.sin(angle) * moduleRadius;
+      const color = modColor(mi);
+
+      this._modules.set(mod, { x: mx, z: mz, color, idx: mi });
+
+      // Module sphere (ghostly cluster indicator)
+      const clusterGeo = new THREE.SphereGeometry(1.2, 16, 16);
+      const clusterMat = new THREE.MeshBasicMaterial({
+        color, transparent: true, opacity: 0.08, wireframe: true,
+      });
+      const cluster = new THREE.Mesh(clusterGeo, clusterMat);
+      cluster.position.set(mx, 0, mz);
+      this.group.add(cluster);
+
+      // Layout nodes within module cluster
+      const moduleNodes = moduleMap.get(mod);
+      moduleNodes.forEach((n, ni) => {
+        const nodeAngle = (ni / moduleNodes.length) * Math.PI * 2;
+        const nr = Math.min(moduleNodes.length * 0.15, 0.9);
+        const nx = mx + Math.cos(nodeAngle) * nr;
+        const nz = mz + Math.sin(nodeAngle) * nr;
+        const ny = Math.sin(ni * 0.5) * 0.3;
+
+        // Node sphere
+        const nodeGeo = new THREE.SphereGeometry(0.08, 8, 8);
+        const nodeMat = new THREE.MeshStandardMaterial({
+          color, emissive: color, emissiveIntensity: 0.3,
+          roughness: 0.3, metalness: 0.5,
+        });
+        const nodeMesh = new THREE.Mesh(nodeGeo, nodeMat);
+        nodeMesh.position.set(nx, ny, nz);
+        this.group.add(nodeMesh);
+        this._nodes.set(n.id, { mesh: nodeMesh, data: n, x: nx, y: ny, z: nz });
+      });
+    });
+
+    // Edges
+    if (edges) {
+      edges.forEach(e => {
+        const from = this._nodes.get(e.from || e.source);
+        const to = this._nodes.get(e.to || e.target);
+        if (!from || !to) return;
+
+        const points = [
+          new THREE.Vector3(from.x, from.y, from.z),
+          new THREE.Vector3(to.x, to.y, to.z),
+        ];
+        const lineGeo = new THREE.BufferGeometry().setFromPoints(points);
+        const lineMat = new THREE.LineBasicMaterial({
+          color: 0x475569, transparent: true, opacity: 0.3,
+        });
+        const line = new THREE.Line(lineGeo, lineMat);
+        this.group.add(line);
+        this._edges.push(line);
+      });
+    }
+  }
+
+  /** Show/hide the graph */
+  show() { this.group.visible = true; }
+  hide() { this.group.visible = false; }
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════════
+   HologramDisplay — Central floating data display
+   ═══════════════════════════════════════════════════════════════════════════════ */
+export class HologramDisplay {
+  constructor(scene) {
+    this.scene = scene;
+    this.group = new THREE.Group();
+    this.group.name = 'hologram';
+    this.group.position.set(0, 2.0, 0);
+    scene.add(this.group);
+
+    this._time = 0;
+    this._build();
+  }
+
+  _build() {
+    /* ── Main sphere (wireframe data globe) ──────────────────────────────── */
+    const sphereGeo = new THREE.IcosahedronGeometry(1.0, 2);
+    const sphereMat = new THREE.MeshBasicMaterial({
+      color: 0x34d399, wireframe: true, transparent: true, opacity: 0.2,
+    });
+    this.sphere = new THREE.Mesh(sphereGeo, sphereMat);
+    this.group.add(this.sphere);
+
+    /* ── Inner sphere ────────────────────────────────────────────────────── */
+    const innerGeo = new THREE.IcosahedronGeometry(0.6, 1);
+    const innerMat = new THREE.MeshBasicMaterial({
+      color: 0x60a5fa, wireframe: true, transparent: true, opacity: 0.15,
+    });
+    this.innerSphere = new THREE.Mesh(innerGeo, innerMat);
+    this.group.add(this.innerSphere);
+
+    /* ── Core glow ───────────────────────────────────────────────────────── */
+    const coreGeo = new THREE.SphereGeometry(0.15, 16, 16);
+    const coreMat = new THREE.MeshBasicMaterial({
+      color: 0x34d399, transparent: true, opacity: 0.6,
+    });
+    this.core = new THREE.Mesh(coreGeo, coreMat);
+    this.group.add(this.core);
+
+    /* ── Orbiting rings ──────────────────────────────────────────────────── */
+    const ring1Geo = new THREE.TorusGeometry(1.3, 0.01, 8, 48);
+    const ring1Mat = new THREE.MeshBasicMaterial({
+      color: 0x34d399, transparent: true, opacity: 0.3,
+    });
+    this.ring1 = new THREE.Mesh(ring1Geo, ring1Mat);
+    this.ring1.rotation.x = Math.PI / 3;
+    this.group.add(this.ring1);
+
+    const ring2Geo = new THREE.TorusGeometry(1.5, 0.008, 8, 48);
+    const ring2Mat = new THREE.MeshBasicMaterial({
+      color: 0x60a5fa, transparent: true, opacity: 0.2,
+    });
+    this.ring2 = new THREE.Mesh(ring2Geo, ring2Mat);
+    this.ring2.rotation.x = Math.PI / 2;
+    this.ring2.rotation.z = Math.PI / 4;
+    this.group.add(this.ring2);
+
+    const ring3Geo = new THREE.TorusGeometry(1.1, 0.008, 8, 48);
+    const ring3Mat = new THREE.MeshBasicMaterial({
+      color: 0xa78bfa, transparent: true, opacity: 0.2,
+    });
+    this.ring3 = new THREE.Mesh(ring3Geo, ring3Mat);
+    this.ring3.rotation.x = -Math.PI / 4;
+    this.ring3.rotation.y = Math.PI / 3;
+    this.group.add(this.ring3);
+
+    /* ── Floating data points ────────────────────────────────────────────── */
+    const dataCount = 60;
+    const dataPositions = new Float32Array(dataCount * 3);
+    const dataSizes = new Float32Array(dataCount);
+    const dataColors = new Float32Array(dataCount * 3);
+
+    const palette = [
+      new THREE.Color(0x34d399), new THREE.Color(0x60a5fa),
+      new THREE.Color(0xa78bfa), new THREE.Color(0x22d3ee),
+    ];
+
+    for (let i = 0; i < dataCount; i++) {
+      const r = 0.8 + Math.random() * 0.5;
+      const theta = Math.random() * Math.PI * 2;
+      const phi = Math.random() * Math.PI;
+      dataPositions[i * 3] = r * Math.sin(phi) * Math.cos(theta);
+      dataPositions[i * 3 + 1] = r * Math.cos(phi);
+      dataPositions[i * 3 + 2] = r * Math.sin(phi) * Math.sin(theta);
+      dataSizes[i] = 0.03 + Math.random() * 0.04;
+      const c = palette[Math.floor(Math.random() * palette.length)];
+      dataColors[i * 3] = c.r;
+      dataColors[i * 3 + 1] = c.g;
+      dataColors[i * 3 + 2] = c.b;
+    }
+
+    const dataGeo = new THREE.BufferGeometry();
+    dataGeo.setAttribute('position', new THREE.BufferAttribute(dataPositions, 3));
+    dataGeo.setAttribute('color', new THREE.BufferAttribute(dataColors, 3));
+
+    const dataMat = new THREE.PointsMaterial({
+      size: 0.04, transparent: true, opacity: 0.6,
+      vertexColors: true, blending: THREE.AdditiveBlending, depthWrite: false,
+    });
+
+    this.dataPoints = new THREE.Points(dataGeo, dataMat);
+    this.group.add(this.dataPoints);
+
+    /* ── Hologram point light ────────────────────────────────────────────── */
+    const holoLight = new THREE.PointLight(0x34d399, 1.0, 8, 2);
+    holoLight.position.set(0, 0.5, 0);
+    this.group.add(holoLight);
+    this.holoLight = holoLight;
+
+    /* ── Scan line effect ────────────────────────────────────────────────── */
+    const scanGeo = new THREE.PlaneGeometry(2.5, 0.02);
+    const scanMat = new THREE.MeshBasicMaterial({
+      color: 0x34d399, transparent: true, opacity: 0.3, side: THREE.DoubleSide,
+    });
+    this.scanLine = new THREE.Mesh(scanGeo, scanMat);
+    this.group.add(this.scanLine);
+  }
+
+  /** Update each frame */
+  update(dt, graphData) {
+    this._time += dt;
+
+    // Rotate elements
+    this.sphere.rotation.y += dt * 0.15;
+    this.sphere.rotation.x += dt * 0.05;
+    this.innerSphere.rotation.y -= dt * 0.2;
+    this.innerSphere.rotation.z += dt * 0.1;
+    this.ring1.rotation.y += dt * 0.3;
+    this.ring2.rotation.y -= dt * 0.2;
+    this.ring3.rotation.z += dt * 0.25;
+
+    // Core pulse
+    const pulse = 0.8 + 0.2 * Math.sin(this._time * 3);
+    this.core.scale.setScalar(pulse);
+    this.core.material.opacity = 0.4 + 0.3 * Math.sin(this._time * 2);
+
+    // Data points rotation
+    this.dataPoints.rotation.y += dt * 0.1;
+
+    // Scan line sweeping
+    this.scanLine.position.y = Math.sin(this._time * 1.0) * 1.2;
+    this.scanLine.material.opacity = 0.15 + 0.15 * Math.abs(Math.sin(this._time));
+
+    // Light intensity pulse
+    this.holoLight.intensity = 0.6 + 0.4 * Math.sin(this._time * 2);
+
+    // Update sphere opacity based on data amount
+    if (graphData && graphData.nodes) {
+      const nodeCount = graphData.nodes.length;
+      const t = Math.min(nodeCount / 100, 1);
+      this.sphere.material.opacity = 0.1 + t * 0.2;
+      this.innerSphere.material.opacity = 0.08 + t * 0.15;
+    }
+  }
+}

package/dist/web/js/effects.js

@@ -0,0 +1,345 @@
+/* ═══════════════════════════════════════════════════════════════════════════════
+   OpenCroc Studio 3D — Particle Systems & Effects
+   ~2000 lines
+   ═══════════════════════════════════════════════════════════════════════════════ */
+
+import * as THREE from 'three';
+
+/* ═══════════════════════════════════════════════════════════════════════════════
+   ParticleManager
+   ═══════════════════════════════════════════════════════════════════════════════ */
+export class ParticleManager {
+  constructor(scene) {
+    this.scene = scene;
+    this.systems = [];
+    this._time = 0;
+
+    this._createAmbientParticles();
+    this._createDataStreamParticles();
+    this._createGroundGlow();
+  }
+
+  /* ─── Update each frame ──────────────────────────────────────────────── */
+  update(dt) {
+    this._time += dt;
+
+    for (const sys of this.systems) {
+      if (sys.update) sys.update(dt, this._time);
+    }
+  }
+
+  /* ═════════════════════════════════════════════════════════════════════════
+     Ambient Floating Particles — Dust motes & bokeh
+     ═════════════════════════════════════════════════════════════════════════ */
+  _createAmbientParticles() {
+    const count = 500;
+    const positions = new Float32Array(count * 3);
+    const velocities = new Float32Array(count * 3);
+    const sizes = new Float32Array(count);
+    const opacities = new Float32Array(count);
+    const colors = new Float32Array(count * 3);
+
+    const palette = [
+      new THREE.Color(0x34d399),
+      new THREE.Color(0x60a5fa),
+      new THREE.Color(0xa78bfa),
+      new THREE.Color(0x22d3ee),
+      new THREE.Color(0xffffff),
+    ];
+
+    for (let i = 0; i < count; i++) {
+      positions[i * 3]     = (Math.random() - 0.5) * 40;
+      positions[i * 3 + 1] = Math.random() * 15;
+      positions[i * 3 + 2] = (Math.random() - 0.5) * 30;
+
+      velocities[i * 3]     = (Math.random() - 0.5) * 0.2;
+      velocities[i * 3 + 1] = 0.05 + Math.random() * 0.15;
+      velocities[i * 3 + 2] = (Math.random() - 0.5) * 0.2;
+
+      sizes[i] = 0.02 + Math.random() * 0.08;
+      opacities[i] = 0.1 + Math.random() * 0.4;
+
+      const c = palette[Math.floor(Math.random() * palette.length)];
+      colors[i * 3] = c.r;
+      colors[i * 3 + 1] = c.g;
+      colors[i * 3 + 2] = c.b;
+    }
+
+    const geo = new THREE.BufferGeometry();
+    geo.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+    geo.setAttribute('aVelocity', new THREE.BufferAttribute(velocities, 3));
+    geo.setAttribute('aSize', new THREE.BufferAttribute(sizes, 1));
+    geo.setAttribute('aOpacity', new THREE.BufferAttribute(opacities, 1));
+    geo.setAttribute('color', new THREE.BufferAttribute(colors, 3));
+
+    const mat = new THREE.ShaderMaterial({
+      uniforms: {
+        uTime: { value: 0 },
+        uPixelRatio: { value: Math.min(window.devicePixelRatio, 2) },
+      },
+      vertexShader: `
+        attribute float aSize;
+        attribute float aOpacity;
+        attribute vec3 aVelocity;
+        attribute vec3 color;
+        uniform float uTime;
+        uniform float uPixelRatio;
+        varying float vOpacity;
+        varying vec3 vColor;
+        void main() {
+          vOpacity = aOpacity;
+          vColor = color;
+          vec3 pos = position;
+          // Gentle floating motion
+          pos.x += sin(uTime * aVelocity.x + position.z * 2.0) * 0.5;
+          pos.y += mod(pos.y + uTime * aVelocity.y, 15.0);
+          pos.z += cos(uTime * aVelocity.z + position.x * 2.0) * 0.5;
+          vec4 mvPos = modelViewMatrix * vec4(pos, 1.0);
+          gl_PointSize = aSize * uPixelRatio * (150.0 / -mvPos.z);
+          gl_Position = projectionMatrix * mvPos;
+        }
+      `,
+      fragmentShader: `
+        varying float vOpacity;
+        varying vec3 vColor;
+        void main() {
+          float d = length(gl_PointCoord - vec2(0.5));
+          if (d > 0.5) discard;
+          float alpha = (1.0 - smoothstep(0.2, 0.5, d)) * vOpacity;
+          gl_FragColor = vec4(vColor, alpha);
+        }
+      `,
+      transparent: true,
+      depthWrite: false,
+      blending: THREE.AdditiveBlending,
+      vertexColors: true,
+    });
+
+    const points = new THREE.Points(geo, mat);
+    points.name = 'ambient-particles';
+    this.scene.add(points);
+
+    this.systems.push({
+      mesh: points,
+      update: (dt, time) => {
+        mat.uniforms.uTime.value = time;
+      },
+    });
+  }
+
+  /* ═════════════════════════════════════════════════════════════════════════
+     Data Stream Particles — Vertical data flow columns
+     ═════════════════════════════════════════════════════════════════════════ */
+  _createDataStreamParticles() {
+    const streamPositions = [
+      { x: -10, z: -4.5 },  // Server area
+      { x: 0, z: 0 },       // Center hologram
+      { x: -10, z: -1.5 },  // Server area 2
+    ];
+
+    streamPositions.forEach((sp, idx) => {
+      const count = 80;
+      const positions = new Float32Array(count * 3);
+      const speeds = new Float32Array(count);
+
+      for (let i = 0; i < count; i++) {
+        positions[i * 3]     = sp.x + (Math.random() - 0.5) * 0.6;
+        positions[i * 3 + 1] = Math.random() * 6;
+        positions[i * 3 + 2] = sp.z + (Math.random() - 0.5) * 0.6;
+        speeds[i] = 1.0 + Math.random() * 2.0;
+      }
+
+      const geo = new THREE.BufferGeometry();
+      geo.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+      geo.setAttribute('aSpeed', new THREE.BufferAttribute(speeds, 1));
+
+      const color = idx === 1 ? 0x34d399 : (idx === 0 ? 0x60a5fa : 0xa78bfa);
+
+      const mat = new THREE.ShaderMaterial({
+        uniforms: {
+          uTime: { value: 0 },
+          uColor: { value: new THREE.Color(color) },
+          uPixelRatio: { value: Math.min(window.devicePixelRatio, 2) },
+        },
+        vertexShader: `
+          attribute float aSpeed;
+          uniform float uTime;
+          uniform float uPixelRatio;
+          varying float vAlpha;
+          void main() {
+            vec3 pos = position;
+            float y = mod(pos.y + uTime * aSpeed, 6.0);
+            pos.y = y + 0.3;
+            vAlpha = 1.0 - y / 6.0; // Fade as they rise
+            vec4 mvPos = modelViewMatrix * vec4(pos, 1.0);
+            gl_PointSize = 3.0 * uPixelRatio * (100.0 / -mvPos.z);
+            gl_Position = projectionMatrix * mvPos;
+          }
+        `,
+        fragmentShader: `
+          uniform vec3 uColor;
+          varying float vAlpha;
+          void main() {
+            float d = length(gl_PointCoord - vec2(0.5));
+            if (d > 0.5) discard;
+            float alpha = (1.0 - d * 2.0) * vAlpha * 0.6;
+            gl_FragColor = vec4(uColor, alpha);
+          }
+        `,
+        transparent: true,
+        depthWrite: false,
+        blending: THREE.AdditiveBlending,
+      });
+
+      const points = new THREE.Points(geo, mat);
+      points.name = `data-stream-${idx}`;
+      this.scene.add(points);
+
+      this.systems.push({
+        mesh: points,
+        update: (dt, time) => {
+          mat.uniforms.uTime.value = time;
+        },
+      });
+    });
+  }
+
+  /* ═════════════════════════════════════════════════════════════════════════
+     Ground Glow — Circle of light on the ground near center
+     ═════════════════════════════════════════════════════════════════════════ */
+  _createGroundGlow() {
+    const glowGeo = new THREE.CircleGeometry(3, 32);
+    const glowMat = new THREE.ShaderMaterial({
+      uniforms: {
+        uTime: { value: 0 },
+        uColor: { value: new THREE.Color(0x34d399) },
+        uIntensity: { value: 0.15 },
+      },
+      vertexShader: `
+        varying vec2 vUv;
+        void main() {
+          vUv = uv;
+          gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+        }
+      `,
+      fragmentShader: `
+        uniform float uTime;
+        uniform vec3 uColor;
+        uniform float uIntensity;
+        varying vec2 vUv;
+        void main() {
+          vec2 center = vUv - vec2(0.5);
+          float dist = length(center) * 2.0;
+          float ring1 = smoothstep(0.8, 0.85, dist) - smoothstep(0.85, 0.9, dist);
+          float ring2 = smoothstep(0.5, 0.55, dist) - smoothstep(0.55, 0.6, dist);
+          float pulse = 0.5 + 0.5 * sin(uTime * 2.0);
+          float glow = (1.0 - dist) * uIntensity;
+          float rings = (ring1 + ring2 * 0.5) * 0.3 * pulse;
+          float alpha = max(glow, rings);
+          if (alpha < 0.01) discard;
+          gl_FragColor = vec4(uColor, alpha);
+        }
+      `,
+      transparent: true,
+      depthWrite: false,
+      side: THREE.DoubleSide,
+    });
+
+    const glow = new THREE.Mesh(glowGeo, glowMat);
+    glow.rotation.x = -Math.PI / 2;
+    glow.position.set(0, 0.22, 0);
+    glow.name = 'ground-glow';
+    this.scene.add(glow);
+
+    this.systems.push({
+      mesh: glow,
+      update: (dt, time) => {
+        glowMat.uniforms.uTime.value = time;
+      },
+    });
+  }
+
+  /* ═════════════════════════════════════════════════════════════════════════
+     Celebration Explosion — Triggered on pipeline completion
+     ═════════════════════════════════════════════════════════════════════════ */
+  triggerCelebration() {
+    const count = 200;
+    const positions = new Float32Array(count * 3);
+    const velocities = [];
+    const colors = new Float32Array(count * 3);
+    const sizes = new Float32Array(count);
+
+    const palette = [
+      new THREE.Color(0x34d399), new THREE.Color(0x60a5fa),
+      new THREE.Color(0xfbbf24), new THREE.Color(0xf472b6),
+      new THREE.Color(0xa78bfa), new THREE.Color(0x22d3ee),
+    ];
+
+    for (let i = 0; i < count; i++) {
+      positions[i * 3] = 0;
+      positions[i * 3 + 1] = 2;
+      positions[i * 3 + 2] = 0;
+
+      const theta = Math.random() * Math.PI * 2;
+      const phi = Math.random() * Math.PI;
+      const speed = 3 + Math.random() * 5;
+      velocities.push(
+        Math.sin(phi) * Math.cos(theta) * speed,
+        Math.cos(phi) * speed * 0.5 + 4,
+        Math.sin(phi) * Math.sin(theta) * speed,
+      );
+
+      const c = palette[Math.floor(Math.random() * palette.length)];
+      colors[i * 3] = c.r;
+      colors[i * 3 + 1] = c.g;
+      colors[i * 3 + 2] = c.b;
+
+      sizes[i] = 0.05 + Math.random() * 0.1;
+    }
+
+    const geo = new THREE.BufferGeometry();
+    geo.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+    geo.setAttribute('color', new THREE.BufferAttribute(colors, 3));
+
+    const mat = new THREE.PointsMaterial({
+      size: 0.08,
+      transparent: true,
+      opacity: 1.0,
+      vertexColors: true,
+      blending: THREE.AdditiveBlending,
+      depthWrite: false,
+    });
+
+    const particles = new THREE.Points(geo, mat);
+    particles.name = 'celebration';
+    this.scene.add(particles);
+
+    let life = 0;
+    const sys = {
+      mesh: particles,
+      update: (dt) => {
+        life += dt;
+        if (life > 3) {
+          this.scene.remove(particles);
+          geo.dispose();
+          mat.dispose();
+          const idx = this.systems.indexOf(sys);
+          if (idx >= 0) this.systems.splice(idx, 1);
+          return;
+        }
+
+        const posArr = geo.attributes.position.array;
+        for (let i = 0; i < count; i++) {
+          posArr[i * 3]     += velocities[i * 3] * dt;
+          posArr[i * 3 + 1] += velocities[i * 3 + 1] * dt;
+          posArr[i * 3 + 2] += velocities[i * 3 + 2] * dt;
+          velocities[i * 3 + 1] -= 9.8 * dt; // Gravity
+        }
+        geo.attributes.position.needsUpdate = true;
+        mat.opacity = Math.max(0, 1 - life / 3);
+      },
+    };
+
+    this.systems.push(sys);
+  }
+}