diff --git a/app/package.json b/app/package.json
index d0e8204..411975d 100644
--- a/app/package.json
+++ b/app/package.json
@@ -18,6 +18,7 @@
     "@types/three": "^0.164.0",
     "@unocss/reset": "^0.59.4",
     "comlink": "^4.4.1",
+    "file-saver": "^2.0.5",
     "jsondiffpatch": "^0.6.0",
     "three": "^0.164.1"
   },
@@ -27,6 +28,7 @@
     "@sveltejs/adapter-static": "^3.0.1",
     "@sveltejs/vite-plugin-svelte": "next",
     "@tsconfig/svelte": "^5.0.4",
+    "@types/file-saver": "^2.0.7",
     "@unocss/preset-icons": "^0.59.4",
     "svelte": "5.0.0-next.118",
     "svelte-check": "^3.7.0",
diff --git a/app/src/lib/graph-interface/graph/Graph.svelte b/app/src/lib/graph-interface/graph/Graph.svelte
index 9291036..643b299 100644
--- a/app/src/lib/graph-interface/graph/Graph.svelte
+++ b/app/src/lib/graph-interface/graph/Graph.svelte
@@ -12,7 +12,7 @@
   import Camera from "../Camera.svelte";
   import GraphView from "./GraphView.svelte";
   import type { Node, NodeId, Node as NodeType, Socket } from "@nodes/types";
-  import { NodeDefinitionSchema } from "@nodes/types";
+  import { GraphSchema, NodeDefinitionSchema } from "@nodes/types";
   import FloatingEdge from "../edges/FloatingEdge.svelte";
   import {
     activeNodeId,
@@ -28,6 +28,7 @@
   import { createWasmWrapper } from "@nodes/utils";
 
   import HelpView from "../HelpView.svelte";
+  import FileSaver from "file-saver";
 
   export let manager: GraphManager;
 
@@ -612,6 +613,7 @@
   keymap.addShortcut({
     key: "a",
     ctrl: true,
+    preventDefault: true,
     description: "Select all nodes",
     callback: () => {
       if (!isBodyFocused()) return;
@@ -637,7 +639,6 @@
     ctrl: true,
     description: "Redo",
     callback: () => {
-      if (!isBodyFocused()) return;
       manager.redo();
       for (const node of $nodes.values()) {
         updateNodePosition(node);
@@ -645,6 +646,20 @@
     },
   });
 
+  keymap.addShortcut({
+    key: "s",
+    ctrl: true,
+    description: "Save",
+    preventDefault: true,
+    callback: () => {
+      const state = manager.serialize();
+      const blob = new Blob([JSON.stringify(state)], {
+        type: "application/json;charset=utf-8",
+      });
+      FileSaver.saveAs(blob, "nodarium-graph.json");
+    },
+  });
+
   keymap.addShortcut({
     key: ["Delete", "Backspace", "x"],
     description: "Delete selected nodes",
@@ -833,17 +848,31 @@
         });
       });
     } else if (event.dataTransfer.files.length) {
-      const files = event.dataTransfer.files;
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        const buffer = e.target?.result as Buffer;
-        if (buffer) {
-          const wrapper = createWasmWrapper(buffer);
-          const definition = wrapper.get_definition();
-          const res = NodeDefinitionSchema.parse(definition);
-        }
-      };
-      reader.readAsArrayBuffer(files[0]);
+      const file = event.dataTransfer.files[0];
+
+      if (file.type === "application/wasm") {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          const buffer = e.target?.result as Buffer;
+          if (buffer) {
+            const wrapper = createWasmWrapper(buffer);
+            const definition = wrapper.get_definition();
+            const res = NodeDefinitionSchema.parse(definition);
+            console.log(res);
+          }
+        };
+        reader.readAsArrayBuffer(file);
+      } else if (file.type === "application/json") {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          const buffer = e.target?.result as Buffer;
+          if (buffer) {
+            const state = GraphSchema.parse(JSON.parse(buffer.toString()));
+            manager.load(state);
+          }
+        };
+        reader.readAsText(file);
+      }
     }
   }
 
@@ -893,13 +922,13 @@
 >
   <input
     type="file"
-    accept="application/wasm"
+    accept="application/wasm,application/json"
     id="drop-zone"
     disabled={!isDragging}
     on:dragend={handleDragEnd}
     on:dragleave={handleDragEnd}
   />
-  <label for="drop-zone" />
+  <label for="drop-zone"></label>
 
   {#if showHelp}
     <HelpView registry={manager.registry} />
diff --git a/app/src/lib/graph-templates/grid.ts b/app/src/lib/graph-templates/grid.ts
index 9e276df..996f5c6 100644
--- a/app/src/lib/graph-templates/grid.ts
+++ b/app/src/lib/graph-templates/grid.ts
@@ -20,7 +20,7 @@ export function grid(width: number, height: number) {
         visible: false,
       },
       position: [x * 30, y * 40],
-      props: i == 0 ? { value: 0 } : { op_type: 2, a: 2, b: 2 },
+      props: i == 0 ? { value: 0 } : { op_type: 0, a: 1, b: 0.05 },
       type: i == 0 ? "max/plantarium/float" : "max/plantarium/math",
     });
 
diff --git a/app/src/lib/graph-templates/index.ts b/app/src/lib/graph-templates/index.ts
index 662ed6e..129ff05 100644
--- a/app/src/lib/graph-templates/index.ts
+++ b/app/src/lib/graph-templates/index.ts
@@ -1,3 +1,7 @@
 export { grid } from "./grid";
 export { tree } from "./tree";
 export { plant } from "./plant";
+export { default as lottaFaces } from "./lotta-faces.json";
+export { default as lottaNodes } from "./lotta-nodes.json";
+export { default as lottaNodesAndFaces } from "./lotta-nodes-and-faces.json";
+
diff --git a/app/src/lib/graph-templates/lotta-faces.json b/app/src/lib/graph-templates/lotta-faces.json
new file mode 100644
index 0000000..7ef1354
--- /dev/null
+++ b/app/src/lib/graph-templates/lotta-faces.json
@@ -0,0 +1 @@
+{"settings":{"resolution.circle":64,"resolution.curve":64,"randomSeed":false},"nodes":[{"id":9,"position":[260,0],"type":"max/plantarium/output","props":{}},{"id":18,"position":[185,0],"type":"max/plantarium/stem","props":{"amount":64,"length":12,"thickness":0.15}},{"id":19,"position":[210,0],"type":"max/plantarium/noise","props":{"scale":1.3,"strength":5.4}},{"id":20,"position":[235,0],"type":"max/plantarium/branch","props":{"length":0.8,"thickness":0.8,"amount":3}},{"id":21,"position":[160,0],"type":"max/plantarium/vec3","props":{"0":0.39,"1":0,"2":0.41}},{"id":22,"position":[130,0],"type":"max/plantarium/random","props":{"min":-2,"max":2}}],"edges":[[18,0,19,"plant"],[19,0,20,"plant"],[20,0,9,"input"],[21,0,18,"origin"],[22,0,21,"0"],[22,0,21,"2"]]}
diff --git a/app/src/lib/graph-templates/lotta-nodes-and-faces.json b/app/src/lib/graph-templates/lotta-nodes-and-faces.json
new file mode 100644
index 0000000..e45595c
--- /dev/null
+++ b/app/src/lib/graph-templates/lotta-nodes-and-faces.json
@@ -0,0 +1 @@
+{"id":96544,"settings":{"resolution.circle":64,"resolution.curve":64,"randomSeed":false},"nodes":[{"id":0,"position":[0,0],"type":"max/plantarium/float","props":{"value":0}},{"id":1,"position":[30,0],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":2,"position":[60,0],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":3,"position":[90,0],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":4,"position":[120,0],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":5,"position":[150,0],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":6,"position":[180,0],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":7,"position":[210,0],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":8,"position":[240,0],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":9,"position":[270,0],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":10,"position":[300,0],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":11,"position":[330,0],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":12,"position":[360,0],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":13,"position":[390,0],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":14,"position":[420,0],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":15,"position":[0,40],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":16,"position":[30,40],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":17,"position":[60,40],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":18,"position":[90,40],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":19,"position":[120,40],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":20,"position":[150,40],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":21,"position":[180,40],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":22,"position":[210,40],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":23,"position":[240,40],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":24,"position":[270,40],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":25,"position":[300,40],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":26,"position":[330,40],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":27,"position":[360,40],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":28,"position":[390,40],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":29,"position":[420,40],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":30,"position":[0,80],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":31,"position":[30,80],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":32,"position":[60,80],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":33,"position":[90,80],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":34,"position":[120,80],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":35,"position":[150,80],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":36,"position":[180,80],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":37,"position":[210,80],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":38,"position":[240,80],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":39,"position":[270,80],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":40,"position":[300,80],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":41,"position":[330,80],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":42,"position":[360,80],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":43,"position":[390,80],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":44,"position":[420,80],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":45,"position":[0,120],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":46,"position":[30,120],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":47,"position":[60,120],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":48,"position":[90,120],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":49,"position":[120,120],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":50,"position":[150,120],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":51,"position":[180,120],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":52,"position":[210,120],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":53,"position":[240,120],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":54,"position":[270,120],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":55,"position":[300,120],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":56,"position":[330,120],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":57,"position":[360,120],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":58,"position":[390,120],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":59,"position":[420,120],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":60,"position":[0,160],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":61,"position":[30,160],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":62,"position":[60,160],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":63,"position":[90,160],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":64,"position":[120,160],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":65,"position":[150,160],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":66,"position":[180,160],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":67,"position":[210,160],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":68,"position":[240,160],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":69,"position":[270,160],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":70,"position":[300,160],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":71,"position":[330,160],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":72,"position":[360,160],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":73,"position":[390,160],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":74,"position":[420,160],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":75,"position":[0,200],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":76,"position":[30,200],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":77,"position":[60,200],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":78,"position":[90,200],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":79,"position":[120,200],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":80,"position":[150,200],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":81,"position":[180,200],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":82,"position":[210,200],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":83,"position":[240,200],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":84,"position":[270,200],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":85,"position":[300,200],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":86,"position":[330,200],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":87,"position":[360,200],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":88,"position":[390,200],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":89,"position":[420,200],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":90,"position":[0,240],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":91,"position":[30,240],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":92,"position":[60,240],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":93,"position":[90,240],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":94,"position":[120,240],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":95,"position":[150,240],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":96,"position":[180,240],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":97,"position":[210,240],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":98,"position":[240,240],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":99,"position":[270,240],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":100,"position":[300,240],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":101,"position":[330,240],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":102,"position":[360,240],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":103,"position":[390,240],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":104,"position":[420,240],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":105,"position":[0,280],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":106,"position":[30,280],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":107,"position":[60,280],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":108,"position":[90,280],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":109,"position":[120,280],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":110,"position":[150,280],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":111,"position":[180,280],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":112,"position":[210,280],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":113,"position":[240,280],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":114,"position":[270,280],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":115,"position":[300,280],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":116,"position":[330,280],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":117,"position":[360,280],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":118,"position":[390,280],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":119,"position":[420,280],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":120,"position":[0,320],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":121,"position":[30,320],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":122,"position":[60,320],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":123,"position":[90,320],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":124,"position":[120,320],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":125,"position":[150,320],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":126,"position":[180,320],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":127,"position":[210,320],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":128,"position":[240,320],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":129,"position":[270,320],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":130,"position":[300,320],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":131,"position":[330,320],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":132,"position":[360,320],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":133,"position":[390,320],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":134,"position":[420,320],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":135,"position":[0,360],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":136,"position":[30,360],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":137,"position":[60,360],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":138,"position":[90,360],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":139,"position":[120,360],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":140,"position":[150,360],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":141,"position":[180,360],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":142,"position":[210,360],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":143,"position":[240,360],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":144,"position":[270,360],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":145,"position":[300,360],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":146,"position":[330,360],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":147,"position":[360,360],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":148,"position":[390,360],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":149,"position":[420,360],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":150,"position":[0,400],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":151,"position":[30,400],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":152,"position":[60,400],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":153,"position":[90,400],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":154,"position":[120,400],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":155,"position":[150,400],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":156,"position":[180,400],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":157,"position":[210,400],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":158,"position":[240,400],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":159,"position":[270,400],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":160,"position":[300,400],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":161,"position":[330,400],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":162,"position":[360,400],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":163,"position":[390,400],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":164,"position":[420,400],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":165,"position":[0,440],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":166,"position":[30,440],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":167,"position":[60,440],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":168,"position":[90,440],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":169,"position":[120,440],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":170,"position":[150,440],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":171,"position":[180,440],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":172,"position":[210,440],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":173,"position":[240,440],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":174,"position":[270,440],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":175,"position":[300,440],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":176,"position":[330,440],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":177,"position":[360,440],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":178,"position":[390,440],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":179,"position":[420,440],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":180,"position":[0,480],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":181,"position":[30,480],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":182,"position":[60,480],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":183,"position":[90,480],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":184,"position":[120,480],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":185,"position":[150,480],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":186,"position":[180,480],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":187,"position":[210,480],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":188,"position":[240,480],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":189,"position":[270,480],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":190,"position":[300,480],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":191,"position":[330,480],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":192,"position":[360,480],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":193,"position":[390,480],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":194,"position":[420,480],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":195,"position":[0,520],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":196,"position":[30,520],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":197,"position":[60,520],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":198,"position":[90,520],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":199,"position":[120,520],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":200,"position":[150,520],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":201,"position":[180,520],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":202,"position":[210,520],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":203,"position":[240,520],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":204,"position":[270,520],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":205,"position":[300,520],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":206,"position":[330,520],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":207,"position":[360,520],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":208,"position":[390,520],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":209,"position":[420,520],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":210,"position":[0,560],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":211,"position":[30,560],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":212,"position":[60,560],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":213,"position":[90,560],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":214,"position":[120,560],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":215,"position":[150,560],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":216,"position":[180,560],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":217,"position":[210,560],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":218,"position":[240,560],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":219,"position":[270,560],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":220,"position":[300,560],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":221,"position":[330,560],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":222,"position":[360,560],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":223,"position":[390,560],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":224,"position":[420,560],"type":"max/plantarium/math","props":{"op_type":1,"a":1,"b":0.075}},{"id":225,"position":[512.5,555],"type":"max/plantarium/output","props":{}},{"id":226,"position":[455,560],"type":"max/plantarium/stem","props":{"amount":126,"length":5,"thickness":1}},{"id":227,"position":[485,560],"type":"max/plantarium/noise","props":{"scale":3.3,"strength":5.3}}],"edges":[[0,0,1,"a"],[1,0,2,"a"],[2,0,3,"a"],[3,0,4,"a"],[4,0,5,"a"],[5,0,6,"a"],[6,0,7,"a"],[7,0,8,"a"],[8,0,9,"a"],[9,0,10,"a"],[10,0,11,"a"],[11,0,12,"a"],[12,0,13,"a"],[13,0,14,"a"],[14,0,15,"a"],[15,0,16,"a"],[16,0,17,"a"],[17,0,18,"a"],[18,0,19,"a"],[19,0,20,"a"],[20,0,21,"a"],[21,0,22,"a"],[22,0,23,"a"],[23,0,24,"a"],[24,0,25,"a"],[25,0,26,"a"],[26,0,27,"a"],[27,0,28,"a"],[28,0,29,"a"],[29,0,30,"a"],[30,0,31,"a"],[31,0,32,"a"],[32,0,33,"a"],[33,0,34,"a"],[34,0,35,"a"],[35,0,36,"a"],[36,0,37,"a"],[37,0,38,"a"],[38,0,39,"a"],[39,0,40,"a"],[40,0,41,"a"],[41,0,42,"a"],[42,0,43,"a"],[43,0,44,"a"],[44,0,45,"a"],[45,0,46,"a"],[46,0,47,"a"],[47,0,48,"a"],[48,0,49,"a"],[49,0,50,"a"],[50,0,51,"a"],[51,0,52,"a"],[52,0,53,"a"],[53,0,54,"a"],[54,0,55,"a"],[55,0,56,"a"],[56,0,57,"a"],[57,0,58,"a"],[58,0,59,"a"],[59,0,60,"a"],[60,0,61,"a"],[61,0,62,"a"],[62,0,63,"a"],[63,0,64,"a"],[64,0,65,"a"],[65,0,66,"a"],[66,0,67,"a"],[67,0,68,"a"],[68,0,69,"a"],[69,0,70,"a"],[70,0,71,"a"],[71,0,72,"a"],[72,0,73,"a"],[73,0,74,"a"],[74,0,75,"a"],[75,0,76,"a"],[76,0,77,"a"],[77,0,78,"a"],[78,0,79,"a"],[79,0,80,"a"],[80,0,81,"a"],[81,0,82,"a"],[82,0,83,"a"],[83,0,84,"a"],[84,0,85,"a"],[85,0,86,"a"],[86,0,87,"a"],[87,0,88,"a"],[88,0,89,"a"],[89,0,90,"a"],[90,0,91,"a"],[91,0,92,"a"],[92,0,93,"a"],[93,0,94,"a"],[94,0,95,"a"],[95,0,96,"a"],[96,0,97,"a"],[97,0,98,"a"],[98,0,99,"a"],[99,0,100,"a"],[100,0,101,"a"],[101,0,102,"a"],[102,0,103,"a"],[103,0,104,"a"],[104,0,105,"a"],[105,0,106,"a"],[106,0,107,"a"],[107,0,108,"a"],[108,0,109,"a"],[109,0,110,"a"],[110,0,111,"a"],[111,0,112,"a"],[112,0,113,"a"],[113,0,114,"a"],[114,0,115,"a"],[115,0,116,"a"],[116,0,117,"a"],[117,0,118,"a"],[118,0,119,"a"],[119,0,120,"a"],[120,0,121,"a"],[121,0,122,"a"],[122,0,123,"a"],[123,0,124,"a"],[124,0,125,"a"],[125,0,126,"a"],[126,0,127,"a"],[127,0,128,"a"],[128,0,129,"a"],[129,0,130,"a"],[130,0,131,"a"],[131,0,132,"a"],[132,0,133,"a"],[133,0,134,"a"],[134,0,135,"a"],[135,0,136,"a"],[136,0,137,"a"],[137,0,138,"a"],[138,0,139,"a"],[139,0,140,"a"],[140,0,141,"a"],[141,0,142,"a"],[142,0,143,"a"],[143,0,144,"a"],[144,0,145,"a"],[145,0,146,"a"],[146,0,147,"a"],[147,0,148,"a"],[148,0,149,"a"],[149,0,150,"a"],[150,0,151,"a"],[151,0,152,"a"],[152,0,153,"a"],[153,0,154,"a"],[154,0,155,"a"],[155,0,156,"a"],[156,0,157,"a"],[157,0,158,"a"],[158,0,159,"a"],[159,0,160,"a"],[160,0,161,"a"],[161,0,162,"a"],[162,0,163,"a"],[163,0,164,"a"],[164,0,165,"a"],[165,0,166,"a"],[166,0,167,"a"],[167,0,168,"a"],[168,0,169,"a"],[169,0,170,"a"],[170,0,171,"a"],[171,0,172,"a"],[172,0,173,"a"],[173,0,174,"a"],[174,0,175,"a"],[175,0,176,"a"],[176,0,177,"a"],[177,0,178,"a"],[178,0,179,"a"],[179,0,180,"a"],[180,0,181,"a"],[181,0,182,"a"],[182,0,183,"a"],[183,0,184,"a"],[184,0,185,"a"],[185,0,186,"a"],[186,0,187,"a"],[187,0,188,"a"],[188,0,189,"a"],[189,0,190,"a"],[190,0,191,"a"],[191,0,192,"a"],[192,0,193,"a"],[193,0,194,"a"],[194,0,195,"a"],[195,0,196,"a"],[196,0,197,"a"],[197,0,198,"a"],[198,0,199,"a"],[199,0,200,"a"],[200,0,201,"a"],[201,0,202,"a"],[202,0,203,"a"],[203,0,204,"a"],[204,0,205,"a"],[205,0,206,"a"],[206,0,207,"a"],[207,0,208,"a"],[208,0,209,"a"],[209,0,210,"a"],[210,0,211,"a"],[211,0,212,"a"],[212,0,213,"a"],[213,0,214,"a"],[214,0,215,"a"],[215,0,216,"a"],[216,0,217,"a"],[217,0,218,"a"],[218,0,219,"a"],[219,0,220,"a"],[220,0,221,"a"],[221,0,222,"a"],[222,0,223,"a"],[223,0,224,"a"],[224,0,226,"length"],[226,0,227,"plant"],[227,0,225,"input"]]}
diff --git a/app/src/lib/graph-templates/lotta-nodes.json b/app/src/lib/graph-templates/lotta-nodes.json
new file mode 100644
index 0000000..9c6c386
--- /dev/null
+++ b/app/src/lib/graph-templates/lotta-nodes.json
@@ -0,0 +1 @@
+{"id":96544,"settings":{"resolution.circle":32,"resolution.curve":32,"randomSeed":false},"nodes":[{"id":0,"position":[0,0],"type":"max/plantarium/float","props":{"value":0}},{"id":1,"position":[30,0],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":2,"position":[60,0],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":3,"position":[90,0],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":4,"position":[120,0],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":5,"position":[150,0],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":6,"position":[180,0],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":7,"position":[210,0],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":8,"position":[240,0],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":9,"position":[270,0],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":10,"position":[300,0],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":11,"position":[330,0],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":12,"position":[360,0],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":13,"position":[390,0],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":14,"position":[420,0],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":15,"position":[0,40],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":16,"position":[30,40],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":17,"position":[60,40],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":18,"position":[90,40],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":19,"position":[120,40],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":20,"position":[150,40],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":21,"position":[180,40],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":22,"position":[210,40],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":23,"position":[240,40],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":24,"position":[270,40],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":25,"position":[300,40],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":26,"position":[330,40],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":27,"position":[360,40],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":28,"position":[390,40],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":29,"position":[420,40],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":30,"position":[0,80],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":31,"position":[30,80],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":32,"position":[60,80],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":33,"position":[90,80],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":34,"position":[120,80],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":35,"position":[150,80],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":36,"position":[180,80],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":37,"position":[210,80],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":38,"position":[240,80],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":39,"position":[270,80],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":40,"position":[300,80],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":41,"position":[330,80],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":42,"position":[360,80],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":43,"position":[390,80],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":44,"position":[420,80],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":45,"position":[0,120],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":46,"position":[30,120],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":47,"position":[60,120],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":48,"position":[90,120],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":49,"position":[120,120],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":50,"position":[150,120],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":51,"position":[180,120],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":52,"position":[210,120],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":53,"position":[240,120],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":54,"position":[270,120],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":55,"position":[300,120],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":56,"position":[330,120],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":57,"position":[360,120],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":58,"position":[390,120],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":59,"position":[420,120],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":60,"position":[0,160],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":61,"position":[30,160],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":62,"position":[60,160],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":63,"position":[90,160],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":64,"position":[120,160],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":65,"position":[150,160],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":66,"position":[180,160],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":67,"position":[210,160],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":68,"position":[240,160],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":69,"position":[270,160],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":70,"position":[300,160],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":71,"position":[330,160],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":72,"position":[360,160],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":73,"position":[390,160],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":74,"position":[420,160],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":75,"position":[0,200],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":76,"position":[30,200],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":77,"position":[60,200],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":78,"position":[90,200],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":79,"position":[120,200],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":80,"position":[150,200],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":81,"position":[180,200],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":82,"position":[210,200],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":83,"position":[240,200],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":84,"position":[270,200],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":85,"position":[300,200],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":86,"position":[330,200],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":87,"position":[360,200],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":88,"position":[390,200],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":89,"position":[420,200],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":90,"position":[0,240],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":91,"position":[30,240],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":92,"position":[60,240],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":93,"position":[90,240],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":94,"position":[120,240],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":95,"position":[150,240],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":96,"position":[180,240],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":97,"position":[210,240],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":98,"position":[240,240],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":99,"position":[270,240],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":100,"position":[300,240],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":101,"position":[330,240],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":102,"position":[360,240],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":103,"position":[390,240],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":104,"position":[420,240],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":105,"position":[0,280],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":106,"position":[30,280],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":107,"position":[60,280],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":108,"position":[90,280],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":109,"position":[120,280],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":110,"position":[150,280],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":111,"position":[180,280],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":112,"position":[210,280],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":113,"position":[240,280],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":114,"position":[270,280],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":115,"position":[300,280],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":116,"position":[330,280],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":117,"position":[360,280],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":118,"position":[390,280],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":119,"position":[420,280],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":120,"position":[0,320],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":121,"position":[30,320],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":122,"position":[60,320],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":123,"position":[90,320],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":124,"position":[120,320],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":125,"position":[150,320],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":126,"position":[180,320],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":127,"position":[210,320],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":128,"position":[240,320],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":129,"position":[270,320],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":130,"position":[300,320],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":131,"position":[330,320],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":132,"position":[360,320],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":133,"position":[390,320],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":134,"position":[420,320],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":135,"position":[0,360],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":136,"position":[30,360],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":137,"position":[60,360],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":138,"position":[90,360],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":139,"position":[120,360],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":140,"position":[150,360],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":141,"position":[180,360],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":142,"position":[210,360],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":143,"position":[240,360],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":144,"position":[270,360],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":145,"position":[300,360],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":146,"position":[330,360],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":147,"position":[360,360],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":148,"position":[390,360],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":149,"position":[420,360],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":150,"position":[0,400],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":151,"position":[30,400],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":152,"position":[60,400],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":153,"position":[90,400],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":154,"position":[120,400],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":155,"position":[150,400],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":156,"position":[180,400],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":157,"position":[210,400],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":158,"position":[240,400],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":159,"position":[270,400],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":160,"position":[300,400],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":161,"position":[330,400],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":162,"position":[360,400],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":163,"position":[390,400],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":164,"position":[420,400],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":165,"position":[0,440],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":166,"position":[30,440],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":167,"position":[60,440],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":168,"position":[90,440],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":169,"position":[120,440],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":170,"position":[150,440],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":171,"position":[180,440],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":172,"position":[210,440],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":173,"position":[240,440],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":174,"position":[270,440],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":175,"position":[300,440],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":176,"position":[330,440],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":177,"position":[360,440],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":178,"position":[390,440],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":179,"position":[420,440],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":180,"position":[0,480],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":181,"position":[30,480],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":182,"position":[60,480],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":183,"position":[90,480],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":184,"position":[120,480],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":185,"position":[150,480],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":186,"position":[180,480],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":187,"position":[210,480],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":188,"position":[240,480],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":189,"position":[270,480],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":190,"position":[300,480],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":191,"position":[330,480],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":192,"position":[360,480],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":193,"position":[390,480],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":194,"position":[420,480],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":195,"position":[0,520],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":196,"position":[30,520],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":197,"position":[60,520],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":198,"position":[90,520],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":199,"position":[120,520],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":200,"position":[150,520],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":201,"position":[180,520],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":202,"position":[210,520],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":203,"position":[240,520],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":204,"position":[270,520],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":205,"position":[300,520],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":206,"position":[330,520],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":207,"position":[360,520],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":208,"position":[390,520],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":209,"position":[420,520],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":210,"position":[0,560],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":211,"position":[30,560],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":212,"position":[60,560],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":213,"position":[90,560],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":214,"position":[120,560],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":215,"position":[150,560],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":216,"position":[180,560],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":217,"position":[210,560],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":218,"position":[240,560],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":219,"position":[270,560],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":220,"position":[300,560],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":221,"position":[330,560],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":222,"position":[360,560],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":223,"position":[390,560],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.05}},{"id":224,"position":[420,560],"type":"max/plantarium/math","props":{"op_type":0,"a":1,"b":0.075}},{"id":225,"position":[485,560],"type":"max/plantarium/output","props":{}},{"id":226,"position":[455,560],"type":"max/plantarium/stem","props":{"amount":1,"length":5,"thickness":0.92}}],"edges":[[0,0,1,"a"],[1,0,2,"a"],[2,0,3,"a"],[3,0,4,"a"],[4,0,5,"a"],[5,0,6,"a"],[6,0,7,"a"],[7,0,8,"a"],[8,0,9,"a"],[9,0,10,"a"],[10,0,11,"a"],[11,0,12,"a"],[12,0,13,"a"],[13,0,14,"a"],[14,0,15,"a"],[15,0,16,"a"],[16,0,17,"a"],[17,0,18,"a"],[18,0,19,"a"],[19,0,20,"a"],[20,0,21,"a"],[21,0,22,"a"],[22,0,23,"a"],[23,0,24,"a"],[24,0,25,"a"],[25,0,26,"a"],[26,0,27,"a"],[27,0,28,"a"],[28,0,29,"a"],[29,0,30,"a"],[30,0,31,"a"],[31,0,32,"a"],[32,0,33,"a"],[33,0,34,"a"],[34,0,35,"a"],[35,0,36,"a"],[36,0,37,"a"],[37,0,38,"a"],[38,0,39,"a"],[39,0,40,"a"],[40,0,41,"a"],[41,0,42,"a"],[42,0,43,"a"],[43,0,44,"a"],[44,0,45,"a"],[45,0,46,"a"],[46,0,47,"a"],[47,0,48,"a"],[48,0,49,"a"],[49,0,50,"a"],[50,0,51,"a"],[51,0,52,"a"],[52,0,53,"a"],[53,0,54,"a"],[54,0,55,"a"],[55,0,56,"a"],[56,0,57,"a"],[57,0,58,"a"],[58,0,59,"a"],[59,0,60,"a"],[60,0,61,"a"],[61,0,62,"a"],[62,0,63,"a"],[63,0,64,"a"],[64,0,65,"a"],[65,0,66,"a"],[66,0,67,"a"],[67,0,68,"a"],[68,0,69,"a"],[69,0,70,"a"],[70,0,71,"a"],[71,0,72,"a"],[72,0,73,"a"],[73,0,74,"a"],[74,0,75,"a"],[75,0,76,"a"],[76,0,77,"a"],[77,0,78,"a"],[78,0,79,"a"],[79,0,80,"a"],[80,0,81,"a"],[81,0,82,"a"],[82,0,83,"a"],[83,0,84,"a"],[84,0,85,"a"],[85,0,86,"a"],[86,0,87,"a"],[87,0,88,"a"],[88,0,89,"a"],[89,0,90,"a"],[90,0,91,"a"],[91,0,92,"a"],[92,0,93,"a"],[93,0,94,"a"],[94,0,95,"a"],[95,0,96,"a"],[96,0,97,"a"],[97,0,98,"a"],[98,0,99,"a"],[99,0,100,"a"],[100,0,101,"a"],[101,0,102,"a"],[102,0,103,"a"],[103,0,104,"a"],[104,0,105,"a"],[105,0,106,"a"],[106,0,107,"a"],[107,0,108,"a"],[108,0,109,"a"],[109,0,110,"a"],[110,0,111,"a"],[111,0,112,"a"],[112,0,113,"a"],[113,0,114,"a"],[114,0,115,"a"],[115,0,116,"a"],[116,0,117,"a"],[117,0,118,"a"],[118,0,119,"a"],[119,0,120,"a"],[120,0,121,"a"],[121,0,122,"a"],[122,0,123,"a"],[123,0,124,"a"],[124,0,125,"a"],[125,0,126,"a"],[126,0,127,"a"],[127,0,128,"a"],[128,0,129,"a"],[129,0,130,"a"],[130,0,131,"a"],[131,0,132,"a"],[132,0,133,"a"],[133,0,134,"a"],[134,0,135,"a"],[135,0,136,"a"],[136,0,137,"a"],[137,0,138,"a"],[138,0,139,"a"],[139,0,140,"a"],[140,0,141,"a"],[141,0,142,"a"],[142,0,143,"a"],[143,0,144,"a"],[144,0,145,"a"],[145,0,146,"a"],[146,0,147,"a"],[147,0,148,"a"],[148,0,149,"a"],[149,0,150,"a"],[150,0,151,"a"],[151,0,152,"a"],[152,0,153,"a"],[153,0,154,"a"],[154,0,155,"a"],[155,0,156,"a"],[156,0,157,"a"],[157,0,158,"a"],[158,0,159,"a"],[159,0,160,"a"],[160,0,161,"a"],[161,0,162,"a"],[162,0,163,"a"],[163,0,164,"a"],[164,0,165,"a"],[165,0,166,"a"],[166,0,167,"a"],[167,0,168,"a"],[168,0,169,"a"],[169,0,170,"a"],[170,0,171,"a"],[171,0,172,"a"],[172,0,173,"a"],[173,0,174,"a"],[174,0,175,"a"],[175,0,176,"a"],[176,0,177,"a"],[177,0,178,"a"],[178,0,179,"a"],[179,0,180,"a"],[180,0,181,"a"],[181,0,182,"a"],[182,0,183,"a"],[183,0,184,"a"],[184,0,185,"a"],[185,0,186,"a"],[186,0,187,"a"],[187,0,188,"a"],[188,0,189,"a"],[189,0,190,"a"],[190,0,191,"a"],[191,0,192,"a"],[192,0,193,"a"],[193,0,194,"a"],[194,0,195,"a"],[195,0,196,"a"],[196,0,197,"a"],[197,0,198,"a"],[198,0,199,"a"],[199,0,200,"a"],[200,0,201,"a"],[201,0,202,"a"],[202,0,203,"a"],[203,0,204,"a"],[204,0,205,"a"],[205,0,206,"a"],[206,0,207,"a"],[207,0,208,"a"],[208,0,209,"a"],[209,0,210,"a"],[210,0,211,"a"],[211,0,212,"a"],[212,0,213,"a"],[213,0,214,"a"],[214,0,215,"a"],[215,0,216,"a"],[216,0,217,"a"],[217,0,218,"a"],[218,0,219,"a"],[219,0,220,"a"],[220,0,221,"a"],[221,0,222,"a"],[222,0,223,"a"],[223,0,224,"a"],[224,0,226,"length"],[226,0,225,"input"]]}
diff --git a/app/src/lib/helpers/createKeyMap.ts b/app/src/lib/helpers/createKeyMap.ts
index f9cc3c9..82aa7d6 100644
--- a/app/src/lib/helpers/createKeyMap.ts
+++ b/app/src/lib/helpers/createKeyMap.ts
@@ -5,6 +5,7 @@ type Shortcut = {
   shift?: boolean,
   ctrl?: boolean,
   alt?: boolean,
+  preventDefault?: boolean,
   description?: string,
   callback: (event: KeyboardEvent) => void
 }
@@ -17,8 +18,11 @@ export function createKeyMap(keys: Shortcut[]) {
 
   const store = writable(new Map(keys.map(k => [getShortcutId(k), k])));
 
+
   return {
     handleKeyboardEvent: (event: KeyboardEvent) => {
+      const activeElement = document.activeElement as HTMLElement;
+      if (activeElement?.tagName === "INPUT" || activeElement?.tagName === "TEXTAREA") return;
       const key = [...get(store).values()].find(k => {
         if (Array.isArray(k.key) ? !k.key.includes(event.key) : k.key !== event.key) return false;
         if ("shift" in k && k.shift !== event.shiftKey) return false;
@@ -26,6 +30,7 @@ export function createKeyMap(keys: Shortcut[]) {
         if ("alt" in k && k.alt !== event.altKey) return false;
         return true;
       });
+      if (key && key.preventDefault) event.preventDefault();
       key?.callback(event);
     },
     addShortcut: (shortcut: Shortcut) => {
diff --git a/app/src/lib/performance/BarSplit.svelte b/app/src/lib/performance/BarSplit.svelte
new file mode 100644
index 0000000..dd28ffd
--- /dev/null
+++ b/app/src/lib/performance/BarSplit.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+  export let labels: string[] = [];
+  export let values: number[] = [];
+
+  $: total = values.reduce((acc, v) => acc + v, 0);
+
+  let colors = ["red", "green", "blue"];
+</script>
+
+<div class="wrapper">
+  <div class="bars">
+    {#each values as value, i}
+      <div class="bar bg-{colors[i]}" style="width: {(value / total) * 100}%;">
+        {Math.round(value)}ms
+      </div>
+    {/each}
+  </div>
+
+  <div class="labels mt-2">
+    {#each values as _label, i}
+      <div class="text-{colors[i]}">{labels[i]}</div>
+    {/each}
+  </div>
+
+  <span
+    class="bg-red bg-green bg-yellow bg-blue text-red text-green text-yellow text-blue"
+  ></span>
+</div>
+
+<style>
+  .wrapper {
+    margin-block: 1em;
+  }
+
+  .bars {
+    height: 20px;
+    display: flex;
+  }
+
+  .bar {
+    height: 100%;
+    color: black;
+    display: flex;
+    align-items: center;
+    font-size: 0.8em;
+    padding-left: 0.4em;
+  }
+</style>
diff --git a/app/src/lib/performance/PerformanceViewer.svelte b/app/src/lib/performance/PerformanceViewer.svelte
index 53a4553..5fcc674 100644
--- a/app/src/lib/performance/PerformanceViewer.svelte
+++ b/app/src/lib/performance/PerformanceViewer.svelte
@@ -4,6 +4,7 @@
   import { Checkbox } from "@nodes/ui";
   import localStore from "$lib/helpers/localStore";
   import { type PerformanceData } from "./store";
+  import BarSplit from "./BarSplit.svelte";
 
   export let data: PerformanceData;
 
@@ -42,7 +43,7 @@
   }
 
   function getLast(key: string) {
-    return data.at(-1)?.[key][0] || 0;
+    return data.at(-1)?.[key]?.[0] || 0;
   }
 
   function getLasts() {
@@ -53,13 +54,13 @@
     if (onlyLast) {
       return (
         getLast("runtime") +
-        getLast("create-geometries") +
+        getLast("update-geometries") +
         getLast("worker-transfer")
       );
     }
     return (
       getAverage("runtime") +
-      getAverage("create-geometries") +
+      getAverage("update-geometries") +
       getAverage("worker-transfer")
     );
   }
@@ -73,7 +74,7 @@
   const viewerKeys = [
     "total-vertices",
     "total-faces",
-    "create-geometries",
+    "update-geometries",
     "split-result",
   ];
 
@@ -116,8 +117,8 @@
       return data.map((run) => {
         return (
           run["runtime"].reduce((acc, v) => acc + v, 0) +
-          run["create-geometries"].reduce((acc, v) => acc + v, 0) +
-          run["worker-transfer"].reduce((acc, v) => acc + v, 0)
+          run["update-geometries"].reduce((acc, v) => acc + v, 0) +
+          (run["worker-transfer"]?.reduce((acc, v) => acc + v, 0) || 0)
         );
       });
     }
@@ -125,8 +126,8 @@
     return data.map((run) => {
       return (
         run["runtime"][0] +
-        run["create-geometries"][0] +
-        run["worker-transfer"][0]
+        run["update-geometries"][0] +
+        (run["worker-transfer"]?.[0] || 0)
       );
     });
   }
@@ -147,6 +148,22 @@
     });
   }
 
+  function getSplitValues(): number[] {
+    if (showAverage) {
+      return [
+        getAverage("worker-transfer"),
+        getAverage("runtime"),
+        getAverage("update-geometries"),
+      ];
+    }
+
+    return [
+      getLast("worker-transfer"),
+      getLast("runtime"),
+      getLast("update-geometries"),
+    ];
+  }
+
   function getTitle(t: string) {
     if (t.includes("/")) {
       return `Node ${t.split("/").slice(-1).join("/")}`;
@@ -159,7 +176,7 @@
   }
 </script>
 
-{#key $activeType && data}
+{#key $activeType}
   {#if $activeType === "cache-hit"}
     <Monitor
       title="Cache Hits"
@@ -174,117 +191,122 @@
       points={constructPoints($activeType)}
     />
   {/if}
-
-  <div class="p-4">
-    <div class="flex items-center gap-2">
-      <Checkbox id="show-total" bind:value={showAverage} />
-      <label for="show-total">Show Average</label>
-    </div>
-    {#if data.length !== 0}
-      <h3>General</h3>
-      <table>
-        <tbody>
-          <tr>
-            <td>
-              {round(getTotalPerformance(!showAverage))}<span>ms</span>
-            </td>
-            <td
-              class:active={$activeType === "total"}
-              on:click={() => ($activeType = "total")}
-            >
-              total<span
-                >({Math.floor(
-                  1000 / getTotalPerformance(showAverage),
-                )}fps)</span
-              >
-            </td>
-          </tr>
-          {#each getPerformanceData(!showAverage) as [key, value]}
-            <tr>
-              <td>
-                {round(value)}<span>ms</span>
-              </td>
-              <td
-                class:active={$activeType === key}
-                on:click={() => ($activeType = key)}
-              >
-                {key}
-              </td>
-            </tr>
-          {/each}
-
-          <tr>
-            <td>{data.length}</td>
-            <td>Samples</td>
-          </tr>
-        </tbody>
-        <tbody>
-          <tr>
-            <td>
-              <h3>Nodes</h3>
-            </td>
-          </tr>
-        </tbody>
-        <tbody>
-          <tr>
-            <td> {getCacheRatio(!showAverage)}<span>%</span> </td>
-            <td
-              class:active={$activeType === "cache-hit"}
-              on:click={() => ($activeType = "cache-hit")}>cache hits</td
-            >
-          </tr>
-          {#each getNodePerformanceData(!showAverage) as [key, value]}
-            <tr>
-              <td>
-                {round(value)}<span>ms</span>
-              </td>
-
-              <td
-                class:active={$activeType === key}
-                on:click={() => ($activeType = key)}
-              >
-                {key.split("/").slice(-1).join("/")}
-              </td>
-            </tr>
-          {/each}
-        </tbody>
-        <tbody>
-          <tr>
-            <td>
-              <h3>Viewer</h3>
-            </td>
-          </tr>
-        </tbody>
-        <tbody>
-          <tr>
-            <td>{humanizeNumber(getLast("total-vertices"))}</td>
-            <td>Vertices</td>
-          </tr>
-          <tr>
-            <td>{humanizeNumber(getLast("total-faces"))}</td>
-            <td>Faces</td>
-          </tr>
-          {#each getViewerPerformanceData(!showAverage) as [key, value]}
-            <tr>
-              <td>
-                {round(value)}<span>ms</span>
-              </td>
-              <td
-                class:active={$activeType === key}
-                on:click={() => ($activeType = key)}
-              >
-                {key.split("/").slice(-1).join("/")}
-              </td>
-            </tr>
-          {/each}
-        </tbody>
-      </table>
-    {:else}
-      <p>No runs available</p>
-    {/if}
-  </div>
 {/key}
 
+<div class="p-4 performance-tabler">
+  <div class="flex items-center gap-2">
+    <Checkbox id="show-total" bind:value={showAverage} />
+    <label for="show-total">Show Average</label>
+  </div>
+
+  {#if data.length !== 0}
+    <BarSplit
+      labels={["worker-transfer", "runtime", "update-geometries"]}
+      values={getSplitValues()}
+    />
+
+    <h3>General</h3>
+
+    <table>
+      <tbody>
+        <tr>
+          <td>
+            {round(getTotalPerformance(!showAverage))}<span>ms</span>
+          </td>
+          <td
+            class:active={$activeType === "total"}
+            on:click={() => ($activeType = "total")}
+          >
+            total<span
+              >({Math.floor(1000 / getTotalPerformance(showAverage))}fps)</span
+            >
+          </td>
+        </tr>
+        {#each getPerformanceData(!showAverage) as [key, value]}
+          <tr>
+            <td>
+              {round(value)}<span>ms</span>
+            </td>
+            <td
+              class:active={$activeType === key}
+              on:click={() => ($activeType = key)}
+            >
+              {key}
+            </td>
+          </tr>
+        {/each}
+
+        <tr>
+          <td>{data.length}</td>
+          <td>Samples</td>
+        </tr>
+      </tbody>
+      <tbody>
+        <tr>
+          <td>
+            <h3>Nodes</h3>
+          </td>
+        </tr>
+      </tbody>
+      <tbody>
+        <tr>
+          <td> {getCacheRatio(!showAverage)}<span>%</span> </td>
+          <td
+            class:active={$activeType === "cache-hit"}
+            on:click={() => ($activeType = "cache-hit")}>cache hits</td
+          >
+        </tr>
+        {#each getNodePerformanceData(!showAverage) as [key, value]}
+          <tr>
+            <td>
+              {round(value)}<span>ms</span>
+            </td>
+
+            <td
+              class:active={$activeType === key}
+              on:click={() => ($activeType = key)}
+            >
+              {key.split("/").slice(-1).join("/")}
+            </td>
+          </tr>
+        {/each}
+      </tbody>
+      <tbody>
+        <tr>
+          <td>
+            <h3>Viewer</h3>
+          </td>
+        </tr>
+      </tbody>
+      <tbody>
+        <tr>
+          <td>{humanizeNumber(getLast("total-vertices"))}</td>
+          <td>Vertices</td>
+        </tr>
+        <tr>
+          <td>{humanizeNumber(getLast("total-faces"))}</td>
+          <td>Faces</td>
+        </tr>
+        {#each getViewerPerformanceData(!showAverage) as [key, value]}
+          <tr>
+            <td>
+              {round(value)}<span>ms</span>
+            </td>
+            <td
+              class:active={$activeType === key}
+              on:click={() => ($activeType = key)}
+            >
+              {key.split("/").slice(-1).join("/")}
+            </td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  {:else}
+    <p>No runs available</p>
+  {/if}
+</div>
+
 <style>
   h3 {
     margin: 0;
@@ -296,6 +318,9 @@
     opacity: 0.3;
     margin-left: 4px;
   }
+  table {
+    margin-bottom: 70px;
+  }
   td {
     padding-right: 10px;
     padding-block: 5px;
diff --git a/app/src/lib/performance/store.ts b/app/src/lib/performance/store.ts
index 63f9019..7e50a05 100644
--- a/app/src/lib/performance/store.ts
+++ b/app/src/lib/performance/store.ts
@@ -6,15 +6,18 @@ export interface PerformanceStore extends Readable<PerformanceData> {
   startRun(): void;
   stopRun(): void;
   addPoint(name: string, value?: number): void;
+  endPoint(name?: string): void;
   mergeData(data: PerformanceData[number]): void;
   get: () => PerformanceData;
 }
 
-export function createPerformanceStore(): PerformanceStore {
+export function createPerformanceStore(id?: string): PerformanceStore {
 
   let data: PerformanceData = [];
 
   let currentRun: Record<string, number[]> | undefined;
+  let temp: Record<string, number> | undefined;
+  let lastPoint: string | undefined;
 
   let set: (v: PerformanceData) => void;
 
@@ -23,22 +26,36 @@ export function createPerformanceStore(): PerformanceStore {
   });
 
   function startRun() {
+    if (currentRun) return;
     currentRun = {};
+    lastPoint = undefined;
+    temp = {
+      start: performance.now()
+    }
   }
 
   function stopRun() {
-    if (currentRun) {
+    if (currentRun && temp) {
+      currentRun["total"] = [performance.now() - temp.start];
       data.push(currentRun);
       data = data.slice(-100);
       currentRun = undefined;
+      temp = undefined;
       if (set) set(data);
     }
   }
 
-  function addPoint(name: string, value: number) {
+  function addPoint(name: string, value?: number) {
     if (!currentRun) return;
-    currentRun[name] = currentRun[name] || [];
-    currentRun[name].push(value);
+    if (value === undefined) {
+      if (temp) {
+        lastPoint = name;
+        temp[name] = performance.now();
+      }
+    } else {
+      currentRun[name] = currentRun[name] || [];
+      currentRun[name].push(value);
+    }
   }
 
   function get() {
@@ -59,11 +76,21 @@ export function createPerformanceStore(): PerformanceStore {
     });
   }
 
+  function endPoint(name = lastPoint) {
+    if (name === lastPoint) lastPoint = undefined;
+    if (name && currentRun && temp && name in temp) {
+      currentRun[name] = currentRun[name] || [];
+      currentRun[name].push(performance.now() - temp[name]);
+      delete temp[name];
+    }
+  }
+
   return {
     subscribe,
     startRun,
     stopRun,
     addPoint,
+    endPoint,
     mergeData,
     get
   }
diff --git a/app/src/lib/result-viewer/Scene.svelte b/app/src/lib/result-viewer/Scene.svelte
index 0aa0015..9e5108b 100644
--- a/app/src/lib/result-viewer/Scene.svelte
+++ b/app/src/lib/result-viewer/Scene.svelte
@@ -1,11 +1,6 @@
 <script lang="ts">
-  import { T } from "@threlte/core";
-  import {
-    MeshLineGeometry,
-    MeshLineMaterial,
-    Text,
-    useTexture,
-  } from "@threlte/extras";
+  import { T, useThrelte } from "@threlte/core";
+  import { MeshLineGeometry, MeshLineMaterial, Text } from "@threlte/extras";
   import {
     type Group,
     type BufferGeometry,
@@ -16,15 +11,20 @@
   import { AppSettings } from "../settings/app-settings";
   import Camera from "./Camera.svelte";
 
+  const d = useThrelte();
+
+  export const invalidate = d.invalidate;
+
   export let geometries: BufferGeometry[];
   export let lines: Vector3[][];
+  export let scene;
   let geos: Group;
+  $: scene = geos;
+  export let geoGroup: Group;
 
   export let centerCamera: boolean = true;
   let center = new Vector3(0, 4, 0);
 
-  const matcap = useTexture("/matcap_green.jpg");
-
   function getPosition(geo: BufferGeometry, i: number) {
     return [
       geo.attributes.position.array[i],
@@ -48,9 +48,6 @@
   <T.GridHelper args={[20, 20]} />
 {/if}
 
-<T.DirectionalLight position={[0, 10, 10]} />
-<T.AmbientLight intensity={2} />
-
 <T.Group bind:ref={geos}>
   {#each geometries as geo}
     {#if $AppSettings.showIndices}
@@ -67,15 +64,9 @@
         <T.PointsMaterial size={0.25} />
       </T.Points>
     {/if}
-    {#await matcap then value}
-      <T.Mesh geometry={geo}>
-        <T.MeshMatcapMaterial
-          matcap={value}
-          wireframe={$AppSettings.wireframe}
-        />
-      </T.Mesh>
-    {/await}
   {/each}
+
+  <T.Group bind:ref={geoGroup}></T.Group>
 </T.Group>
 
 {#if $AppSettings.showStemLines && lines}
diff --git a/app/src/lib/result-viewer/Viewer.svelte b/app/src/lib/result-viewer/Viewer.svelte
index 824fde4..ec5e288 100644
--- a/app/src/lib/result-viewer/Viewer.svelte
+++ b/app/src/lib/result-viewer/Viewer.svelte
@@ -1,155 +1,23 @@
 <script lang="ts">
   import { Canvas } from "@threlte/core";
   import Scene from "./Scene.svelte";
-  import {
-    BufferAttribute,
-    BufferGeometry,
-    Float32BufferAttribute,
-    Vector3,
-  } from "three";
-  import { decodeFloat, fastHashArrayBuffer } from "@nodes/utils";
+  import { BufferGeometry, Group, Vector3 } from "three";
+
+  import { updateGeometries } from "./updateGeometries";
+  import { decodeFloat, splitNestedArray } from "@nodes/utils";
   import type { PerformanceStore } from "$lib/performance";
   import { AppSettings } from "$lib/settings/app-settings";
 
   export let centerCamera: boolean = true;
   export let perf: PerformanceStore;
+  export let scene: Group;
+
+  let geoGroup: Group;
 
   let geometries: BufferGeometry[] = [];
   let lines: Vector3[][] = [];
 
-  function fastArrayHash(arr: ArrayBuffer) {
-    let ints = new Uint8Array(arr);
-
-    const sampleDistance = Math.max(Math.floor(ints.length / 100), 1);
-    const sampleCount = Math.floor(ints.length / sampleDistance);
-
-    let hash = new Uint8Array(sampleCount);
-
-    for (let i = 0; i < sampleCount; i++) {
-      const index = i * sampleDistance;
-      hash[i] = ints[index];
-    }
-
-    return fastHashArrayBuffer(hash.buffer);
-  }
-
-  function createGeometryFromEncodedData(
-    encodedData: Int32Array,
-    geometry = new BufferGeometry(),
-  ): BufferGeometry {
-    // Extract data from the encoded array
-    let index = 1;
-    // const geometryType = encodedData[index++];
-    const vertexCount = encodedData[index++];
-    const faceCount = encodedData[index++];
-
-    // Indices
-    const indicesEnd = index + faceCount * 3;
-    const indices = encodedData.subarray(index, indicesEnd);
-    index = indicesEnd;
-
-    // Vertices
-    const vertices = new Float32Array(
-      encodedData.buffer,
-      index * 4,
-      vertexCount * 3,
-    );
-    index = index + vertexCount * 3;
-    let hash = fastArrayHash(vertices);
-    let posAttribute = geometry.getAttribute(
-      "position",
-    ) as BufferAttribute | null;
-
-    if (geometry.userData?.hash === hash) {
-      return geometry;
-    }
-
-    if (posAttribute && posAttribute.count === vertexCount) {
-      posAttribute.set(vertices, 0);
-      posAttribute.needsUpdate = true;
-    } else {
-      geometry.setAttribute(
-        "position",
-        new Float32BufferAttribute(vertices, 3),
-      );
-    }
-
-    const normals = new Float32Array(
-      encodedData.buffer,
-      index * 4,
-      vertexCount * 3,
-    );
-    index = index + vertexCount * 3;
-
-    if (
-      geometry.userData?.faceCount !== faceCount ||
-      geometry.userData?.vertexCount !== vertexCount
-    ) {
-      // Add data to geometry
-      geometry.setIndex([...indices]);
-    }
-
-    const normalsAttribute = geometry.getAttribute(
-      "normal",
-    ) as BufferAttribute | null;
-    if (normalsAttribute && normalsAttribute.count === vertexCount) {
-      normalsAttribute.set(normals, 0);
-      normalsAttribute.needsUpdate = true;
-    } else {
-      geometry.setAttribute("normal", new Float32BufferAttribute(normals, 3));
-    }
-
-    geometry.userData = {
-      vertexCount,
-      faceCount,
-      hash,
-    };
-
-    return geometry;
-  }
-
-  function parse_args(input: Int32Array) {
-    let index = 0;
-    const length = input.length;
-    let res: Int32Array[] = [];
-
-    let nextBracketIndex = 0;
-    let argStartIndex = 0;
-    let depth = -1;
-
-    while (index < length) {
-      const value = input[index];
-
-      if (index === nextBracketIndex) {
-        nextBracketIndex = index + input[index + 1] + 1;
-        if (value === 0) {
-          depth++;
-        } else {
-          depth--;
-        }
-
-        if (depth === 1 && value === 0) {
-          // if opening bracket
-          argStartIndex = index + 2;
-        }
-
-        if (depth === 0 && value === 1) {
-          // if closing bracket
-          res.push(input.slice(argStartIndex, index));
-          argStartIndex = index + 2;
-        }
-
-        index = nextBracketIndex;
-        continue;
-      }
-
-      // we should not be here
-
-      index++;
-    }
-
-    return res;
-  }
+  let invalidate: () => void;
 
   function createLineGeometryFromEncodedData(encodedData: Int32Array) {
     const positions: Vector3[] = [];
@@ -166,16 +34,13 @@
     return positions;
   }
 
-  export let result: Int32Array;
-  $: result && updateGeometries();
-  function updateGeometries() {
-    let a = performance.now();
-    const inputs = parse_args(result);
-    let b = performance.now();
-    perf?.addPoint("split-result", b - a);
+  export const update = function update(result: Int32Array) {
+    perf?.addPoint("split-result");
+    const inputs = splitNestedArray(result);
+    perf?.endPoint();
 
     if ($AppSettings.showStemLines) {
-      a = performance.now();
+      perf?.addPoint("create-lines");
       lines = inputs
         .map((input) => {
           if (input[0] === 0) {
@@ -183,31 +48,27 @@
           }
         })
         .filter(Boolean) as Vector3[][];
-      b = performance.now();
-      perf?.addPoint("create-lines", b - a);
+      perf.endPoint();
     }
 
-    let totalVertices = 0;
-    let totalFaces = 0;
+    perf?.addPoint("update-geometries");
+
+    const { totalVertices, totalFaces } = updateGeometries(inputs, geoGroup);
+    perf?.endPoint();
 
-    a = performance.now();
-    geometries = inputs
-      .map((input, i) => {
-        if (input[0] === 1) {
-          let geo = createGeometryFromEncodedData(input);
-          totalVertices += geo.userData.vertexCount;
-          totalFaces += geo.userData.faceCount;
-          return geo;
-        }
-      })
-      .filter(Boolean) as BufferGeometry[];
-    b = performance.now();
-    perf?.addPoint("create-geometries", b - a);
     perf?.addPoint("total-vertices", totalVertices);
     perf?.addPoint("total-faces", totalFaces);
-  }
+    invalidate();
+  };
 </script>
 
 <Canvas>
-  <Scene {geometries} {lines} {centerCamera} />
+  <Scene
+    bind:scene
+    bind:geoGroup
+    bind:invalidate
+    {geometries}
+    {lines}
+    {centerCamera}
+  />
 </Canvas>
diff --git a/app/src/lib/result-viewer/updateGeometries.ts b/app/src/lib/result-viewer/updateGeometries.ts
new file mode 100644
index 0000000..76de252
--- /dev/null
+++ b/app/src/lib/result-viewer/updateGeometries.ts
@@ -0,0 +1,146 @@
+import { fastHashArrayBuffer } from "@nodes/utils";
+import { BufferAttribute, BufferGeometry, Float32BufferAttribute, Mesh, MeshMatcapMaterial, TextureLoader, type Group } from "three";
+
+function fastArrayHash(arr: ArrayBuffer) {
+  let ints = new Uint8Array(arr);
+
+  const sampleDistance = Math.max(Math.floor(ints.length / 100), 1);
+  const sampleCount = Math.floor(ints.length / sampleDistance);
+
+  let hash = new Uint8Array(sampleCount);
+
+  for (let i = 0; i < sampleCount; i++) {
+    const index = i * sampleDistance;
+    hash[i] = ints[index];
+  }
+
+  return fastHashArrayBuffer(hash.buffer);
+}
+
+const loader = new TextureLoader();
+const matcap = loader.load('/matcap_green.jpg');
+matcap.colorSpace = "srgb";
+const material = new MeshMatcapMaterial({
+  color: 0xffffff,
+  matcap
+});
+
+function createGeometryFromEncodedData(
+  encodedData: Int32Array,
+  geometry = new BufferGeometry(),
+): BufferGeometry {
+  // Extract data from the encoded array
+  let index = 1;
+  // const geometryType = encodedData[index++];
+  const vertexCount = encodedData[index++];
+  const faceCount = encodedData[index++];
+
+  let hash = fastArrayHash(encodedData);
+
+  if (geometry.userData?.hash === hash) {
+    return geometry;
+  }
+
+  // Indices
+  const indicesEnd = index + faceCount * 3;
+  const indices = encodedData.subarray(index, indicesEnd);
+  index = indicesEnd;
+
+  // Vertices
+  const vertices = new Float32Array(
+    encodedData.buffer,
+    index * 4,
+    vertexCount * 3,
+  );
+  index = index + vertexCount * 3;
+
+  let posAttribute = geometry.getAttribute(
+    "position",
+  ) as BufferAttribute | null;
+
+  if (posAttribute && posAttribute.count === vertexCount) {
+    posAttribute.set(vertices, 0);
+    posAttribute.needsUpdate = true;
+  } else {
+    geometry.setAttribute(
+      "position",
+      new Float32BufferAttribute(vertices, 3),
+    );
+  }
+
+  const normals = new Float32Array(
+    encodedData.buffer,
+    index * 4,
+    vertexCount * 3,
+  );
+  index = index + vertexCount * 3;
+
+  if (
+    geometry.userData?.faceCount !== faceCount ||
+    geometry.userData?.vertexCount !== vertexCount
+  ) {
+    // Add data to geometry
+    geometry.setIndex([...indices]);
+  }
+
+  const normalsAttribute = geometry.getAttribute(
+    "normal",
+  ) as BufferAttribute | null;
+  if (normalsAttribute && normalsAttribute.count === vertexCount) {
+    normalsAttribute.set(normals, 0);
+    normalsAttribute.needsUpdate = true;
+  } else {
+    geometry.setAttribute("normal", new Float32BufferAttribute(normals, 3));
+  }
+
+  geometry.userData = {
+    vertexCount,
+    faceCount,
+    hash,
+  };
+
+  return geometry;
+}
+
+let meshes: Mesh[] = [];
+
+
+export function updateGeometries(inputs: Int32Array[], group: Group) {
+  let totalVertices = 0;
+  let totalFaces = 0;
+  let newGeometries = [];
+
+  for (let i = 0; i < Math.max(meshes.length, inputs.length); i++) {
+    let existingMesh = meshes[i];
+    let input = inputs[i];
+
+    if (input) {
+      if (input[0] !== 1) {
+        continue
+      }
+      totalVertices += input[1];
+      totalFaces += input[2];
+    } else {
+      if (existingMesh) {
+        existingMesh.visible = false;
+      }
+      continue;
+    }
+
+    if (existingMesh) {
+      createGeometryFromEncodedData(input, existingMesh.geometry);
+    } else {
+      let geo = createGeometryFromEncodedData(input);
+      const mesh = new Mesh(geo, material);
+      meshes[i] = mesh;
+      newGeometries.push(mesh);
+    }
+
+  }
+
+  for (let i = 0; i < newGeometries.length; i++) {
+    group.add(newGeometries[i]);
+  }
+
+  return { totalFaces, totalVertices };
+}
diff --git a/app/src/lib/runtime-executor.ts b/app/src/lib/runtime-executor.ts
index a0e0ce2..3f38614 100644
--- a/app/src/lib/runtime-executor.ts
+++ b/app/src/lib/runtime-executor.ts
@@ -128,9 +128,7 @@ export class MemoryRuntimeExecutor implements RuntimeExecutor {
 
   async execute(graph: Graph, settings: Record<string, unknown>) {
 
-    this.perf?.startRun();
-
-    let a0 = performance.now();
+    this.perf?.addPoint("runtime");
 
     let a = performance.now();
 
@@ -250,18 +248,20 @@ export class MemoryRuntimeExecutor implements RuntimeExecutor {
     // return the result of the parent of the output node
     const res = results[outputNode.id];
 
-    this.perf?.addPoint("runtime", performance.now() - a0);
-
-    this.perf?.stopRun();
-
     if (this.cache) {
       this.cache.size = sortedNodes.length * 2;
     }
 
+    this.perf?.endPoint("runtime");
+
     return res as unknown as Int32Array;
 
   }
 
+  getPerformanceData() {
+    return this.perf?.get();
+  }
+
 }
 
 export class MemoryRuntimeCache implements RuntimeCache {
diff --git a/app/src/lib/settings/Settings.svelte b/app/src/lib/settings/Settings.svelte
index cffaeff..ca8cafd 100644
--- a/app/src/lib/settings/Settings.svelte
+++ b/app/src/lib/settings/Settings.svelte
@@ -93,6 +93,8 @@
   .content {
     background: var(--layer-1);
     position: relative;
+    max-height: 100vh;
+    overflow-y: auto;
   }
 
   .tabs {
diff --git a/app/src/lib/settings/app-settings.ts b/app/src/lib/settings/app-settings.ts
index 3d4439d..3fb3c8e 100644
--- a/app/src/lib/settings/app-settings.ts
+++ b/app/src/lib/settings/app-settings.ts
@@ -10,8 +10,10 @@ export const AppSettings = localStore("node-settings", {
   showIndices: false,
   showVertices: false,
   showPerformancePanel: false,
+  showBenchmarkPanel: false,
   centerCamera: true,
   showStemLines: false,
+  useWorker: true,
   amount: 5
 });
 
@@ -69,6 +71,11 @@ export const AppSettingTypes = {
       label: "Wireframe",
       value: false,
     },
+    useWorker: {
+      type: "boolean",
+      label: "Execute runtime in worker",
+      value: true,
+    },
     showIndices: {
       type: "boolean",
       label: "Show Indices",
@@ -79,6 +86,11 @@ export const AppSettingTypes = {
       label: "Show Performance Panel",
       value: false,
     },
+    showBenchmarkPanel: {
+      type: "boolean",
+      label: "Show Benchmark Panel",
+      value: false,
+    },
     showVertices: {
       type: "boolean",
       label: "Show Vertices",
@@ -104,6 +116,18 @@ export const AppSettingTypes = {
         type: "button",
         label: "Load Tree"
       },
+      lottaFaces: {
+        type: "button",
+        label: "Load 'lots of faces'"
+      },
+      lottaNodes: {
+        type: "button",
+        label: "Load 'lots of nodes'"
+      },
+      lottaNodesAndFaces: {
+        type: "button",
+        label: "Load 'lots of nodes and faces'"
+      }
     },
   }
 }
diff --git a/app/src/lib/settings/panels/ActiveNodeSettings.svelte b/app/src/lib/settings/panels/ActiveNodeSettings.svelte
index b54abb5..ce6ce1f 100644
--- a/app/src/lib/settings/panels/ActiveNodeSettings.svelte
+++ b/app/src/lib/settings/panels/ActiveNodeSettings.svelte
@@ -43,7 +43,6 @@
     ? filterInputs(node.tmp.type.inputs)
     : undefined;
   $: store = node ? createStore(node.props, nodeDefinition) : undefined;
-  $: console.log(nodeDefinition, store);
 
   let lastPropsHash = "";
   function updateNode() {
diff --git a/app/src/lib/settings/panels/BenchmarkPanel.svelte b/app/src/lib/settings/panels/BenchmarkPanel.svelte
new file mode 100644
index 0000000..14e4a20
--- /dev/null
+++ b/app/src/lib/settings/panels/BenchmarkPanel.svelte
@@ -0,0 +1,88 @@
+<script lang="ts">
+  import localStore from "$lib/helpers/localStore";
+  import { Integer } from "@nodes/ui";
+  import { writable } from "svelte/store";
+
+  export let run: () => Promise<any>;
+
+  let isRunning = false;
+  let amount = localStore<number>("nodes.benchmark.samples", 500);
+  let samples = 0;
+  let warmUp = writable(0);
+  let warmUpAmount = 10;
+  let state = "";
+  let result = "";
+
+  const copyContent = async (text: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+    } catch (err) {
+      console.error("Failed to copy: ", err);
+    }
+  };
+
+  async function benchmark() {
+    if (isRunning) return;
+    isRunning = true;
+
+    samples = 0;
+    $warmUp = 0;
+
+    await new Promise((r) => setTimeout(r, 100));
+
+    // warm up
+    for (let i = 0; i < warmUpAmount; i++) {
+      await run();
+      $warmUp = i + 1;
+    }
+
+    let results = [];
+
+    // perform run
+    for (let i = 0; i < $amount; i++) {
+      const a = performance.now();
+      await run();
+      samples = i;
+      const b = performance.now();
+      results.push(b - a);
+      console.log(b - a);
+    }
+    result = results.join(" ");
+  }
+</script>
+
+{state}
+
+<div class="wrapper" class:running={isRunning}>
+  {#if isRunning}
+    <p>WarmUp ({$warmUp}/{warmUpAmount})</p>
+    <progress value={$warmUp} max={warmUpAmount}
+      >{Math.floor(($warmUp / warmUpAmount) * 100)}%</progress
+    >
+    <p>Progress ({samples}/{$amount})</p>
+    <progress value={samples} max={$amount}
+      >{Math.floor((samples / $amount) * 100)}%</progress
+    >
+
+    {#if result}
+      <textarea readonly>{result}</textarea>
+      <div>
+        <button on:click={() => copyContent(result)}>Copy</button>
+        <button on:click={() => (isRunning = false)}>reset</button>
+      </div>
+    {/if}
+  {:else}
+    <label for="bench-samples">Samples</label>
+    <Integer id="bench-sample" bind:value={$amount} max={1000} />
+    <button on:click={benchmark} disabled={isRunning}> start </button>
+  {/if}
+</div>
+
+<style>
+  .wrapper {
+    padding: 1em;
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
+  }
+</style>
diff --git a/app/src/lib/settings/panels/ExportSettings.svelte b/app/src/lib/settings/panels/ExportSettings.svelte
new file mode 100644
index 0000000..2217ac1
--- /dev/null
+++ b/app/src/lib/settings/panels/ExportSettings.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+  import type { Scene } from "three";
+  import { OBJExporter } from "three/addons/exporters/OBJExporter.js";
+  import { GLTFExporter } from "three/addons/exporters/GLTFExporter.js";
+  import FileSaver from "file-saver";
+
+  // Download
+  const download = (
+    data: string,
+    name: string,
+    mimetype: string,
+    extension: string,
+  ) => {
+    if (typeof data !== "string") data = JSON.stringify(data);
+    const blob = new Blob([data], { type: mimetype + ";charset=utf-8" });
+    FileSaver.saveAs(blob, name + "." + extension);
+  };
+
+  // export const json = (data, name = 'default') => {
+  //   download(JSON.stringify(data), name, 'application/json', 'json');
+  // };
+  //
+  // export const obj = (data, name = 'default') => {
+  // };
+
+  export let scene: Scene;
+
+  function exportGltf() {
+    const exporter = new GLTFExporter();
+    exporter.parse(
+      scene,
+      (gltf) => {
+        // download .gltf file
+        download(gltf, "plant", "text/plain", "gltf");
+      },
+      (err) => {
+        console.log(err);
+      },
+    );
+  }
+
+  function exportObj() {
+    const exporter = new OBJExporter();
+    const result = exporter.parse(scene);
+    // download .obj file
+    download(result, "plant", "text/plain", "obj");
+  }
+</script>
+
+<div class="p-2">
+  <button on:click={exportObj}> export obj </button>
+  <button on:click={exportGltf}> export gltf </button>
+</div>
diff --git a/app/src/lib/settings/panels/Keymap.svelte b/app/src/lib/settings/panels/Keymap.svelte
index 32eb0df..28bf9ad 100644
--- a/app/src/lib/settings/panels/Keymap.svelte
+++ b/app/src/lib/settings/panels/Keymap.svelte
@@ -4,10 +4,11 @@
 
   export let keymap: ReturnType<typeof createKeyMap>;
   const keys = keymap?.keys;
+  export let title = "Keymap";
 </script>
 
 <div class="wrapper">
-  <h3>Editor</h3>
+  <h3>{title}</h3>
 
   <section>
     {#each $keys as key}
diff --git a/app/src/lib/worker-runtime-executor-backend.ts b/app/src/lib/worker-runtime-executor-backend.ts
index a5d646e..55550d7 100644
--- a/app/src/lib/worker-runtime-executor-backend.ts
+++ b/app/src/lib/worker-runtime-executor-backend.ts
@@ -7,12 +7,15 @@ const cache = new MemoryRuntimeCache();
 const nodeRegistry = new RemoteNodeRegistry("");
 const executor = new MemoryRuntimeExecutor(nodeRegistry, cache);
 
-const performanceStore = createPerformanceStore();
+const performanceStore = createPerformanceStore("worker");
 executor.perf = performanceStore;
 
 export async function executeGraph(graph: Graph, settings: Record<string, unknown>): Promise<Int32Array> {
   await nodeRegistry.load(graph.nodes.map((n) => n.type));
-  return executor.execute(graph, settings);
+  performanceStore.startRun();
+  let res = await executor.execute(graph, settings);
+  performanceStore.stopRun();
+  return res;
 }
 
 export function getPerformanceData() {
diff --git a/app/src/routes/+page.svelte b/app/src/routes/+page.svelte
index f361ede..e817d3c 100644
--- a/app/src/routes/+page.svelte
+++ b/app/src/routes/+page.svelte
@@ -10,7 +10,7 @@
   import { AppSettingTypes, AppSettings } from "$lib/settings/app-settings";
   import { writable, type Writable } from "svelte/store";
   import Keymap from "$lib/settings/panels/Keymap.svelte";
-  import type { createKeyMap } from "$lib/helpers/createKeyMap";
+  import { createKeyMap } from "$lib/helpers/createKeyMap";
   import NodeStore from "$lib/node-store/NodeStore.svelte";
   import type { GraphManager } from "$lib/graph-interface/graph-manager";
   import { setContext } from "svelte";
@@ -20,15 +20,28 @@
   import GraphSettings from "$lib/settings/panels/GraphSettings.svelte";
   import NestedSettings from "$lib/settings/panels/NestedSettings.svelte";
   import { createPerformanceStore } from "$lib/performance";
+  import type { Scene } from "three";
+  import ExportSettings from "$lib/settings/panels/ExportSettings.svelte";
+  import {
+    MemoryRuntimeCache,
+    MemoryRuntimeExecutor,
+  } from "$lib/runtime-executor";
+  import { fastHashString } from "@nodes/utils";
+  import BenchmarkPanel from "$lib/settings/panels/BenchmarkPanel.svelte";
+
+  let performanceStore = createPerformanceStore("page");
 
   const nodeRegistry = new RemoteNodeRegistry("");
   const workerRuntime = new WorkerRuntimeExecutor();
+  const runtimeCache = new MemoryRuntimeCache();
+  const memoryRuntime = new MemoryRuntimeExecutor(nodeRegistry, runtimeCache);
+  memoryRuntime.perf = performanceStore;
 
-  let performanceStore = createPerformanceStore();
+  $: runtime = $AppSettings.useWorker ? workerRuntime : memoryRuntime;
 
   let activeNode: Node | undefined;
-
-  let graphResult: Int32Array;
+  let scene: Scene;
+  let updateViewerResult: (result: Int32Array) => void;
 
   let graph = localStorage.getItem("graph")
     ? JSON.parse(localStorage.getItem("graph")!)
@@ -36,11 +49,22 @@
 
   let manager: GraphManager;
   let managerStatus: Writable<"loading" | "error" | "idle">;
-  $: if (manager) {
-    setContext("graphManager", manager);
+
+  async function randomGenerate() {
+    const g = manager.serialize();
+    const s = { ...$graphSettings, randomSeed: true };
+    const res = await handleResult(g, s);
+    return res;
   }
 
   let keymap: ReturnType<typeof createKeyMap>;
+  let applicationKeymap = createKeyMap([
+    {
+      key: "r",
+      description: "Regenerate the plant model",
+      callback: randomGenerate,
+    },
+  ]);
   let graphSettings = writable<Record<string, any>>({});
   let graphSettingTypes = {};
 
@@ -50,42 +74,59 @@
     | {
         graph: Graph;
         settings: Record<string, any>;
+        hash: number;
       }
     | undefined;
 
   async function handleResult(_graph: Graph, _settings: Record<string, any>) {
     if (!_settings) return;
+    const inputHash = fastHashString(
+      JSON.stringify(_graph) + JSON.stringify(_settings),
+    );
     if (isWorking) {
       unfinished = {
         graph: _graph,
         settings: _settings,
+        hash: inputHash,
       };
-      return;
+      return false;
     }
     isWorking = true;
+    performanceStore.startRun();
     try {
       let a = performance.now();
-      graphResult = await workerRuntime.execute(_graph, _settings);
+      const graphResult = await runtime.execute(_graph, _settings);
       let b = performance.now();
-      let perfData = await workerRuntime.getPerformanceData();
-      let lastRun = perfData.at(-1);
-      if (lastRun) {
-        lastRun["worker-transfer"] = [b - a - lastRun.runtime[0]];
-        performanceStore.mergeData(lastRun);
+
+      if ($AppSettings.useWorker) {
+        let perfData = await runtime.getPerformanceData();
+        let lastRun = perfData?.at(-1);
+        if (lastRun?.total) {
+          lastRun.runtime = lastRun.total;
+          delete lastRun.total;
+          performanceStore.mergeData(lastRun);
+          performanceStore.addPoint(
+            "worker-transfer",
+            b - a - lastRun.runtime[0],
+          );
+        }
       }
-      isWorking = false;
+
+      updateViewerResult(graphResult);
     } catch (error) {
       console.log("errors", error);
+    } finally {
+      performanceStore.stopRun();
+      isWorking = false;
     }
 
-    performanceStore.stopRun();
-    performanceStore.startRun();
-
-    if (unfinished) {
+    if (unfinished && unfinished.hash === inputHash) {
       let d = unfinished;
       unfinished = undefined;
-      handleResult(d.graph, d.settings);
+      await handleResult(d.graph, d.settings);
     }
+
+    return true;
   }
 
   $: if (AppSettings) {
@@ -97,6 +138,18 @@
     AppSettingTypes.debug.stressTest.loadTree.callback = () => {
       graph = templates.tree($AppSettings.amount);
     };
+    //@ts-ignore
+    AppSettingTypes.debug.stressTest.lottaFaces.callback = () => {
+      graph = templates.lottaFaces;
+    };
+    //@ts-ignore
+    AppSettingTypes.debug.stressTest.lottaNodes.callback = () => {
+      graph = templates.lottaNodes;
+    };
+    //@ts-ignore
+    AppSettingTypes.debug.stressTest.lottaNodesAndFaces.callback = () => {
+      graph = templates.lottaNodesAndFaces;
+    };
   }
 
   function handleSave(event: CustomEvent<Graph>) {
@@ -104,13 +157,15 @@
   }
 </script>
 
+<svelte:document on:keydown={applicationKeymap.handleKeyboardEvent} />
 <div class="wrapper manager-{$managerStatus}">
   <header></header>
   <Grid.Row>
     <Grid.Cell>
       <Viewer
-        result={graphResult}
         perf={performanceStore}
+        bind:scene
+        bind:update={updateViewerResult}
         centerCamera={$AppSettings.centerCamera}
       />
     </Grid.Cell>
@@ -143,10 +198,14 @@
             title="Keyboard Shortcuts"
             icon="i-tabler-keyboard"
           >
+            <Keymap title="Application" keymap={applicationKeymap} />
             {#if keymap}
-              <Keymap {keymap} />
+              <Keymap title="Node-Editor" {keymap} />
             {/if}
           </Panel>
+          <Panel id="exports" title="Exporter" icon="i-tabler-package-export">
+            <ExportSettings {scene} />
+          </Panel>
           <Panel
             id="node-store"
             classes="text-green-400"
@@ -166,6 +225,15 @@
               <PerformanceViewer data={$performanceStore} />
             {/if}
           </Panel>
+          <Panel
+            id="benchmark"
+            title="Benchmark"
+            classes="text-red-400"
+            hidden={!$AppSettings.showBenchmarkPanel}
+            icon="i-tabler-graph"
+          >
+            <BenchmarkPanel run={randomGenerate} />
+          </Panel>
           <Panel
             id="graph-settings"
             title="Graph Settings"
@@ -190,8 +258,6 @@
   </Grid.Row>
 </div>
 
-<span class="font-red" />
-
 <style>
   header {
     /* border-bottom: solid thin var(--outline); */
diff --git a/nodes/max/plantarium/gravity/src/input.json b/nodes/max/plantarium/gravity/src/input.json
index 7908b38..77db494 100644
--- a/nodes/max/plantarium/gravity/src/input.json
+++ b/nodes/max/plantarium/gravity/src/input.json
@@ -9,13 +9,13 @@
     },
     "strength": {
       "type": "float",
-      "min": 0.1,
+      "min": 0,
       "max": 1
     },
     "curviness": {
       "type": "float",
       "hidden": true,
-      "min": 0.1,
+      "min": 0,
       "max": 1
     },
     "depth": {
diff --git a/nodes/max/plantarium/gravity/src/lib.rs b/nodes/max/plantarium/gravity/src/lib.rs
index 178f18a..b12e1f5 100644
--- a/nodes/max/plantarium/gravity/src/lib.rs
+++ b/nodes/max/plantarium/gravity/src/lib.rs
@@ -1,8 +1,9 @@
 use glam::Vec3;
 use macros::include_definition_file;
 use utils::{
-    concat_args, evaluate_float, evaluate_int, geometry::wrap_path_mut, log, reset_call_count,
-    set_panic_hook, split_args,
+    concat_args, evaluate_float, evaluate_int,
+    geometry::{wrap_path, wrap_path_mut},
+    log, reset_call_count, set_panic_hook, split_args,
 };
 use wasm_bindgen::prelude::*;
 
@@ -34,58 +35,64 @@ pub fn execute(input: &[i32]) -> Vec<i32> {
     let output: Vec<Vec<i32>> = plants
         .iter()
         .map(|_path_data| {
-            let mut path_data = _path_data.to_vec();
+            let path_data = _path_data.to_vec();
             if path_data[2] != 0 || path_data[3] < (max_depth - depth + 1) {
                 return path_data;
             }
 
-            let path = wrap_path_mut(&mut path_data);
+            let path = wrap_path(&path_data);
+            let mut output_data = path_data.clone();
+            let output = wrap_path_mut(&mut output_data);
 
             let mut offset_vec = Vec3::ZERO;
 
-            for i in 1..path.length {
-                // let alpha = i as f32 / (path.length - 1) as f32;
-                let start_index = (i - 1) * 4;
-                let end_index = start_index + 4;
+            let original_length = path.get_length();
+
+            for i in 0..path.length - 1 {
+                let alpha = i as f32 / (path.length - 1) as f32;
+                let start_index = i * 4;
 
                 let start_point = Vec3::from_slice(&path.points[start_index..start_index + 3]);
-                let end_point = Vec3::from_slice(&path.points[end_index..end_index + 3]);
+                let end_point = Vec3::from_slice(&path.points[start_index + 4..start_index + 7]);
 
-                let length = (end_point - start_point).length();
+                let direction = end_point - start_point;
 
-                let normalised = (end_point - start_point).normalize();
-
-                let strength = evaluate_float(args[1]);
-                let down_point = Vec3::new(0.0, -length * strength, 0.0);
+                let length = direction.length();
 
                 let curviness = evaluate_float(args[2]);
+                let strength =
+                    evaluate_float(args[1]) / curviness.max(0.0001) * evaluate_float(args[1]);
 
-                let mut mid_point = lerp_vec3(
-                    normalised,
-                    down_point,
-                    curviness * (i as f32 / path.length as f32).sqrt(),
+                log!(
+                    "length: {}, curviness: {}, strength: {}",
+                    length,
+                    curviness,
+                    strength
                 );
 
+                let down_point = Vec3::new(0.0, -length * strength, 0.0);
+
+                let mut mid_point = lerp_vec3(direction, down_point, curviness * alpha.sqrt());
+
                 if mid_point[0] == 0.0 && mid_point[2] == 0.0 {
                     mid_point[0] += 0.0001;
                     mid_point[2] += 0.0001;
                 }
 
-                mid_point = mid_point.normalize();
-
-                mid_point *= length;
+                // Correct midpoint length
+                mid_point *= mid_point.length() / length;
 
                 let final_end_point = start_point + mid_point;
                 let offset_end_point = end_point + offset_vec;
 
-                path.points[end_index] = offset_end_point[0];
-                path.points[end_index + 1] = offset_end_point[1];
-                path.points[end_index + 2] = offset_end_point[2];
+                output.points[start_index + 4] = offset_end_point[0];
+                output.points[start_index + 5] = offset_end_point[1];
+                output.points[start_index + 6] = offset_end_point[2];
 
-                let offset = final_end_point - end_point;
-                offset_vec += offset;
+                offset_vec += final_end_point - end_point;
             }
-            path_data
+            log!("length: {} final: {}", original_length, output.get_length());
+            output_data
         })
         .collect();
 
diff --git a/nodes/max/plantarium/noise/src/lib.rs b/nodes/max/plantarium/noise/src/lib.rs
index f8c2ec0..8f77623 100644
--- a/nodes/max/plantarium/noise/src/lib.rs
+++ b/nodes/max/plantarium/noise/src/lib.rs
@@ -1,4 +1,3 @@
-use glam::Vec3;
 use macros::include_definition_file;
 use noise::{HybridMulti, MultiFractal, NoiseFn, OpenSimplex};
 use utils::{
@@ -66,15 +65,7 @@ pub fn execute(input: &[i32]) -> Vec<i32> {
 
             let path = wrap_path_mut(&mut path_data);
 
-            let p0 = Vec3::new(path.points[0], path.points[1], path.points[2]);
-
-            let p2 = Vec3::new(
-                path.points[path.length * 4 - 3],
-                path.points[path.length * 4 - 2],
-                path.points[path.length * 4 - 1],
-            );
-
-            let length = (p2 - p0).length() as f64;
+            let length = path.get_length() as f64;
 
             for i in 0..path.length {
                 let a = i as f64 / (path.length - 1) as f64;
diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts
index 44cc8ed..45d3cad 100644
--- a/packages/types/src/index.ts
+++ b/packages/types/src/index.ts
@@ -1,5 +1,6 @@
 export type { NodeInput } from "./inputs";
 export type { NodeRegistry, RuntimeExecutor, RuntimeCache } from "./components";
 export type { Node, NodeDefinition, Socket, NodeId, Edge, Graph } from "./types";
+export { NodeSchema, GraphSchema } from "./types";
 export { NodeDefinitionSchema } from "./types";
 
diff --git a/packages/types/src/types.ts b/packages/types/src/types.ts
index f8d9326..1fa6023 100644
--- a/packages/types/src/types.ts
+++ b/packages/types/src/types.ts
@@ -3,10 +3,18 @@ import { NodeInputSchema } from "./inputs";
 
 export type NodeId = `${string}/${string}/${string}`;
 
+export const NodeSchema = z.object({
+  id: z.number(),
+  type: z.string(),
+  props: z.record(z.union([z.number(), z.array(z.number())])).optional(),
+  meta: z.object({
+    title: z.string().optional(),
+    lastModified: z.string().optional(),
+  }).optional(),
+  position: z.tuple([z.number(), z.number()])
+});
+
 export type Node = {
-  id: number;
-  type: NodeId;
-  props?: Record<string, number | number[]>,
   tmp?: {
     depth?: number;
     mesh?: any;
@@ -22,13 +30,8 @@ export type Node = {
     ref?: HTMLElement;
     visible?: boolean;
     isMoving?: boolean;
-  },
-  meta?: {
-    title?: string;
-    lastModified?: string;
-  },
-  position: [x: number, y: number]
-}
+  }
+} & z.infer<typeof NodeSchema>;
 
 export const NodeDefinitionSchema = z.object({
   id: z.string(),
@@ -50,16 +53,17 @@ export type Socket = {
   position: [number, number];
 };
 
-
 export type Edge = [Node, number, Node, string];
 
-export type Graph = {
-  id: number;
-  meta?: {
-    title?: string;
-    lastModified?: string;
-  },
-  settings?: Record<string, any>,
-  nodes: Node[];
-  edges: [number, number, number, string][];
-}
+export const GraphSchema = z.object({
+  id: z.number().optional(),
+  meta: z.object({
+    title: z.string().optional(),
+    lastModified: z.string().optional(),
+  }).optional(),
+  settings: z.record(z.any()).optional(),
+  nodes: z.array(NodeSchema),
+  edges: z.array(z.tuple([z.number(), z.number(), z.number(), z.string()])),
+});
+
+export type Graph = z.infer<typeof GraphSchema> & { nodes: Node[] };
diff --git a/packages/ui/src/lib/Input.svelte b/packages/ui/src/lib/Input.svelte
index 5da0d74..2caa7f9 100644
--- a/packages/ui/src/lib/Input.svelte
+++ b/packages/ui/src/lib/Input.svelte
@@ -1,25 +1,25 @@
 <script lang="ts">
-  import Checkbox from "./elements/Checkbox.svelte";
-  import Float from "./elements/Float.svelte";
-  import Integer from "./elements/Integer.svelte";
-  import Select from "./elements/Select.svelte";
+	import Checkbox from './elements/Checkbox.svelte';
+	import Float from './elements/Float.svelte';
+	import Integer from './elements/Integer.svelte';
+	import Select from './elements/Select.svelte';
 
-  import type { NodeInput } from "@nodes/types";
-  import Vec3 from "./elements/Vec3.svelte";
+	import type { NodeInput } from '@nodes/types';
+	import Vec3 from './elements/Vec3.svelte';
 
-  export let input: NodeInput;
-  export let value: any;
-  export let id: string;
+	export let input: NodeInput;
+	export let value: any;
+	export let id: string;
 </script>
 
-{#if input.type === "float"}
-  <Float {id} bind:value min={input?.min} max={input?.max} />
-{:else if input.type === "integer"}
-  <Integer {id} bind:value min={input?.min} max={input?.max} />
-{:else if input.type === "boolean"}
-  <Checkbox {id} bind:value />
-{:else if input.type === "select"}
-  <Select {id} bind:value options={input.options} />
-{:else if input.type === "vec3"}
-  <Vec3 {id} bind:value />
+{#if input.type === 'float'}
+	<Float {id} bind:value min={input?.min} max={input?.max} />
+{:else if input.type === 'integer'}
+	<Integer {id} bind:value min={input?.min} max={input?.max} />
+{:else if input.type === 'boolean'}
+	<Checkbox {id} bind:value />
+{:else if input.type === 'select'}
+	<Select {id} bind:value options={input?.options || []} />
+{:else if input.type === 'vec3'}
+	<Vec3 {id} bind:value />
 {/if}
diff --git a/packages/ui/src/lib/elements/Checkbox.svelte b/packages/ui/src/lib/elements/Checkbox.svelte
index f5d232a..20eded7 100644
--- a/packages/ui/src/lib/elements/Checkbox.svelte
+++ b/packages/ui/src/lib/elements/Checkbox.svelte
@@ -1,96 +1,96 @@
 <script lang="ts">
-  export let value: boolean;
+	export let value: boolean;
 
-  $: if (typeof value === "string") {
-    value = value === "true";
-  } else if (typeof value === "number") {
-    value = value === 1;
-  }
+	$: if (typeof value === 'string') {
+		value = value === 'true';
+	} else if (typeof value === 'number') {
+		value = value === 1;
+	}
 
-  export let id = "";
+	export let id = '';
 </script>
 
 <input {id} type="checkbox" bind:checked={value} />
 <label for={id}>
-  <svg viewBox="0 0 19 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M2 7L7 12L17 2"
-      stroke="currentColor"
-      stroke-width="3"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
-  </svg>
+	<svg viewBox="0 0 19 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			d="M2 7L7 12L17 2"
+			stroke="currentColor"
+			stroke-width="3"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+	</svg>
 </label>
 
 <style>
-  input[type="checkbox"] {
-    position: absolute;
-    overflow: hidden;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    width: 1px;
-    margin: -1px;
-    padding: 0;
-    border: 0;
-  }
-  #inputPreview {
-    display: flex;
-    gap: 20px;
-    justify-content: center;
-  }
-  input + label {
-    position: relative;
-    font-size: 14px;
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    height: 22px;
-    color: rgb(0, 0, 0);
-  }
-  input + label::before {
-    content: " ";
-    display: inline;
-    vertical-align: middle;
-    margin-right: 3px;
-    width: 22px;
-    height: 22px;
-    background-color: var(--layer-2);
-    border-radius: 5px;
-    border: none;
-    box-shadow: none;
-  }
-  input:checked + label::after {
-    content: " ";
-    background-repeat: no-repeat;
-    background-size: 12px 12px;
-    background-position: center center;
-    position: absolute;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-left: 0px;
-    left: 0px;
-    top: 0px;
-    text-align: center;
-    background-color: transparent;
-    color: red;
-    font-size: 10px;
-    height: 22px;
-    width: 22px;
-  }
+	input[type='checkbox'] {
+		position: absolute;
+		overflow: hidden;
+		clip: rect(0 0 0 0);
+		height: 1px;
+		width: 1px;
+		margin: -1px;
+		padding: 0;
+		border: 0;
+	}
+	#inputPreview {
+		display: flex;
+		gap: 20px;
+		justify-content: center;
+	}
+	input + label {
+		position: relative;
+		font-size: 14px;
+		cursor: pointer;
+		display: inline-flex;
+		align-items: center;
+		height: 22px;
+		color: rgb(0, 0, 0);
+	}
+	input + label::before {
+		content: ' ';
+		display: inline;
+		vertical-align: middle;
+		margin-right: 3px;
+		width: 22px;
+		height: 22px;
+		background-color: var(--layer-2);
+		border-radius: 5px;
+		border: none;
+		box-shadow: none;
+	}
+	input:checked + label::after {
+		content: ' ';
+		background-repeat: no-repeat;
+		background-size: 12px 12px;
+		background-position: center center;
+		position: absolute;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		margin-left: 0px;
+		left: 0px;
+		top: 0px;
+		text-align: center;
+		background-color: transparent;
+		color: red;
+		font-size: 10px;
+		height: 22px;
+		width: 22px;
+	}
 
-  input + label > svg {
-    position: absolute;
-    display: none;
-    width: 12px;
-    height: 10px;
-    left: 5px;
-    color: var(--text-color);
-    top: 5.9px;
-  }
+	input + label > svg {
+		position: absolute;
+		display: none;
+		width: 12px;
+		height: 10px;
+		left: 5px;
+		color: var(--text-color);
+		top: 5.9px;
+	}
 
-  input:checked + label > svg {
-    display: block;
-  }
+	input:checked + label > svg {
+		display: block;
+	}
 </style>
diff --git a/packages/ui/src/lib/elements/Float.svelte b/packages/ui/src/lib/elements/Float.svelte
index d210ff2..b3dd594 100644
--- a/packages/ui/src/lib/elements/Float.svelte
+++ b/packages/ui/src/lib/elements/Float.svelte
@@ -1,11 +1,19 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte';
-
-	export let value = 0.5;
-	export let step = 0.01;
-	export let min = 0;
-	export let max = 1;
-	export let id = '';
+	let {
+		onchange,
+		value = $bindable(),
+		id,
+		step = 0.01,
+		min = 0,
+		max = 1
+	}: {
+		onchange?: (num: number) => void;
+		value?: number;
+		id?: string;
+		step?: number;
+		min?: number;
+		max?: number;
+	} = $props();
 
 	if (min > max) {
 		[min, max] = [max, min];
@@ -18,31 +26,32 @@
 		return +parseFloat(input + '').toPrecision(2);
 	}
 
-	const dispatch = createEventDispatcher();
-
 	let inputEl: HTMLInputElement;
 
-	$: if ((value || 0).toString().length > 5) {
-		value = strip(value || 0);
-	}
-	$: value !== undefined && handleChange();
+	$effect(() => {
+		if ((value || 0).toString().length > 5) {
+			value = strip(value || 0);
+		}
+	});
+
+	$effect(() => {
+		if (value !== undefined) handleChange();
+	});
+
 	let oldValue: number;
 	function handleChange() {
 		if (value === oldValue) return;
 		oldValue = value;
-		dispatch('change', parseFloat(value + ''));
+		onchange?.(value);
 	}
 
-	$: width = Number.isFinite(value)
-		? Math.max((value?.toString().length ?? 1) * 8, 50) + 'px'
-		: '20px';
+	let width = $derived(
+		Number.isFinite(value) ? Math.max((value?.toString().length ?? 1) * 8, 50) + 'px' : '20px'
+	);
 
-	let isMouseDown = false;
-	/* let downX = 0; */
-	/* let downY = 0; */
+	let isMouseDown = $state(false);
 	let downV = 0;
 	let vx = 0;
-	/* let vy = 0; */
 	let rect: DOMRect;
 
 	function handleMouseDown(ev: MouseEvent) {
@@ -53,8 +62,6 @@
 		isMouseDown = true;
 
 		downV = value;
-		/* downX = ev.clientX; */
-		/* downY = ev.clientY; */
 		rect = inputEl.getBoundingClientRect();
 
 		window.removeEventListener('mousemove', handleMouseMove);
@@ -78,16 +85,6 @@
 			min = value;
 		}
 
-		// setTimeout(() => {
-		//   if (value >= 0) {
-		//     max = getBoundingValue(value);
-		//     min = 0;
-		//   } else {
-		//     min = getBoundingValue(value);
-		//     max = 0;
-		//   }
-		// }, 500);
-
 		document.body.style.cursor = 'unset';
 		window.removeEventListener('mouseup', handleMouseUp);
 		window.removeEventListener('mousemove', handleMouseMove);
@@ -122,9 +119,9 @@
 		{step}
 		{max}
 		{min}
-		on:keydown={handleKeyDown}
-		on:mousedown={handleMouseDown}
-		on:mouseup={handleMouseUp}
+		onkeydown={handleKeyDown}
+		onmousedown={handleMouseDown}
+		onmouseup={handleMouseUp}
 		type="number"
 		style={`width:${width};`}
 	/>
diff --git a/packages/ui/src/lib/elements/Integer.svelte b/packages/ui/src/lib/elements/Integer.svelte
index 11398b9..8a96dbe 100644
--- a/packages/ui/src/lib/elements/Integer.svelte
+++ b/packages/ui/src/lib/elements/Integer.svelte
@@ -1,169 +1,172 @@
-<svelte:options accessors />
-
 <script lang="ts">
-  import { createEventDispatcher } from "svelte";
-  const dispatch = createEventDispatcher();
+	let {
+		min = 0,
+		max = 10,
+		step = 1,
+		value = $bindable(),
+		id,
+		onchange
+	}: {
+		min?: number;
+		max?: number;
+		step?: number;
+		value?: number;
+		id?: string;
+		onchange?: (num: number) => void;
+	} = $props();
 
-  // Styling
-  export let min: number | undefined = undefined;
-  export let max: number | undefined = undefined;
-  export let step = 1;
-  export let value = 0;
-  export let id = "";
+	if (!value) {
+		value = 0;
+	}
 
-  if (!value) {
-    value = 0;
-  }
+	let inputEl: HTMLInputElement;
+	let wrapper: HTMLDivElement;
+	$effect(() => {
+		if (value !== undefined) {
+			update();
+		}
+	});
 
-  let inputEl: HTMLInputElement;
-  let wrapper: HTMLDivElement;
-  $: value !== undefined && update();
+	let prev = -1;
+	function update() {
+		if (prev === value) return;
+		prev = value;
+		onchange?.(value);
+	}
 
-  let prev = -1;
-  function update() {
-    if (prev === value) return;
-    prev = value;
-    dispatch("change", parseFloat(value + ""));
-  }
+	let width = $derived(
+		Number.isFinite(value) ? Math.max((value?.toString().length ?? 1) * 8, 30) + 'px' : '20px'
+	);
 
-  $: width = Number.isFinite(value)
-    ? Math.max((value?.toString().length ?? 1) * 8, 30) + "px"
-    : "20px";
+	function handleChange(change: number) {
+		value = Math.max(min ?? -Infinity, Math.min(+value + change, max ?? Infinity));
+	}
 
-  function handleChange(change: number) {
-    value = Math.max(
-      min ?? -Infinity,
-      Math.min(+value + change, max ?? Infinity),
-    );
-  }
+	let downX = 0;
+	let downV = 0;
+	let rect: DOMRect;
 
-  let downX = 0;
-  let downV = 0;
-  let rect: DOMRect;
+	function handleMouseDown(ev: MouseEvent) {
+		ev.preventDefault();
 
-  function handleMouseDown(ev: MouseEvent) {
-    ev.preventDefault();
+		downV = value;
+		downX = ev.clientX;
+		rect = wrapper.getBoundingClientRect();
 
-    downV = value;
-    downX = ev.clientX;
-    rect = wrapper.getBoundingClientRect();
+		window.removeEventListener('mousemove', handleMouseMove);
+		window.addEventListener('mousemove', handleMouseMove);
+		window.addEventListener('mouseup', handleMouseUp);
+		document.body.style.cursor = 'ew-resize';
+	}
 
-    window.removeEventListener("mousemove", handleMouseMove);
-    window.addEventListener("mousemove", handleMouseMove);
-    window.addEventListener("mouseup", handleMouseUp);
-    document.body.style.cursor = "ew-resize";
-  }
+	function handleMouseUp() {
+		if (downV === value) {
+			inputEl.focus();
+		} else {
+			inputEl.blur();
+		}
 
-  function handleMouseUp() {
-    if (downV === value) {
-      inputEl.focus();
-    } else {
-      inputEl.blur();
-    }
+		document.body.style.cursor = 'unset';
+		window.removeEventListener('mouseup', handleMouseUp);
+		window.removeEventListener('mousemove', handleMouseMove);
+	}
 
-    document.body.style.cursor = "unset";
-    window.removeEventListener("mouseup", handleMouseUp);
-    window.removeEventListener("mousemove", handleMouseMove);
-  }
-
-  function handleMouseMove(ev: MouseEvent) {
-    if (!ev.ctrlKey && typeof min === "number" && typeof max === "number") {
-      const vx = (ev.clientX - rect.left) / rect.width;
-      value = Math.max(Math.min(Math.round(min + (max - min) * vx), max), min);
-    } else {
-      const vx = ev.clientX - downX;
-      value = downV + Math.round(vx / 10);
-    }
-  }
+	function handleMouseMove(ev: MouseEvent) {
+		if (!ev.ctrlKey && typeof min === 'number' && typeof max === 'number') {
+			const vx = (ev.clientX - rect.left) / rect.width;
+			value = Math.max(Math.min(Math.round(min + (max - min) * vx), max), min);
+		} else {
+			const vx = ev.clientX - downX;
+			value = downV + Math.round(vx / 10);
+		}
+	}
 </script>
 
 <div
-  class="component-wrapper"
-  bind:this={wrapper}
-  role="slider"
-  tabindex="0"
-  aria-valuenow={value}
-  on:mousedown={handleMouseDown}
-  on:mouseup={handleMouseUp}
+	class="component-wrapper"
+	bind:this={wrapper}
+	role="slider"
+	tabindex="0"
+	aria-valuenow={value}
+	onmousedown={handleMouseDown}
+	onmouseup={handleMouseUp}
 >
-  {#if typeof min !== "undefined" && typeof max !== "undefined"}
-    <span
-      class="overlay"
-      style={`width: ${Math.min((value - min) / (max - min), 1) * 100}%`}
-    />
-  {/if}
-  <button on:click={() => handleChange(-step)}>-</button>
-  <input
-    bind:value
-    bind:this={inputEl}
-    {id}
-    {step}
-    {max}
-    {min}
-    type="number"
-    style={`width:${width};`}
-  />
+	{#if typeof min !== 'undefined' && typeof max !== 'undefined'}
+		<span class="overlay" style={`width: ${Math.min((value - min) / (max - min), 1) * 100}%`}
+		></span>
+	{/if}
+	<button onclick={() => handleChange(-step)}>-</button>
+	<input
+		bind:value
+		bind:this={inputEl}
+		{id}
+		{step}
+		{max}
+		{min}
+		type="number"
+		style={`width:${width};`}
+	/>
 
-  <button on:click={() => handleChange(+step)}>+</button>
+	<button onclick={() => handleChange(+step)}>+</button>
 </div>
 
 <style>
-  .component-wrapper {
-    position: relative;
-    display: flex;
-    background-color: var(--layer-2, #4b4b4b);
-    border-radius: 2px;
-    user-select: none;
-    transition: box-shadow 0.3s ease;
-    outline: solid 1px var(--outline);
-    overflow: hidden;
-    border-radius: var(--border-radius, 2px);
-  }
+	.component-wrapper {
+		position: relative;
+		display: flex;
+		background-color: var(--layer-2, #4b4b4b);
+		border-radius: 2px;
+		user-select: none;
+		transition: box-shadow 0.3s ease;
+		outline: solid 1px var(--outline);
+		overflow: hidden;
+		border-radius: var(--border-radius, 2px);
+	}
 
-  input[type="number"] {
-    -webkit-appearance: textfield;
-    -moz-appearance: textfield;
-    appearance: textfield;
-    cursor: pointer;
-    font-size: 1em;
-    font-family: var(--font-family);
-    padding-top: 8px;
-    flex: 1;
-    width: 72%;
-  }
+	input[type='number'] {
+		-webkit-appearance: textfield;
+		-moz-appearance: textfield;
+		appearance: textfield;
+		cursor: pointer;
+		font-size: 1em;
+		font-family: var(--font-family);
+		padding-top: 8px;
+		flex: 1;
+		width: 72%;
+	}
 
-  input[type="number"]::-webkit-inner-spin-button,
-  input[type="number"]::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-  }
+	input[type='number']::-webkit-inner-spin-button,
+	input[type='number']::-webkit-outer-spin-button {
+		-webkit-appearance: none;
+	}
 
-  .overlay {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    height: 100%;
-    background-color: var(--layer-3);
-    opacity: 0.3;
-    pointer-events: none;
-  }
+	.overlay {
+		position: absolute;
+		top: 0px;
+		left: 0px;
+		height: 100%;
+		background-color: var(--layer-3);
+		opacity: 0.3;
+		pointer-events: none;
+	}
 
-  button {
-    background-color: transparent;
-    border: none;
-    cursor: pointer;
-    line-height: 0px;
-    margin: 0;
-    color: var(--text-color);
-    margin-inline: 6px;
-  }
+	button {
+		background-color: transparent;
+		border: none;
+		cursor: pointer;
+		line-height: 0px;
+		margin: 0;
+		color: var(--text-color);
+		margin-inline: 6px;
+	}
 
-  div input[type="number"] {
-    color: var(--text-color);
-    background-color: transparent;
-    padding: var(--padding, 6px);
-    padding-inline: 0px;
-    text-align: center;
-    border: none;
-    border-style: none;
-  }
+	div input[type='number'] {
+		color: var(--text-color);
+		background-color: transparent;
+		padding: var(--padding, 6px);
+		padding-inline: 0px;
+		text-align: center;
+		border: none;
+		border-style: none;
+	}
 </style>
diff --git a/packages/ui/src/lib/elements/Select.svelte b/packages/ui/src/lib/elements/Select.svelte
index ece13f2..6c09037 100644
--- a/packages/ui/src/lib/elements/Select.svelte
+++ b/packages/ui/src/lib/elements/Select.svelte
@@ -1,23 +1,25 @@
 <script lang="ts">
-  export let options: string[] = [];
-  export let value: number = 0;
-  export let id = "";
+	let {
+		id,
+		value = $bindable(),
+		options
+	}: { id: string; value: number; options: string[] } = $props();
 </script>
 
 <select {id} bind:value>
-  {#each options as label, i}
-    <option value={i}>{label}</option>
-  {/each}
+	{#each options as label, i}
+		<option value={i}>{label}</option>
+	{/each}
 </select>
 
 <style>
-  select {
-    background: var(--layer-2);
-    color: var(--text-color);
-    font-family: var(--font-family);
-    outline: solid 1px var(--outline);
-    padding: 0.8em 1em;
-    border-radius: 5px;
-    border: none;
-  }
+	select {
+		background: var(--layer-2);
+		color: var(--text-color);
+		font-family: var(--font-family);
+		outline: solid 1px var(--outline);
+		padding: 0.8em 1em;
+		border-radius: 5px;
+		border: none;
+	}
 </style>
diff --git a/packages/ui/src/lib/elements/Vec3.svelte b/packages/ui/src/lib/elements/Vec3.svelte
index b2025fc..a0bba47 100644
--- a/packages/ui/src/lib/elements/Vec3.svelte
+++ b/packages/ui/src/lib/elements/Vec3.svelte
@@ -1,31 +1,29 @@
 <script lang="ts">
-  import Float from "./Float.svelte";
+	import Float from './Float.svelte';
 
-  export let value = [0, 0, 0];
-  export let id = "";
+	let { value = $bindable(), id }: { value: number[]; id: string } = $props();
 </script>
 
 <div>
-  <Float id={`${id}-x`} bind:value={value[0]} />
-  <Float id={`${id}-y`} bind:value={value[1]} />
-  <Float id={`${id}-z`} bind:value={value[2]} />
+	<Float id={`${id}-x`} bind:value={value[0]} />
+	<Float id={`${id}-y`} bind:value={value[1]} />
+	<Float id={`${id}-z`} bind:value={value[2]} />
 </div>
 
 <style>
-  div > :global(.component-wrapper:nth-child(1)) {
-    border-radius: 4px 4px 0px 0px !important;
-    border-bottom: none !important;
-  }
-  div > :global(.component-wrapper:nth-child(2)) {
-    border-radius: 0px !important;
-    outline: none;
-    border: solid thin var(--outline);
-    border-top: solid thin color-mix(in srgb, var(--outline) 50%, transparent);
-    border-bottom: solid thin
-      color-mix(in srgb, var(--outline) 50%, transparent);
-  }
-  div > :global(.component-wrapper:nth-child(3)) {
-    border-top: none !important;
-    border-radius: 0px 0px 4px 4px !important;
-  }
+	div > :global(.component-wrapper:nth-child(1)) {
+		border-radius: 4px 4px 0px 0px !important;
+		border-bottom: none !important;
+	}
+	div > :global(.component-wrapper:nth-child(2)) {
+		border-radius: 0px !important;
+		outline: none;
+		border: solid thin var(--outline);
+		border-top: solid thin color-mix(in srgb, var(--outline) 50%, transparent);
+		border-bottom: solid thin color-mix(in srgb, var(--outline) 50%, transparent);
+	}
+	div > :global(.component-wrapper:nth-child(3)) {
+		border-top: none !important;
+		border-radius: 0px 0px 4px 4px !important;
+	}
 </style>
diff --git a/packages/ui/src/routes/+page.svelte b/packages/ui/src/routes/+page.svelte
index fed7354..c0a6057 100644
--- a/packages/ui/src/routes/+page.svelte
+++ b/packages/ui/src/routes/+page.svelte
@@ -1,7 +1,34 @@
 <script lang="ts">
-  import "$lib/app.css";
-  import Slider from "$lib/elements/Float.svelte";
+	import '$lib/app.css';
+	import Float from '$lib/elements/Float.svelte';
+	import Integer from '$lib/elements/Integer.svelte';
+	import Vec3 from '$lib/elements/Vec3.svelte';
+
+	let intValue = $state(0);
+	let floatValue = $state(0.2);
+	let vecValue = $state([0.2, 0.3, 0.4]);
 </script>
 
-<Slider id="asd" />
+<main>
+	<section>
+		<h3>Integer {intValue}</h3>
+		<Integer bind:value={intValue} />
+	</section>
 
+	<section>
+		<h3>Float {floatValue}</h3>
+		<Float bind:value={floatValue} />
+	</section>
+
+	<section>
+		<h3>Vec3 {JSON.stringify(vecValue)}</h3>
+		<Vec3 bind:value={vecValue} />
+	</section>
+</main>
+
+<style>
+	main {
+		max-width: 800px;
+		margin: 0 auto;
+	}
+</style>
diff --git a/packages/utils/src/flatTree.ts b/packages/utils/src/flatTree.ts
index a42f101..e1cfca7 100644
--- a/packages/utils/src/flatTree.ts
+++ b/packages/utils/src/flatTree.ts
@@ -102,3 +102,47 @@ function decode_recursive(dense: number[] | Int32Array, index = 0) {
 export function decodeNestedArray(dense: number[] | Int32Array) {
   return decode_recursive(dense, 0)[0];
 }
+
+
+export function splitNestedArray(input: Int32Array) {
+  let index = 0;
+  const length = input.length;
+  let res: Int32Array[] = [];
+
+  let nextBracketIndex = 0;
+  let argStartIndex = 0;
+  let depth = -1;
+
+  while (index < length) {
+    const value = input[index];
+
+    if (index === nextBracketIndex) {
+      nextBracketIndex = index + input[index + 1] + 1;
+      if (value === 0) {
+        depth++;
+      } else {
+        depth--;
+      }
+
+      if (depth === 1 && value === 0) {
+        // if opening bracket
+        argStartIndex = index + 2;
+      }
+
+      if (depth === 0 && value === 1) {
+        // if closing bracket
+        res.push(input.slice(argStartIndex, index));
+        argStartIndex = index + 2;
+      }
+
+      index = nextBracketIndex;
+      continue;
+    }
+
+    // we should not be here
+
+    index++;
+  }
+
+  return res;
+}
diff --git a/packages/utils/src/geometry/path_data.rs b/packages/utils/src/geometry/path_data.rs
index 2f1b99f..7050aef 100644
--- a/packages/utils/src/geometry/path_data.rs
+++ b/packages/utils/src/geometry/path_data.rs
@@ -11,12 +11,52 @@ pub struct PathDataMut<'a> {
     pub points: &'a mut [f32],
 }
 
+impl PathDataMut<'_> {
+    pub fn get_length(&self) -> f32 {
+        let mut l = 0.0;
+        for i in 0..(self.length - 1) {
+            let a = vec3(
+                self.points[i * 4],
+                self.points[i * 4 + 1],
+                self.points[i * 4 + 2],
+            );
+            let b = vec3(
+                self.points[(i + 1) * 4],
+                self.points[(i + 1) * 4 + 1],
+                self.points[(i + 1) * 4 + 2],
+            );
+            l += (b - a).length();
+        }
+        l
+    }
+}
+
 pub struct PathData<'a> {
     pub depth: i32,
     pub length: usize,
     pub points: &'a [f32],
 }
 
+impl PathData<'_> {
+    pub fn get_length(&self) -> f32 {
+        let mut l = 0.0;
+        for i in 0..(self.length - 1) {
+            let a = vec3(
+                self.points[i * 4],
+                self.points[i * 4 + 1],
+                self.points[i * 4 + 2],
+            );
+            let b = vec3(
+                self.points[(i + 1) * 4],
+                self.points[(i + 1) * 4 + 1],
+                self.points[(i + 1) * 4 + 2],
+            );
+            l += (b - a).length();
+        }
+        l
+    }
+}
+
 pub fn create_multiple_paths(amount: usize, point_amount: usize, depth: i32) -> Vec<i32> {
     let output_size = amount * (point_amount * 4 + PATH_HEADER_SIZE + 4) + 4;
 
diff --git a/packages/utils/src/tree.rs b/packages/utils/src/tree.rs
index bc7c8db..6527ddd 100644
--- a/packages/utils/src/tree.rs
+++ b/packages/utils/src/tree.rs
@@ -162,7 +162,12 @@ pub fn evaluate_vec3(input_args: &[i32]) -> Vec<f32> {
 }
 
 pub fn evaluate_float(arg: &[i32]) -> f32 {
-    decode_float(evaluate_int(arg))
+    let res = decode_float(evaluate_int(arg));
+    if res.is_nan() {
+        0.0
+    } else {
+        res
+    }
 }
 
 pub fn evaluate_int(input_args: &[i32]) -> i32 {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 80843e3..be1dacf 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -34,6 +34,9 @@ importers:
       comlink:
         specifier: ^4.4.1
         version: 4.4.1
+      file-saver:
+        specifier: ^2.0.5
+        version: 2.0.5
       jsondiffpatch:
         specifier: ^0.6.0
         version: 0.6.0
@@ -56,6 +59,9 @@ importers:
       '@tsconfig/svelte':
         specifier: ^5.0.4
         version: 5.0.4
+      '@types/file-saver':
+        specifier: ^2.0.7
+        version: 2.0.7
       '@unocss/preset-icons':
         specifier: ^0.59.4
         version: 0.59.4
@@ -747,6 +753,9 @@ packages:
   '@types/estree@1.0.5':
     resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
 
+  '@types/file-saver@2.0.7':
+    resolution: {integrity: sha512-dNKVfHd/jk0SkR/exKGj2ggkB45MAkzvWCaqLUUgkyjITkGNzH8H+yUwr+BLJUBjZOe9w8X3wgmXhZDRg1ED6A==}
+
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
@@ -1314,6 +1323,9 @@ packages:
     resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
     engines: {node: ^10.12.0 || >=12.0.0}
 
+  file-saver@2.0.5:
+    resolution: {integrity: sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==}
+
   fill-range@7.0.1:
     resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==}
     engines: {node: '>=8'}
@@ -3006,6 +3018,8 @@ snapshots:
 
   '@types/estree@1.0.5': {}
 
+  '@types/file-saver@2.0.7': {}
+
   '@types/json-schema@7.0.15': {}
 
   '@types/node@20.12.7':
@@ -3735,6 +3749,8 @@ snapshots:
     dependencies:
       flat-cache: 3.2.0
 
+  file-saver@2.0.5: {}
+
   fill-range@7.0.1:
     dependencies:
       to-regex-range: 5.0.1