diff --git a/adapter-warthog-wasm/src/core/templates.ts b/adapter-warthog-wasm/src/core/templates.ts
index 939250ad..60ddf189 100644
--- a/adapter-warthog-wasm/src/core/templates.ts
+++ b/adapter-warthog-wasm/src/core/templates.ts
@@ -10,9 +10,9 @@ export const gridTemplate: Partial<Trace> = {
           $: "rect",
           width: 1,
           height: 1,
-          x: "{{ctx.x}}",
-          y: "{{ctx.y}}",
-          fill: "{{ctx.color[ctx.type]}}",
+          x: "{{$.event.x}}",
+          y: "{{$.event.y}}",
+          fill: "{{$.color[$.event.type]}}",
         },
       ],
     },
@@ -26,7 +26,7 @@ export const gridTemplate: Partial<Trace> = {
       },
     },
     path: {
-      pivot: { x: "{{ctx.x + 0.5}}", y: "{{ctx.y + 0.5}}" },
+      pivot: { x: "{{$.event.x + 0.5}}", y: "{{$.event.y + 0.5}}" },
       scale: 0.3,
     },
   },
@@ -39,10 +39,10 @@ export const xyTemplate: Partial<Trace> = {
       node: [
         {
           $: "circle",
-          fill: "{{ctx.color[ctx.type]}}",
+          fill: "{{$.color[$.event.type]}}",
           radius: 120,
-          x: "{{ctx.x}}",
-          y: "{{ctx.y}}",
+          x: "{{$.event.x}}",
+          y: "{{$.event.y}}",
         },
       ],
       line: [
@@ -50,15 +50,15 @@ export const xyTemplate: Partial<Trace> = {
           $: "path",
           points: [
             {
-              x: "{{ctx.parent ? ctx.parent.x: ctx.x}}",
-              y: "{{ctx.parent ? ctx.parent.y: ctx.y}}",
+              x: "{{$.parent ? $.parent.x: $.event.x}}",
+              y: "{{$.parent ? $.parent.y: $.event.y}}",
             },
             {
-              x: "{{ctx.x}}",
-              y: "{{ctx.y}}",
+              x: "{{$.event.x}}",
+              y: "{{$.event.y}}",
             },
           ],
-          fill: "{{ctx.color[ctx.type]}}",
+          fill: "{{$.color[$.event.type]}}",
           lineWidth: 90,
         },
       ],
@@ -78,7 +78,7 @@ export const xyTemplate: Partial<Trace> = {
       },
     },
     path: {
-      pivot: { x: "{{ctx.x}}", y: "{{ctx.y}}" },
+      pivot: { x: "{{$.event.x}}", y: "{{$.event.y}}" },
       scale: 120,
     },
   },
diff --git a/adapter-warthog-websocket/src/core/templates.ts b/adapter-warthog-websocket/src/core/templates.ts
index 939250ad..60ddf189 100644
--- a/adapter-warthog-websocket/src/core/templates.ts
+++ b/adapter-warthog-websocket/src/core/templates.ts
@@ -10,9 +10,9 @@ export const gridTemplate: Partial<Trace> = {
           $: "rect",
           width: 1,
           height: 1,
-          x: "{{ctx.x}}",
-          y: "{{ctx.y}}",
-          fill: "{{ctx.color[ctx.type]}}",
+          x: "{{$.event.x}}",
+          y: "{{$.event.y}}",
+          fill: "{{$.color[$.event.type]}}",
         },
       ],
     },
@@ -26,7 +26,7 @@ export const gridTemplate: Partial<Trace> = {
       },
     },
     path: {
-      pivot: { x: "{{ctx.x + 0.5}}", y: "{{ctx.y + 0.5}}" },
+      pivot: { x: "{{$.event.x + 0.5}}", y: "{{$.event.y + 0.5}}" },
       scale: 0.3,
     },
   },
@@ -39,10 +39,10 @@ export const xyTemplate: Partial<Trace> = {
       node: [
         {
           $: "circle",
-          fill: "{{ctx.color[ctx.type]}}",
+          fill: "{{$.color[$.event.type]}}",
           radius: 120,
-          x: "{{ctx.x}}",
-          y: "{{ctx.y}}",
+          x: "{{$.event.x}}",
+          y: "{{$.event.y}}",
         },
       ],
       line: [
@@ -50,15 +50,15 @@ export const xyTemplate: Partial<Trace> = {
           $: "path",
           points: [
             {
-              x: "{{ctx.parent ? ctx.parent.x: ctx.x}}",
-              y: "{{ctx.parent ? ctx.parent.y: ctx.y}}",
+              x: "{{$.parent ? $.parent.x: $.event.x}}",
+              y: "{{$.parent ? $.parent.y: $.event.y}}",
             },
             {
-              x: "{{ctx.x}}",
-              y: "{{ctx.y}}",
+              x: "{{$.event.x}}",
+              y: "{{$.event.y}}",
             },
           ],
-          fill: "{{ctx.color[ctx.type]}}",
+          fill: "{{$.color[$.event.type]}}",
           lineWidth: 90,
         },
       ],
@@ -78,7 +78,7 @@ export const xyTemplate: Partial<Trace> = {
       },
     },
     path: {
-      pivot: { x: "{{ctx.x}}", y: "{{ctx.y}}" },
+      pivot: { x: "{{$.event.x}}", y: "{{$.event.y}}" },
       scale: 120,
     },
   },
diff --git a/client/main.js b/client/main.js
index 0e28247b..1ace9a83 100644
--- a/client/main.js
+++ b/client/main.js
@@ -56,6 +56,7 @@ server.listen(0, () => {
       show: false,
       titleBarStyle: "hidden",
       titleBarOverlay: {
+        height: 32,
         color: "#00000000",
         symbolColor: "#00000000",
       },
diff --git a/client/src/components/Editor.tsx b/client/src/components/Editor.tsx
index d4748a7c..f60f42f8 100644
--- a/client/src/components/Editor.tsx
+++ b/client/src/components/Editor.tsx
@@ -1,3 +1,5 @@
+import { ReactNode } from "react";
+
 export type EditorProps<T> = {
   value?: T;
   onChange?: (key: T) => void;
@@ -5,4 +7,5 @@ export type EditorProps<T> = {
 export type EditorSetterProps<T> = {
   value?: T;
   onChange?: (key: (value: T) => T) => void;
+  children?: ReactNode;
 };
diff --git a/client/src/components/app-bar/Input.tsx b/client/src/components/app-bar/Input.tsx
index ecac9e28..40c1be96 100644
--- a/client/src/components/app-bar/Input.tsx
+++ b/client/src/components/app-bar/Input.tsx
@@ -9,12 +9,14 @@ import { EditorProps } from "../Editor";
 import { FeaturePicker } from "./FeaturePicker";
 import { FeaturePickerButton } from "./FeaturePickerButton";
 import { custom as customMap, uploadMap, uploadTrace } from "./upload";
+import { LARGE_FILE_B, formatByte, useBusyState } from "slices/busy";
 
 export const mapDefaults = { start: undefined, end: undefined };
 
 export function MapPicker({ onChange, value }: EditorProps<Map>) {
   const notify = useSnackbar();
-  const usingLoadingState = useLoadingState("specimen");
+  const usingLoadingState = useLoadingState("map");
+  const usingBusyState = useBusyState("map");
   const [connections] = useConnections();
   const [{ maps, formats }] = useFeatures();
   return (
@@ -37,8 +39,17 @@ export function MapPicker({ onChange, value }: EditorProps<Map>) {
               const f = await uploadMap(formats);
               if (f) {
                 usingLoadingState(async () => {
-                  notify("Reading map...");
-                  onChange?.(await f());
+                  notify("Opening map...");
+                  const output =
+                    f.file.size > LARGE_FILE_B
+                      ? await usingBusyState(
+                          f.read,
+                          `Opening map (${formatByte(f.file.size)})`
+                        )
+                      : await f.read();
+                  if (output) {
+                    onChange?.(output);
+                  }
                 });
               }
             } catch (e) {
@@ -57,6 +68,7 @@ export function MapPicker({ onChange, value }: EditorProps<Map>) {
 export function TracePicker({ onChange, value }: EditorProps<UploadedTrace>) {
   const notify = useSnackbar();
   const usingLoadingState = useLoadingState("specimen");
+  const usingBusyState = useBusyState("specimen");
   return (
     <FeaturePickerButton
       icon={<FileOpenOutlined />}
@@ -65,10 +77,16 @@ export function TracePicker({ onChange, value }: EditorProps<UploadedTrace>) {
           const f = await uploadTrace();
           if (f)
             usingLoadingState(async () => {
-              notify("Reading trace...");
-              const g = await f();
-              if (g) {
-                onChange?.(g);
+              notify("Opening trace...");
+              const output =
+                f.file.size > LARGE_FILE_B
+                  ? await usingBusyState(
+                      f.read,
+                      `Opening trace (${formatByte(f.file.size)})`
+                    )
+                  : await f.read();
+              if (output) {
+                onChange?.(output);
               }
             });
         } catch (e) {
@@ -80,87 +98,3 @@ export function TracePicker({ onChange, value }: EditorProps<UploadedTrace>) {
     </FeaturePickerButton>
   );
 }
-
-// export function Input() {
-//   const notify = useSnackbar();
-//   const [connections] = useConnections();
-//   const [{ algorithms, maps, formats }] = useFeatures();
-//   const [{ algorithm, map, parameters }, setUIState] = useUIState();
-
-//   return (
-//     <>
-//       <FeaturePicker
-//         icon={<MapIcon />}
-//         label="Map"
-//         value={map?.id}
-//         items={[
-//           customTrace(parameters),
-//           customMap(map),
-//           ...maps.map((c) => ({
-//             ...c,
-//             description: find(connections, { url: c.source })?.name,
-//           })),
-//         ]}
-//         onChange={async (v) => {
-//           switch (v) {
-//             case customMap().id:
-//               try {
-//                 const f = await uploadMap(formats);
-//                 if (f) {
-//                   setUIState({
-//                     ...mapDefaults,
-//                     map: f,
-//                     algorithm: algorithm ?? "identity",
-//                     parameters: {},
-//                   });
-//                   notify("Solution was cleared because the map changed.");
-//                 }
-//               } catch (e) {
-//                 notify(`${e}`);
-//               }
-//               break;
-//             case customTrace().id:
-//               try {
-//                 const f2 = await uploadTrace();
-//                 if (f2) {
-//                   setUIState({
-//                     parameters: f2,
-//                     algorithm: "identity",
-//                     start: 0,
-//                     end: 0,
-//                     map: {
-//                       format: f2.format,
-//                       content: map?.format === f2.format ? map?.content : " ",
-//                       id: "internal/upload",
-//                     },
-//                   });
-//                 }
-//               } catch (e) {
-//                 notify(`${e}`);
-//               }
-//               break;
-//             default:
-//               setUIState({
-//                 ...mapDefaults,
-//                 map: find(maps, { id: v }),
-//                 parameters: {},
-//               });
-//               notify("Solution was cleared because the map changed.");
-//               break;
-//           }
-//         }}
-//       />
-//       <Space />
-// <FeaturePicker
-//   icon={<CodeIcon />}
-//   label="Algorithm"
-//   value={algorithm}
-//   items={algorithms.map((c) => ({
-//     ...c,
-//     description: find(connections, { url: c.source })?.name,
-//   }))}
-//   onChange={async (v) => setUIState({ algorithm: v, parameters: {} })}
-// />
-//     </>
-//   );
-// }
diff --git a/client/src/components/app-bar/Playback.tsx b/client/src/components/app-bar/Playback.tsx
index 05f36719..2b996bf6 100644
--- a/client/src/components/app-bar/Playback.tsx
+++ b/client/src/components/app-bar/Playback.tsx
@@ -1,13 +1,3 @@
-import { range, trimEnd } from "lodash";
-import { useRaf } from "react-use";
-import { ReactNode, useCallback, useEffect } from "react";
-import { IconButtonWithTooltip as Button } from "components/generic/IconButtonWithTooltip";
-import { Label } from "components/generic/Label";
-import { useSnackbar } from "components/generic/Snackbar";
-import { useBreakpoints } from "hooks/useBreakpoints";
-import { usePlaybackState } from "hooks/usePlaybackState";
-import { useSettings } from "slices/settings";
-import { UploadedTrace } from "slices/UIState";
 import {
   SkipNextOutlined as ForwardIcon,
   PauseOutlined as PauseIcon,
@@ -15,7 +5,18 @@ import {
   SkipPreviousOutlined as PreviousIcon,
   StopOutlined as StopIcon,
 } from "@mui/icons-material";
+import { EditorSetterProps } from "components/Editor";
+import { IconButtonWithTooltip as Button } from "components/generic/IconButtonWithTooltip";
+import { Label } from "components/generic/Label";
+import { useSnackbar } from "components/generic/Snackbar";
+import { useBreakpoints } from "hooks/useBreakpoints";
+import { usePlaybackState } from "hooks/usePlaybackState";
+import { range, trimEnd } from "lodash";
+import { ReactNode, useCallback, useEffect } from "react";
+import { useRaf } from "react-use";
+import { UploadedTrace } from "slices/UIState";
 import { Layer } from "slices/layers";
+import { useSettings } from "slices/settings";
 
 function cancellable<T = void>(f: () => Promise<T>, g: (result: T) => void) {
   let cancelled = false;
@@ -27,28 +28,17 @@ function cancellable<T = void>(f: () => Promise<T>, g: (result: T) => void) {
     cancelled = true;
   };
 }
+export type PlaybackLayerData = {
+  step?: number;
+  playback?: "playing" | "paused";
+  playbackTo?: number;
+};
 
-export function Playback({
-  layer,
-}: {
-  layer?: Layer<{ trace?: UploadedTrace }>;
-}) {
-  const {
-    step,
-    tick,
-    end,
-    playing,
-    canPause,
-    canPlay,
-    canStepBackward,
-    canStepForward,
-    canStop,
-    pause,
-    play,
-    stepBackward,
-    stepForward,
-    stop,
-  } = usePlaybackState(layer?.key);
+export function PlaybackService({
+  children,
+  value,
+}: EditorSetterProps<Layer<PlaybackLayerData>>) {
+  const { step, tick, end, playing, pause } = usePlaybackState(value?.key);
   useRaf();
 
   const notify = useSnackbar();
@@ -98,6 +88,28 @@ export function Playback({
     shouldBreak,
     playbackRate,
   ]);
+  return <>{children}</>;
+}
+
+export function Playback({
+  layer,
+}: {
+  layer?: Layer<{ trace?: UploadedTrace }>;
+}) {
+  const {
+    playing,
+    canPause,
+    canPlay,
+    canStepBackward,
+    canStepForward,
+    canStop,
+    pause,
+    play,
+    stepBackward,
+    stepForward,
+    stop,
+  } = usePlaybackState(layer?.key);
+  useRaf();
   return (
     <>
       <Button
diff --git a/client/src/components/app-bar/upload.tsx b/client/src/components/app-bar/upload.tsx
index 58405bb4..62a2111b 100644
--- a/client/src/components/app-bar/upload.tsx
+++ b/client/src/components/app-bar/upload.tsx
@@ -2,7 +2,7 @@ import { fileDialog as file } from "file-select-dialog";
 import { find, startCase } from "lodash";
 import { Feature, FeatureDescriptor } from "protocol/FeatureQuery";
 import { UploadedTrace } from "slices/UIState";
-import { parse } from "yaml";
+import { parseYamlAsync } from "workers/async";
 
 function ext(s: string) {
   return s.split(".").pop();
@@ -32,62 +32,64 @@ export const customTrace = (trace?: any) => ({
 
 const FORMATS = ["json", "yaml"];
 
+export type FileHandle<T> = {
+  file: File;
+  read: () => Promise<T>;
+};
+
 export async function uploadTrace(): Promise<
-  (() => Promise<UploadedTrace | undefined>) | undefined
+  FileHandle<UploadedTrace | undefined> | undefined
 > {
   const f = await file({
     accept: FORMATS.map((c) => `.trace.${c}`),
     strict: true,
   });
   if (f) {
-    return async () => {
-      if (FORMATS.includes(ext(f.name)!)) {
-        const content = await f.text();
-        const parsed = parse(content);
-        return {
-          ...customTrace(),
-          format: parsed?.format,
-          content: parsed,
-          name: startCase(name(f.name)),
-          type: customTraceId,
-        };
-      } else {
-        throw new Error(`The format (${ext(f.name)}) is unsupported.`);
-      }
+    return {
+      file: f,
+      read: async () => {
+        if (FORMATS.includes(ext(f.name)!)) {
+          const content = await f.text();
+          const parsed = await parseYamlAsync(content);
+          return {
+            ...customTrace(),
+            format: parsed?.format,
+            content: parsed,
+            name: startCase(name(f.name)),
+            type: customTraceId,
+          };
+        } else {
+          throw new Error(`The format (${ext(f.name)}) is unsupported.`);
+        }
+      },
     };
   }
 }
 
-// async function readAll(f: File) {
-//   const a = f.stream().getReader();
-//   let out = "";
-//   const decoder = new TextDecoder();
-//   while (true) {
-//     const { done, value } = await a.read();
-//     out += decoder.decode(value);
-//     console.log(value);
-//     if (done) break;
-//   }
-//   return out;
-// }
-
-export async function uploadMap(accept: FeatureDescriptor[]) {
+export async function uploadMap(
+  accept: FeatureDescriptor[]
+): Promise<
+  FileHandle<(FeatureDescriptor & { content?: string }) | undefined> | undefined
+> {
   const f = await file({
     accept: accept.map(({ id }) => `.${id}`),
     strict: true,
   });
   if (f) {
-    return async () => {
-      if (find(accept, { id: ext(f.name) })) {
-        return {
-          ...custom(),
-          format: ext(f.name),
-          content: await f.text(),
-          name: startCase(name(f.name)),
-        } as Feature & { format?: string };
-      } else {
-        throw new Error(`The format (${ext(f.name)}) is unsupported.`);
-      }
+    return {
+      file: f,
+      read: async () => {
+        if (find(accept, { id: ext(f.name) })) {
+          return {
+            ...custom(),
+            format: ext(f.name),
+            content: await f.text(),
+            name: startCase(name(f.name)),
+          } as Feature & { format?: string };
+        } else {
+          throw new Error(`The format (${ext(f.name)}) is unsupported.`);
+        }
+      },
     };
   }
 }
diff --git a/client/src/components/generic/Property.tsx b/client/src/components/generic/Property.tsx
index ecf27094..d7b3eb2d 100644
--- a/client/src/components/generic/Property.tsx
+++ b/client/src/components/generic/Property.tsx
@@ -35,11 +35,16 @@ function stringify(obj: any) {
 export function Property({ label, value, type }: Props) {
   return (
     <Flex width="auto" mr={3} mt={0.5} key={`${label}::${stringify(value)}`}>
-      <Type component="div" sx={{ opacity: 0.54 }} {...type}>
+      <Type
+        component="div"
+        variant="body2"
+        {...type}
+        sx={{ opacity: 0.54, ...type?.sx }}
+      >
         {label}
       </Type>
       <Space />
-      <Type component="div" {...type}>
+      <Type component="div" variant="body2" {...type}>
         {stringify(value) ?? "none"}
       </Type>
     </Flex>
diff --git a/client/src/components/inspector/EventInspector.tsx b/client/src/components/inspector/EventInspector.tsx
index 27d7170b..0ffc2766 100644
--- a/client/src/components/inspector/EventInspector.tsx
+++ b/client/src/components/inspector/EventInspector.tsx
@@ -1,4 +1,5 @@
 import {
+  Box,
   Divider,
   ListItem,
   ListItemButton,
@@ -46,25 +47,32 @@ export function EventInspector({
   //   : false;
 
   return (
-    <ListItemButton
-      selected={selected}
-      {...props}
-      sx={{
-        borderLeft: `${spacing(0.5)} solid ${getColorHex(event?.type)}`,
-        ...props.sx,
-      }}
+    <Tooltip
+      title={
+        <Box p={1}>
+          <PropertyList event={event} flexDirection="column" />
+        </Box>
+      }
+      followCursor
     >
-      <ListItemIcon>
-        <Type variant="body2">{index}</Type>
-      </ListItemIcon>
-      <Tooltip title={<PropertyList event={event} flexDirection="column" />}>
+      <ListItemButton
+        selected={selected}
+        {...props}
+        sx={{
+          borderLeft: `${spacing(0.5)} solid ${getColorHex(event?.type)}`,
+          ...props.sx,
+        }}
+      >
+        <ListItemIcon>
+          <Type variant="body2">{index}</Type>
+        </ListItemIcon>
         <ListItemText
           sx={{ overflow: "hidden" }}
           primary={<EventLabel event={event} hidden={false} />}
           secondary={<PropertyList event={pick(event, "f", "g", "pId")} />}
         />
-      </Tooltip>
-    </ListItemButton>
+      </ListItemButton>
+    </Tooltip>
   );
 }
 
diff --git a/client/src/components/inspector/FullscreenProgress.tsx b/client/src/components/inspector/FullscreenProgress.tsx
new file mode 100644
index 00000000..67bf990a
--- /dev/null
+++ b/client/src/components/inspector/FullscreenProgress.tsx
@@ -0,0 +1,33 @@
+import {
+  Backdrop,
+  CircularProgress,
+  Stack,
+  Typography as Type,
+} from "@mui/material";
+import { values } from "lodash";
+import { useBusy } from "slices/busy";
+import { useAcrylic } from "theme";
+
+export function FullscreenProgress() {
+  const [busy] = useBusy();
+  const acrylic = useAcrylic() as any;
+
+  const messages = values(busy);
+  return (
+    <Backdrop
+      sx={{ ...acrylic, zIndex: (t) => t.zIndex.tooltip + 1 }}
+      open={!!messages.length}
+      unmountOnExit
+      mountOnEnter
+    >
+      <Stack alignItems="center" spacing={4}>
+        <CircularProgress />
+        {messages.map((v, message) => (
+          <Type key={message} variant="body2" color="textSecondary">
+            {v}
+          </Type>
+        ))}
+      </Stack>
+    </Backdrop>
+  );
+}
diff --git a/client/src/components/inspector/Placeholder.tsx b/client/src/components/inspector/Placeholder.tsx
index c8e4e69e..db4878b7 100644
--- a/client/src/components/inspector/Placeholder.tsx
+++ b/client/src/components/inspector/Placeholder.tsx
@@ -1,4 +1,5 @@
 import { WidgetsOutlined } from "@mui/icons-material";
+import { Typography as Type } from "@mui/material";
 import { Flex, FlexProps } from "components/generic/Flex";
 import { cloneElement, ReactElement, ReactNode } from "react";
 
@@ -13,12 +14,13 @@ export function Placeholder({
       alignItems="center"
       color="text.secondary"
       bgcolor="background.paper"
+      textAlign="center"
       vertical
       pt={6}
       {...rest}
     >
       {cloneElement(icon, { sx: { mb: 2 }, fontSize: "large" })}
-      {label}
+      <Type>{label}</Type>
     </Flex>
   );
 }
diff --git a/client/src/components/inspector/PropertyList.tsx b/client/src/components/inspector/PropertyList.tsx
index 7567b80c..71b96311 100644
--- a/client/src/components/inspector/PropertyList.tsx
+++ b/client/src/components/inspector/PropertyList.tsx
@@ -1,24 +1,31 @@
 import { TypographyVariant } from "@mui/material";
-import { Dictionary, entries, filter, map } from "lodash";
 import { Flex, FlexProps } from "components/generic/Flex";
 import { Property } from "components/generic/Property";
+import { Dictionary, entries, filter, map, slice } from "lodash";
 
 export function PropertyList({
   event,
   variant = "body2",
+  max = 10,
   ...props
 }: {
   event?: Dictionary<any>;
   variant?: TypographyVariant;
+  max?: number;
 } & FlexProps) {
+  const a = filter(entries(event), ([, v]) => v !== undefined);
   return (
     <Flex {...props}>
-      {map(
-        filter(entries(event), ([, v]) => v !== undefined),
-        ([k, v]) => (
-          <Property label={k} value={v} type={{ variant }} />
-        )
+      {map(slice(a, 0, max), ([k, v]) => (
+        <Property label={k} value={v} type={{ variant }} />
+      ))}
+      {a.length > max && (
+        <Property
+          label={`${a.length - max} more`}
+          type={{ sx: { pt: 1 } }}
+          value=""
+        />
       )}
     </Flex>
   );
-}
\ No newline at end of file
+}
diff --git a/client/src/components/inspector/SelectionMenu.tsx b/client/src/components/inspector/SelectionMenu.tsx
index bfc303f5..a177b10e 100644
--- a/client/src/components/inspector/SelectionMenu.tsx
+++ b/client/src/components/inspector/SelectionMenu.tsx
@@ -1,8 +1,3 @@
-import { chain, Dictionary, entries, merge } from "lodash";
-import { ComponentProps, ReactNode, useMemo } from "react";
-import { SelectEvent as RendererSelectEvent } from "components/renderer/Renderer";
-import { useCache } from "pages/TreePage";
-import { useUIState } from "slices/UIState";
 import {
   Divider,
   ListItem,
@@ -14,9 +9,13 @@ import {
   Typography,
 } from "@mui/material";
 import {
-  SelectionInfoProvider,
   getLayerHandler,
+  SelectionInfoProvider,
 } from "components/layer-editor/layers/LayerSource";
+import { SelectEvent as RendererSelectEvent } from "components/renderer/Renderer";
+import { chain, Dictionary, entries, merge } from "lodash";
+import { useCache } from "pages/TreePage";
+import { ComponentProps, ReactNode, useMemo } from "react";
 import { useLayers } from "slices/layers";
 
 type Props = {
diff --git a/client/src/components/inspector/TraceRenderer.tsx b/client/src/components/inspector/TraceRenderer.tsx
index 58708a61..685cc894 100644
--- a/client/src/components/inspector/TraceRenderer.tsx
+++ b/client/src/components/inspector/TraceRenderer.tsx
@@ -3,7 +3,7 @@ import {
   ViewInArOutlined,
 } from "@mui/icons-material";
 import { Box, CircularProgress, useTheme } from "@mui/material";
-import { find, map } from "lodash";
+import { find, map, round } from "lodash";
 import { Size } from "protocol";
 import { useDebounce } from "react-use";
 import {
@@ -23,11 +23,11 @@ import { useLoading } from "slices/loading";
 import { useRenderers } from "slices/renderers";
 
 const rendererOptions = {
-  tileSubdivision: 2,
-  workerCount: 3,
+  tileSubdivision: 1,
+  workerCount: 8,
   tileResolution: {
-    width: 256,
-    height: 256,
+    width: round(256 * devicePixelRatio),
+    height: round(256 * devicePixelRatio),
   },
 };
 
@@ -52,6 +52,10 @@ function useRenderer(renderer?: string, { width, height }: Partial<Size> = {}) {
         const instance = new entry.renderer.constructor();
         instance.setup({
           ...rendererOptions,
+          screenSize: {
+            width,
+            height,
+          },
           backgroundColor: theme.palette.background.paper,
           accentColor: theme.palette.primary.main,
         });
diff --git a/client/src/components/inspector/index.tsx b/client/src/components/inspector/index.tsx
index 96608554..7b0549ad 100644
--- a/client/src/components/inspector/index.tsx
+++ b/client/src/components/inspector/index.tsx
@@ -5,6 +5,7 @@ import { createElement } from "react";
 import { useAnyLoading } from "slices/loading";
 import { PanelState, useView } from "slices/view";
 import { ViewTree } from "./ViewTree";
+import { FullscreenProgress } from "./FullscreenProgress";
 
 type SpecimenInspectorProps = Record<string, any> & FlexProps;
 
@@ -37,6 +38,7 @@ export function Inspector(props: SpecimenInspectorProps) {
           sx={{ position: "absolute", bottom: 0, width: "100%", zIndex: 1 }}
         />
       </Fade>
+      <FullscreenProgress />
     </>
   );
 }
diff --git a/client/src/components/layer-editor/LayerEditor.tsx b/client/src/components/layer-editor/LayerEditor.tsx
index 91e3eb5f..a1aa2d06 100644
--- a/client/src/components/layer-editor/LayerEditor.tsx
+++ b/client/src/components/layer-editor/LayerEditor.tsx
@@ -24,8 +24,8 @@ import {
   useMemo,
   useState,
 } from "react";
-import { inferLayerName, layerHandlers } from "./layers/LayerSource";
 import { Layer } from "slices/layers";
+import { inferLayerName, layerHandlers } from "./layers/LayerSource";
 
 type LayerEditorProps = {
   value: Layer;
@@ -126,7 +126,11 @@ function Component(
                 "Transparency",
                 <FeaturePicker
                   label="Transparency"
-                  items={options(["100%"])}
+                  items={["25", "50", "75", "100"].map((c) => ({
+                    id: c,
+                    name: `${c}%`,
+                  }))}
+                  value="100"
                   showArrow
                 />
               )}
@@ -150,7 +154,11 @@ function Component(
                     name: startCase(s),
                   }))}
                   onChange={(v) =>
-                    setDraft?.(produce(draft, (d) => set(d, "source.type", v)))
+                    setDraft?.(
+                      produce(draft, (d) => {
+                        set(d, "source", { type: v });
+                      })
+                    )
                   }
                   showArrow
                 />
diff --git a/client/src/components/layer-editor/layers/LayerSource.tsx b/client/src/components/layer-editor/layers/LayerSource.tsx
index b96a9460..332a8dbb 100644
--- a/client/src/components/layer-editor/layers/LayerSource.tsx
+++ b/client/src/components/layer-editor/layers/LayerSource.tsx
@@ -1,14 +1,13 @@
+import { EditorSetterProps } from "components/Editor";
+import { SelectionMenuContent } from "components/inspector/SelectionMenu";
+import { SelectEvent } from "components/renderer/Renderer";
 import { Dictionary } from "lodash";
 import { TraceEvent } from "protocol";
 import { createElement, FC, ReactNode } from "react";
+import { Layer } from "slices/layers";
 import { mapLayerSource } from "./mapLayerSource";
 import { queryLayerSource } from "./queryLayerSource";
 import { traceLayerSource } from "./traceLayerSource";
-import { EditorProps, EditorSetterProps } from "components/Editor";
-import { SelectionMenuContent } from "components/inspector/SelectionMenu";
-import { SelectEvent } from "components/renderer/Renderer";
-import { PlaybackStateType } from "slices/playback";
-import { Layer } from "slices/layers";
 
 export type SelectionInfoProvider = FC<{
   layer?: string;
@@ -26,8 +25,6 @@ export type LayerSource<K extends string, T> = {
     layer?: Layer<T>;
     children?: (steps: TraceEvent[]) => ReactNode;
   }>;
-  currentStep?: number;
-  playback?: PlaybackStateType;
   getSelectionInfo?: SelectionInfoProvider;
 };
 
diff --git a/client/src/components/layer-editor/layers/mapLayerSource.tsx b/client/src/components/layer-editor/layers/mapLayerSource.tsx
index ba37eea1..779a1581 100644
--- a/client/src/components/layer-editor/layers/mapLayerSource.tsx
+++ b/client/src/components/layer-editor/layers/mapLayerSource.tsx
@@ -1,7 +1,3 @@
-import {
-  PlaceOutlined as DestinationIcon,
-  TripOriginOutlined as StartIcon,
-} from "@mui/icons-material";
 import { MapPicker } from "components/app-bar/Input";
 import { NodeList } from "components/render/renderer/generic/NodeList";
 import { getParser } from "components/renderer";
@@ -9,14 +5,13 @@ import { ParsedMap } from "components/renderer/map-parser/Parser";
 import { useEffectWhen } from "hooks/useEffectWhen";
 import { useMapContent } from "hooks/useMapContent";
 import { useParsedMap } from "hooks/useParsedMap";
-import { filter, isUndefined, reduce, round, set, startCase } from "lodash";
-import { produce, withProduce } from "produce";
+import { isUndefined, round, set, startCase } from "lodash";
+import { withProduce } from "produce";
 import { useMemo } from "react";
 import { Map } from "slices/UIState";
-import { useLayer, Layer } from "slices/layers";
+import { Layer, useLayer } from "slices/layers";
 import { LayerSource, inferLayerName } from "./LayerSource";
 import { Option } from "./Option";
-import { QueryLayerData } from "./queryLayerSource";
 
 export type MapLayerData = {
   map?: Map;
@@ -81,9 +76,6 @@ export const mapLayerSource: LayerSource<"map", MapLayerData> = {
       return {};
     }, [parsedMap, event]);
     const menu = useMemo(() => {
-      const filteredLayers = filter(layers, {
-        source: { type: "query" },
-      }) as Layer<QueryLayerData>[];
       return {
         ...(layer &&
           point &&
@@ -95,41 +87,6 @@ export const mapLayerSource: LayerSource<"map", MapLayerData> = {
                   primary: "Point",
                   secondary: `(${round(point.x, 2)}, ${round(point.y, 2)})`,
                 },
-                ...reduce(
-                  filteredLayers,
-                  (prev, next) => ({
-                    ...prev,
-                    [`${next.key}-a`]: {
-                      primary: `Set as source`,
-                      secondary: inferLayerName(next),
-                      action: () =>
-                        setLayer(
-                          produce(layer, (l) => {
-                            set(l, "source.start", node);
-                            set(l, "source.query", undefined);
-                            set(l, "source.mapLayerKey", layer.key);
-                            set(l, "source.trace", undefined);
-                          })
-                        ),
-                      icon: <StartIcon sx={{ transform: "scale(0.5)" }} />,
-                    },
-                    [`${next.key}-b`]: {
-                      primary: `Set as destination`,
-                      secondary: inferLayerName(next),
-                      action: () =>
-                        setLayer(
-                          produce(layer, (l) => {
-                            set(l, "source.end", node);
-                            set(l, "source.query", undefined);
-                            set(l, "source.mapLayerKey", layer.key);
-                            set(l, "source.trace", undefined);
-                          })
-                        ),
-                      icon: <DestinationIcon />,
-                    },
-                  }),
-                  {}
-                ),
               },
             },
           }),
diff --git a/client/src/components/layer-editor/layers/queryLayerSource.tsx b/client/src/components/layer-editor/layers/queryLayerSource.tsx
index ada7165d..93c622bc 100644
--- a/client/src/components/layer-editor/layers/queryLayerSource.tsx
+++ b/client/src/components/layer-editor/layers/queryLayerSource.tsx
@@ -1,20 +1,29 @@
-import { CodeOutlined, LayersOutlined } from "@mui/icons-material";
+import {
+  CodeOutlined,
+  PlaceOutlined as DestinationIcon,
+  LayersOutlined,
+  TripOriginOutlined as StartIcon,
+} from "@mui/icons-material";
 import { Box, Typography as Type } from "@mui/material";
 import { FeaturePicker } from "components/app-bar/FeaturePicker";
 import { useSnackbar } from "components/generic/Snackbar";
-import { find, set } from "lodash";
-import { withProduce } from "produce";
+import { getParser } from "components/renderer";
+import { filter, find, map, merge, reduce, set } from "lodash";
+import { nanoid as id } from "nanoid";
+import { produce, withProduce } from "produce";
 import { useMemo } from "react";
 import { Connection, useConnections } from "slices/connections";
 import { useFeatures } from "slices/features";
-import { useLayer, useLayers } from "slices/layers";
+import { Layer, useLayer, useLayers } from "slices/layers";
 import { useEffectWhenAsync } from "../../../hooks/useEffectWhen";
 import { LayerSource, inferLayerName } from "./LayerSource";
 import { Heading, Option } from "./Option";
 import { TracePreview } from "./TracePreview";
-import { MapLayer } from "./mapLayerSource";
+import { MapLayer, MapLayerData } from "./mapLayerSource";
 import { TraceLayerData, traceLayerSource } from "./traceLayerSource";
 
+const TraceLayerSelectionInfoProvider = traceLayerSource.getSelectionInfo!;
+
 async function findConnection(
   connections: Connection[],
   algorithm: string,
@@ -147,6 +156,7 @@ export const queryLayerSource: LayerSource<"query", QueryLayerData> = {
                   set(v, "source.trace", {
                     name: `${algorithmInfo?.name}`,
                     content: result,
+                    key: id(),
                   })
                 );
               } else {
@@ -174,5 +184,86 @@ export const queryLayerSource: LayerSource<"query", QueryLayerData> = {
   inferName: (l) => l.source?.trace?.name ?? "Untitled Query",
   renderer: traceLayerSource.renderer,
   steps: traceLayerSource.steps,
-  getSelectionInfo: traceLayerSource.getSelectionInfo,
+  getSelectionInfo: ({ children, event, layer: key }) => {
+    const { layer, setLayer, layers } = useLayer<QueryLayerData>(key);
+    const mapLayerData = useMemo(() => {
+      const filteredLayers = filter(layers, {
+        source: { type: "map" },
+      }) as Layer<MapLayerData>[];
+      return filter(
+        map(filteredLayers, (mapLayer) => {
+          const { parsedMap } = mapLayer?.source ?? {};
+          if (parsedMap && event) {
+            const hydratedMap = getParser(
+              mapLayer?.source?.map?.format
+            )?.hydrate?.(parsedMap);
+            if (hydratedMap) {
+              const point = event?.world && hydratedMap.snap(event.world);
+              if (point) {
+                const node = event?.world && hydratedMap.nodeAt(point);
+                return {
+                  point,
+                  node,
+                  key: mapLayer.key,
+                  name: inferLayerName(mapLayer),
+                };
+              }
+            }
+          }
+        })
+      );
+    }, [layers]);
+    const menu = useMemo(
+      () =>
+        !!layer &&
+        !!mapLayerData.length && {
+          [layer.key]: {
+            primary: inferLayerName(layer),
+            items: {
+              ...reduce(
+                mapLayerData,
+                (prev, next) => ({
+                  ...prev,
+                  [`${key}-${next?.key}-source`]: {
+                    primary: `Set as source`,
+                    secondary: next?.name,
+                    action: () =>
+                      setLayer(
+                        produce(layer, (l) => {
+                          set(l, "source.start", next?.node);
+                          set(l, "source.query", undefined);
+                          set(l, "source.mapLayerKey", next?.key);
+                          set(l, "source.trace", undefined);
+                        })
+                      ),
+                    icon: <StartIcon sx={{ transform: "scale(0.5)" }} />,
+                  },
+                  [`${key}-${next?.key}-destination`]: {
+                    primary: `Set as destination`,
+                    secondary: next?.name,
+                    action: () =>
+                      setLayer(
+                        produce(layer, (l) => {
+                          set(l, "source.end", next?.node);
+                          set(l, "source.query", undefined);
+                          set(l, "source.mapLayerKey", next?.key);
+                          set(l, "source.trace", undefined);
+                        })
+                      ),
+                    icon: <DestinationIcon />,
+                  },
+                }),
+                {}
+              ),
+            },
+          },
+        },
+      [mapLayerData, layer, layers, setLayer]
+    );
+    return (
+      <TraceLayerSelectionInfoProvider event={event} layer={key}>
+        {(menuB) => children?.(merge(menuB, menu))}
+      </TraceLayerSelectionInfoProvider>
+    );
+  },
 };
diff --git a/client/src/components/layer-editor/layers/traceLayerSource.tsx b/client/src/components/layer-editor/layers/traceLayerSource.tsx
index b98a504f..709c6316 100644
--- a/client/src/components/layer-editor/layers/traceLayerSource.tsx
+++ b/client/src/components/layer-editor/layers/traceLayerSource.tsx
@@ -9,7 +9,9 @@ import {
 } from "components/render/renderer/generic/NodeList";
 import { colorsHex, getColorHex } from "components/renderer/colors";
 import { parseString } from "components/renderer/parser/parseString";
-import { useTraceMemo } from "components/renderer/parser/parseTrace";
+import { useTraceParser } from "components/renderer/parser/parseTrace";
+import { ParseTraceWorkerReturnType } from "components/renderer/parser/parseTrace.worker";
+import { useEffectWhen } from "hooks/useEffectWhen";
 import {
   chain,
   constant,
@@ -24,16 +26,20 @@ import {
   set,
   startCase,
 } from "lodash";
+import { nanoid as id } from "nanoid";
 import { produce, withProduce } from "produce";
 import { Trace, TraceEvent } from "protocol";
 import { useEffect, useMemo } from "react";
 import { useThrottle } from "react-use";
 import { UploadedTrace } from "slices/UIState";
 import { Layer, useLayer } from "slices/layers";
-import { useTraceContent } from "../../../hooks/useTraceContent";
 import { LayerSource, inferLayerName } from "./LayerSource";
 import { Heading, Option } from "./Option";
 import { TracePreview } from "./TracePreview";
+import {
+  PlaybackLayerData,
+  PlaybackService,
+} from "components/app-bar/Playback";
 
 const isNullish = (x: KeyRef): x is Exclude<KeyRef, Key> =>
   x === undefined || x === null;
@@ -91,14 +97,9 @@ function makePathIndex(trace: Trace) {
   return { getParent, getPath };
 }
 
-export type PlaybackLayerData = {
-  step?: number;
-  playback?: "playing" | "paused";
-  playbackTo?: number;
-};
-
 export type TraceLayerData = {
   trace?: UploadedTrace;
+  parsedTrace?: ParseTraceWorkerReturnType;
   onion?: "off" | "transparent" | "solid";
 } & PlaybackLayerData;
 
@@ -114,7 +115,9 @@ export const traceLayerSource: LayerSource<"trace", TraceLayerData> = {
           label="Trace"
           content={
             <TracePicker
-              onChange={(v) => produce((d) => set(d, "source.trace", v))}
+              onChange={(v) =>
+                produce((d) => set(d, "source.trace", { ...v, key: id() }))
+              }
               value={value?.source?.trace}
             />
           }
@@ -142,6 +145,17 @@ export const traceLayerSource: LayerSource<"trace", TraceLayerData> = {
     );
   }),
   service: withProduce(({ value, produce }) => {
+    const { palette } = useTheme();
+    const parseTrace = useTraceParser({
+      trace: value?.source?.trace?.content,
+      context: {
+        color: colorsHex,
+        themeAccent: palette.primary.main,
+        themeTextPrimary: palette.text.primary,
+        themeBackground: palette.background.paper,
+      },
+      view: "main",
+    });
     useEffect(() => {
       produce((l) =>
         set(
@@ -150,45 +164,39 @@ export const traceLayerSource: LayerSource<"trace", TraceLayerData> = {
           value?.source?.trace?.content?.events?.length ?? 0
         )
       );
-    }, [value]);
-    return <></>;
+    }, [value?.source?.trace?.content?.events?.length]);
+    useEffectWhen(
+      async () => {
+        const parsedTrace = await parseTrace();
+        produce((l) => set(l, "source.parsedTrace", parsedTrace));
+      },
+      [parseTrace],
+      [value?.source?.trace?.key]
+    );
+    return (
+      <>
+        <PlaybackService value={value} />
+      </>
+    );
   }),
   renderer: ({ layer }) => {
-    const { palette } = useTheme();
+    const parsedTrace = layer?.source?.parsedTrace;
     const step = useThrottle(layer?.source?.step ?? 0, 1000 / 60);
-    console.log(step);
-    const { result } = useTraceMemo(
-      {
-        trace: layer?.source?.trace?.content,
-        context: {
-          color: colorsHex,
-          themeAccent: palette.primary.main,
-          themeTextPrimary: palette.text.primary,
-          themeBackground: palette.background.paper,
-        },
-        view: "main",
-      },
-      [
-        palette.primary.main,
-        palette.text.primary,
-        palette.background.paper,
-        layer?.source?.trace?.content,
-      ]
-    );
+
     const path = use2DPath(layer, step);
     const steps = useMemo(
       () =>
-        map(result?.stepsPersistent, (c) =>
+        map(parsedTrace?.stepsPersistent, (c) =>
           map(c, (d) => merge(d, { meta: { sourceLayer: layer?.key } }))
         ),
-      [result?.stepsPersistent, layer?.key]
+      [parsedTrace?.stepsPersistent, layer?.key]
     );
     const steps1 = useMemo(
       () =>
-        map(result?.stepsTransient, (c) =>
+        map(parsedTrace?.stepsTransient, (c) =>
           map(c, (d) => merge(d, { meta: { sourceLayer: layer?.key } }))
         ),
-      [result?.stepsTransient, layer?.key]
+      [parsedTrace?.stepsTransient, layer?.key]
     );
     const steps2 = useMemo(() => [steps1[step] ?? []], [steps1, step]);
     return (
@@ -200,8 +208,7 @@ export const traceLayerSource: LayerSource<"trace", TraceLayerData> = {
     );
   },
   steps: ({ layer, children }) => {
-    const { events } = useTraceContent(layer?.source?.trace?.content);
-    return <>{children?.(events)}</>;
+    return <>{children?.(layer?.source?.trace?.content?.events ?? [])}</>;
   },
   getSelectionInfo: ({ layer: key, event, children }) => {
     const { layer, setLayer } = useLayer(key);
@@ -211,7 +218,7 @@ export const traceLayerSource: LayerSource<"trace", TraceLayerData> = {
         .filter((c) => c.meta?.sourceLayer === layer?.key)
         .map((c) => c.meta?.step)
         .filter(negate(isUndefined))
-        .sort((a, b) => b - a)
+        .sort((a, b) => a - b)
         .value() as number[];
       if (steps.length && layer) {
         const step = last(steps)!;
diff --git a/client/src/components/renderer/parser/normalize.ts b/client/src/components/renderer/parser/normalize.ts
index 8a6f1328..d7d45846 100644
--- a/client/src/components/renderer/parser/normalize.ts
+++ b/client/src/components/renderer/parser/normalize.ts
@@ -8,4 +8,8 @@ export function normalize<T extends Props>(
   context: Context<T> = {}
 ): PropMap<T> {
   return mapProperties(context, (v) => (isFunction(v) ? v : parseProperty(v)));
-}
\ No newline at end of file
+}
+
+export function normalizeConstant(obj: Context<any> = {}) {
+  return new Proxy(obj, { get: (obj, p) => () => obj[p] });
+}
diff --git a/client/src/components/renderer/parser/parseProperty.ts b/client/src/components/renderer/parser/parseProperty.ts
index 79daebff..a07b3cdb 100644
--- a/client/src/components/renderer/parser/parseProperty.ts
+++ b/client/src/components/renderer/parser/parseProperty.ts
@@ -22,4 +22,4 @@ export function parseProperty(prop: any): Prop<any> {
     default:
       return constant(prop);
   }
-}
\ No newline at end of file
+}
diff --git a/client/src/components/renderer/parser/parseString.ts b/client/src/components/renderer/parser/parseString.ts
index 041d426c..14391243 100644
--- a/client/src/components/renderer/parser/parseString.ts
+++ b/client/src/components/renderer/parser/parseString.ts
@@ -1,22 +1,29 @@
 import { join } from "lodash";
-import { evaluateParsedString as evaluateTemplate, parseStringTemplateGenerator as makeParser } from "string-template-parser";
+import {
+  evaluateParsedString as evaluateTemplate,
+  parseStringTemplateGenerator as makeParser,
+} from "string-template-parser";
 import { Prop } from "./Context";
 import { parseToken } from "./parseToken";
+import memo from "memoizee";
 
 const openBrace = /^\{\{\s*/;
 const closeBrace = /^\s*\}\}/;
 const neverMatch = /\b\B/;
 
-export function parseString(str: string): Prop<any> {
-  const parser = makeParser({
-    VARIABLE_START: openBrace,
-    VARIABLE_END: closeBrace,
-    PIPE_START: neverMatch,
-    PIPE_PARAMETER_START: neverMatch,
-    QUOTED_STRING: neverMatch,
-  });
-  const parsed = parser(str);
-  return join(parsed.literals, "")
-    ? (ctx) => evaluateTemplate(parsed, {}, {}, (v) => parseToken(v)(ctx))
-    : parseToken(parsed.variables[0].name);
-}
\ No newline at end of file
+export const parseString = memo(
+  (str: string): Prop<any> => {
+    const parser = makeParser({
+      VARIABLE_START: openBrace,
+      VARIABLE_END: closeBrace,
+      PIPE_START: neverMatch,
+      PIPE_PARAMETER_START: neverMatch,
+      QUOTED_STRING: neverMatch,
+    });
+    const parsed = parser(str);
+    return join(parsed.literals, "")
+      ? (ctx) => evaluateTemplate(parsed, {}, {}, (v) => parseToken(v)(ctx))
+      : parseToken(parsed.variables[0].name);
+  },
+  { primitive: true }
+);
diff --git a/client/src/components/renderer/parser/parseToken.ts b/client/src/components/renderer/parser/parseToken.ts
index 21fc8760..bd0237fe 100644
--- a/client/src/components/renderer/parser/parseToken.ts
+++ b/client/src/components/renderer/parser/parseToken.ts
@@ -1,14 +1,18 @@
+import memo from "memoizee";
 import { Prop } from "./Context";
 import { normalize } from "./normalize";
 
-export function parseToken(token: string): Prop<any> {
-  const f = Function("ctx", `return ${token};`);
-  return (ctx) =>
-    f(
-      new Proxy(normalize(ctx), {
-        get(target, prop: string) {
-          return target[prop]?.({});
-        },
-      })
-    );
-}
+export const parseToken = memo(
+  (token: string): Prop<any> => {
+    const f = Function("$", `return ${token};`);
+    return (ctx) =>
+      f(
+        new Proxy(normalize(ctx), {
+          get(target, prop: string) {
+            return target[prop]?.({});
+          },
+        })
+      );
+  },
+  { primitive: true }
+);
diff --git a/client/src/components/renderer/parser/parseTrace.ts b/client/src/components/renderer/parser/parseTrace.ts
index 92963ac1..5ae7a1d3 100644
--- a/client/src/components/renderer/parser/parseTrace.ts
+++ b/client/src/components/renderer/parser/parseTrace.ts
@@ -1,15 +1,13 @@
+import { useSnackbar } from "components/generic/Snackbar";
 import pluralize from "pluralize";
-import { useAsync } from "react-async-hook";
-import { useMemo } from "react";
+import { useCallback } from "react";
+import { useLoadingState } from "slices/loading";
+import { usingMemoizedWorkerTask } from "workers/usingWorker";
 import {
   ParseTraceWorkerParameters,
   ParseTraceWorkerReturnType,
 } from "./parseTrace.worker";
-import { useSnackbar } from "components/generic/Snackbar";
-import { useLoadingState } from "slices/loading";
-import { usingMemoizedWorkerTask } from "workers/usingWorker";
 import parseGridWorkerUrl from "./parseTrace.worker.ts?worker&url";
-import { map } from "lodash";
 
 export class ParseTraceWorker extends Worker {
   constructor() {
@@ -22,10 +20,10 @@ export const parseTraceAsync = usingMemoizedWorkerTask<
   ParseTraceWorkerReturnType
 >(ParseTraceWorker);
 
-export function useTrace(params: ParseTraceWorkerParameters) {
+export function useTraceParser(params: ParseTraceWorkerParameters) {
   const push = useSnackbar();
   const usingLoadingState = useLoadingState("specimen");
-  return useAsync(
+  return useCallback(
     () =>
       usingLoadingState(async () => {
         if (params?.trace) {
@@ -45,8 +43,3 @@ export function useTrace(params: ParseTraceWorkerParameters) {
     [params]
   );
 }
-
-export function useTraceMemo(trace: ParseTraceWorkerParameters, deps: any[]) {
-  const params = useMemo(() => trace, map(deps, JSON.stringify));
-  return useTrace(params);
-}
diff --git a/client/src/components/renderer/parser/parseTrace.worker.ts b/client/src/components/renderer/parser/parseTrace.worker.ts
index bc5e7f68..2741f95c 100644
--- a/client/src/components/renderer/parser/parseTrace.worker.ts
+++ b/client/src/components/renderer/parser/parseTrace.worker.ts
@@ -9,6 +9,7 @@ import {
 import { ComponentEntry } from "renderer";
 import { mapProperties } from "./mapProperties";
 import { parse as parseComponents } from "./parse";
+import { normalizeConstant } from "./normalize";
 
 const isNullish = (x: KeyRef): x is Exclude<KeyRef, Key> =>
   x === undefined || x === null;
@@ -39,12 +40,14 @@ function parse({
         ParsedComponent<string, any>,
         CompiledComponent<string, Record<string, any>>
       >(p, (c) =>
-        c({
-          alpha: 1,
-          ...context,
-          ...ctx,
-          ...event,
-        })
+        c(
+          normalizeConstant({
+            alpha: 1,
+            ...context,
+            ...ctx,
+            event,
+          })
+        )
       )
     );
 
@@ -66,7 +69,6 @@ function parse({
   const steps = chain(trace?.events)
     .map((e, i, esx) => {
       const component = apply(e, {
-        ...context,
         step: i,
         parent: !isNullish(e.pId)
           ? esx[findLast(r[e.pId], (x) => x.step <= i)?.step ?? 0]
@@ -79,7 +81,6 @@ function parse({
     .map((c) => mapValues(c, (b) => b.filter(isVisible)))
     .map((c, i) => mapValues(c, (b) => b.map(makeEntryIteratee(i))))
     .value();
-
   return {
     stepsPersistent: map(steps, "persistent"),
     stepsTransient: map(steps, "transient"),
diff --git a/client/src/components/title-bar/TitleBar.tsx b/client/src/components/title-bar/TitleBar.tsx
index 1fab3371..646923db 100644
--- a/client/src/components/title-bar/TitleBar.tsx
+++ b/client/src/components/title-bar/TitleBar.tsx
@@ -62,7 +62,7 @@ export const TitleBar = () => {
                 key: "workspace",
                 items: [
                   {
-                    name: "Load workspace",
+                    name: "Open workspace",
                     key: "workspace-load",
                     action: load,
                   },
diff --git a/client/src/hooks/useParsedMap.tsx b/client/src/hooks/useParsedMap.tsx
index b6786a0e..32feffa6 100644
--- a/client/src/hooks/useParsedMap.tsx
+++ b/client/src/hooks/useParsedMap.tsx
@@ -19,7 +19,10 @@ export function useParsedMap(map?: Map) {
         if (format && content) {
           notify("Processing map...");
           const parsedMap = (await getParser(format)?.parse?.(content, {
-            color: fn(theme.palette.background.paper, 0.25),
+            color: fn(
+              theme.palette.background.paper,
+              1 - theme.palette.action.hoverOpacity
+            ),
           })) ?? { nodes: [] };
 
           notify(
diff --git a/client/src/hooks/usePlaybackState.tsx b/client/src/hooks/usePlaybackState.tsx
index ea0e6ec2..f1cee4e9 100644
--- a/client/src/hooks/usePlaybackState.tsx
+++ b/client/src/hooks/usePlaybackState.tsx
@@ -1,5 +1,5 @@
+import { PlaybackLayerData } from "components/app-bar/Playback";
 import { useSnackbar } from "components/generic/Snackbar";
-import { PlaybackLayerData } from "components/layer-editor/layers/traceLayerSource";
 import { clamp, min, set } from "lodash";
 import { produce } from "produce";
 import { useMemo } from "react";
@@ -58,5 +58,5 @@ export function usePlaybackState(key?: string) {
       ...state,
       ...callbacks,
     };
-  }, [end, playback, playing, ready, start, step, layer, setLayer]);
+  }, [end, playback, playing, ready, start, step, setLayer]);
 }
diff --git a/client/src/hooks/useWorkspace.tsx b/client/src/hooks/useWorkspace.tsx
index 47747a3c..c80af892 100644
--- a/client/src/hooks/useWorkspace.tsx
+++ b/client/src/hooks/useWorkspace.tsx
@@ -1,9 +1,10 @@
 import download from "downloadjs";
 import { fileDialog as file } from "file-select-dialog";
 import { UIState, useUIState } from "slices/UIState";
+import { formatByte, useBusyState } from "slices/busy";
 import { Layers, useLayers } from "slices/layers";
 import { generateUsername as id } from "unique-username-generator";
-import { parse } from "yaml";
+import { parseYamlAsync } from "workers/async";
 
 function ext(s: string) {
   return s.split(".").pop();
@@ -18,6 +19,7 @@ type Workspace = {
 export function useWorkspace() {
   const [layers, setLayers] = useLayers();
   const [UIState, setUIState] = useUIState();
+  const usingBusyState = useBusyState("workspace");
   return {
     load: async () => {
       const f = await file({
@@ -25,12 +27,16 @@ export function useWorkspace() {
         strict: true,
       });
       if (f && FORMATS.includes(ext(f.name)!)) {
-        const content = await f.text();
-        const parsed = parse(content) as Workspace | undefined;
-        if (parsed) {
-          setLayers(() => parsed.layers);
-          setUIState(() => parsed.UIState);
-        }
+        await usingBusyState(async () => {
+          const content = await f.text();
+          const parsed = (await parseYamlAsync(content)) as
+            | Workspace
+            | undefined;
+          if (parsed) {
+            setLayers(() => parsed.layers);
+            setUIState(() => parsed.UIState);
+          }
+        }, `Opening workspace (${formatByte(f.size)})`);
       }
     },
     save: () => {
diff --git a/client/src/index.css b/client/src/index.css
index 07016666..8ebfd5bd 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -8,13 +8,13 @@ body,
   height: 100%;
   user-select: none;
   overflow: hidden;
+  font-family: "Inter", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
+    "Droid Sans", "Helvetica Neue", "Arial", sans-serif !important;
 }
 
 body {
   overflow: hidden;
   margin: 0;
-  font-family: "Inter", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
-    "Droid Sans", "Helvetica Neue", "Arial", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -25,7 +25,8 @@ body {
 
 code {
   font-family: "Roboto Mono", "Consolas", "Courier New", Courier, monospace;
-  transform: translateY(-10px);
+  transform: translateY(-0.75px);
+  display: block;
 }
 
 @media (pointer: fine) {
diff --git a/client/src/index.tsx b/client/src/index.tsx
index df5c271a..00a1df9f 100644
--- a/client/src/index.tsx
+++ b/client/src/index.tsx
@@ -13,10 +13,12 @@ import { RendererProvider } from "slices/renderers";
 import { SettingsProvider } from "slices/settings";
 import { LayersProvider } from "slices/layers";
 import { ViewProvider } from "slices/view";
+import { BusyProvider } from "slices/busy";
 
 const root = createRoot(document.getElementById("root")!);
 
 const slices = [
+  BusyProvider,
   SettingsProvider,
   ConnectionsProvider,
   FeaturesProvider,
diff --git a/client/src/produce.ts b/client/src/produce.ts
index 90c142e5..a2f763f1 100644
--- a/client/src/produce.ts
+++ b/client/src/produce.ts
@@ -1,15 +1,15 @@
 import { EditorSetterProps } from "components/Editor";
-import { isEqual } from "lodash";
-import { createElement, ReactNode } from "react";
+import { clone } from "lodash";
+import { ReactNode, createElement } from "react";
 
 export function produce<T>(obj: T, f: (obj: T) => void) {
-  const b = structuredClone(obj);
+  const b = clone(obj);
   f(b);
-  return isEqual(b, obj) ? obj : b;
+  return b;
 }
 export function produce2<T, U>(obj: T, f: (obj: T) => U) {
-  const b = f(structuredClone(obj));
-  return isEqual(b, obj) ? obj : b;
+  const b = f(clone(obj));
+  return b;
 }
 
 export function withProduce<T>(
diff --git a/client/src/public-dev/coi.js b/client/src/public-dev/coi.js
new file mode 100644
index 00000000..2ce52153
--- /dev/null
+++ b/client/src/public-dev/coi.js
@@ -0,0 +1,102 @@
+/*! coi-serviceworker v0.1.7 - Guido Zuidhof and contributors, licensed under MIT */
+let coepCredentialless = !1;
+"undefined" == typeof window
+  ? (self.addEventListener("install", () => self.skipWaiting()),
+    self.addEventListener("activate", (e) => e.waitUntil(self.clients.claim())),
+    self.addEventListener("message", (e) => {
+      e.data &&
+        ("deregister" === e.data.type
+          ? self.registration
+              .unregister()
+              .then(() => self.clients.matchAll())
+              .then((e) => {
+                e.forEach((e) => e.navigate(e.url));
+              })
+          : "coepCredentialless" === e.data.type &&
+            (coepCredentialless = e.data.value));
+    }),
+    self.addEventListener("fetch", function (e) {
+      const r = e.request;
+      if ("only-if-cached" === r.cache && "same-origin" !== r.mode) return;
+      const s =
+        coepCredentialless && "no-cors" === r.mode
+          ? new Request(r, { credentials: "omit" })
+          : r;
+      e.respondWith(
+        fetch(s)
+          .then((e) => {
+            if (0 === e.status) return e;
+            const r = new Headers(e.headers);
+            return (
+              r.set(
+                "Cross-Origin-Embedder-Policy",
+                coepCredentialless ? "credentialless" : "require-corp"
+              ),
+              coepCredentialless ||
+                r.set("Cross-Origin-Resource-Policy", "cross-origin"),
+              r.set("Cross-Origin-Opener-Policy", "same-origin"),
+              new Response(e.body, {
+                status: e.status,
+                statusText: e.statusText,
+                headers: r,
+              })
+            );
+          })
+          .catch((e) => console.error(e))
+      );
+    }))
+  : (() => {
+      const e = {
+          shouldRegister: () => !0,
+          shouldDeregister: () => !1,
+          coepCredentialless: () =>
+            window.chrome !== undefined || window.netscape !== undefined,
+          doReload: () => window.location.reload(),
+          quiet: !1,
+          ...window.coi,
+        },
+        r = navigator;
+      r.serviceWorker &&
+        r.serviceWorker.controller &&
+        (r.serviceWorker.controller.postMessage({
+          type: "coepCredentialless",
+          value: e.coepCredentialless(),
+        }),
+        e.shouldDeregister() &&
+          r.serviceWorker.controller.postMessage({ type: "deregister" })),
+        !1 === window.crossOriginIsolated &&
+          e.shouldRegister() &&
+          (window.isSecureContext
+            ? r.serviceWorker &&
+              r.serviceWorker.register(window.document.currentScript.src).then(
+                (s) => {
+                  !e.quiet &&
+                    console.log("COOP/COEP Service Worker registered", s.scope),
+                    s.addEventListener("updatefound", () => {
+                      !e.quiet &&
+                        console.log(
+                          "Reloading page to make use of updated COOP/COEP Service Worker."
+                        ),
+                        e.doReload();
+                    }),
+                    s.active &&
+                      !r.serviceWorker.controller &&
+                      (!e.quiet &&
+                        console.log(
+                          "Reloading page to make use of COOP/COEP Service Worker."
+                        ),
+                      e.doReload());
+                },
+                (r) => {
+                  !e.quiet &&
+                    console.error(
+                      "COOP/COEP Service Worker failed to register:",
+                      r
+                    );
+                }
+              )
+            : !e.quiet &&
+              console.log(
+                "COOP/COEP Service Worker not registered, a secure context is required."
+              ));
+    })();
diff --git a/client/src/public-dev/favicon.png b/client/src/public-dev/favicon.png
new file mode 100644
index 00000000..a12a05ca
Binary files /dev/null and b/client/src/public-dev/favicon.png differ
diff --git a/client/src/public-dev/manifest.json b/client/src/public-dev/manifest.json
new file mode 100644
index 00000000..39be9e43
--- /dev/null
+++ b/client/src/public-dev/manifest.json
@@ -0,0 +1,22 @@
+{
+  "short_name": "Visualiser",
+  "name": "Visualiser",
+  "version": "1.0.5",
+  "description": "Visualise pathfinding search and more",
+  "version_name": "1.0.5; mid October 2023",
+  "repository": "https://github.com/path-visualiser/app",
+  "docs": "https://github.com/path-visualiser/app/blob/master/docs",
+  "icons": [
+    {
+      "src": "./favicon.png",
+      "sizes": "512x512",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": "./",
+  "display": "standalone",
+  "theme_color": "#607d8b",
+  "scope": ".",
+  "background_color": "#546e7a",
+  "display_override": ["window-controls-overlay"]
+}
diff --git a/client/src/public-dev/robots.txt b/client/src/public-dev/robots.txt
new file mode 100644
index 00000000..9dd52a51
--- /dev/null
+++ b/client/src/public-dev/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/client/src/public/previews/snip_grid_astar.png b/client/src/public/previews/snip_grid_astar.png
deleted file mode 100644
index b6885cfe..00000000
Binary files a/client/src/public/previews/snip_grid_astar.png and /dev/null differ
diff --git a/client/src/public/previews/snip_tile_tree.png b/client/src/public/previews/snip_tile_tree.png
deleted file mode 100644
index ad53ebf4..00000000
Binary files a/client/src/public/previews/snip_tile_tree.png and /dev/null differ
diff --git a/client/src/services/ConnectionsService.tsx b/client/src/services/ConnectionsService.tsx
index b99d99e1..e0fa1696 100644
--- a/client/src/services/ConnectionsService.tsx
+++ b/client/src/services/ConnectionsService.tsx
@@ -5,6 +5,7 @@ import { useSnackbar } from "components/generic/Snackbar";
 import { Connection, useConnections } from "slices/connections";
 import { useLoadingState } from "slices/loading";
 import { useSettings } from "slices/settings";
+
 function wait(ms: number) {
   return new Promise((res) => delay(res, ms));
 }
diff --git a/client/src/slices/UIState.ts b/client/src/slices/UIState.ts
index d489f790..0aa0cb24 100644
--- a/client/src/slices/UIState.ts
+++ b/client/src/slices/UIState.ts
@@ -1,6 +1,6 @@
 import { makeTemplate } from "components/script-editor/makeTemplate";
 import { templates } from "components/script-editor/templates";
-import { constant, values } from "lodash";
+import { values } from "lodash";
 import { Feature, FeatureDescriptor } from "protocol/FeatureQuery";
 import { ParamsOf } from "protocol/Message";
 import { Parameters, PathfindingTask } from "protocol/SolveTask";
@@ -41,6 +41,10 @@ type DebugOptionsState = {
   breakpoints?: Breakpoint[];
 };
 
+type BusyState = {
+  busy?: { [K in string]: string };
+};
+
 type SpecimenState = {
   start?: number;
   end?: number;
@@ -54,13 +58,21 @@ export type Specimen = {
 
 export type UploadedTrace = FeatureDescriptor & {
   content?: Trace;
+  /**
+   * Uniquely identifies a trace.
+   */
+  key?: string;
 };
 
-export type UIState = InputState & DebugOptionsState & SpecimenState;
+export type UIState = InputState &
+  DebugOptionsState &
+  SpecimenState &
+  BusyState;
 
 export const [useUIState, UIStateProvider] = createSlice<
   UIState,
   Partial<UIState>
 >({
   code: makeTemplate(values(templates)),
+  busy: {},
 });
diff --git a/client/src/slices/busy.ts b/client/src/slices/busy.ts
new file mode 100644
index 00000000..e6ba8153
--- /dev/null
+++ b/client/src/slices/busy.ts
@@ -0,0 +1,38 @@
+import { delay, isUndefined, omitBy } from "lodash";
+import { useCallback } from "react";
+import { createSlice } from "./createSlice";
+import { merge } from "./reducers";
+
+export const LARGE_FILE_B = 20 * 1024 * 1024;
+
+type Busy = {
+  [K in string]?: string;
+};
+
+export const [useBusy, BusyProvider] = createSlice<Busy>(
+  {},
+  { reduce: (a, b) => omitBy(merge(a, b), isUndefined) }
+);
+
+function wait(ms: number) {
+  return new Promise((res) => delay(res, ms));
+}
+
+export function useBusyState(key: string) {
+  const [, dispatch] = useBusy();
+
+  return useCallback(
+    async <T>(task: () => Promise<T>, description: string) => {
+      dispatch(() => ({ [key]: description }));
+      wait(300);
+      const out = await task();
+      dispatch(() => ({ [key]: undefined }));
+      return out;
+    },
+    [key, dispatch]
+  );
+}
+
+export function formatByte(b: number) {
+  return `${(b / (1024 * 1024)).toFixed(2)} MB`;
+}
diff --git a/client/src/slices/layers.ts b/client/src/slices/layers.ts
index fe106365..7db2027e 100644
--- a/client/src/slices/layers.ts
+++ b/client/src/slices/layers.ts
@@ -8,6 +8,7 @@ export type Layer<T = Record<string, any>> = {
   key: string;
   name?: string;
   source?: { type: string } & T;
+  transparency?: "25" | "50" | "75" | "100";
 };
 
 export type Layers = {
@@ -46,6 +47,7 @@ export function useLayer<T extends Record<string, any> = Record<string, any>>(
         layer,
         setLayer: (newLayer: Layer<T>) => {
           const mergedLayer = { ...layer, ...newLayer };
+          console.log(layer, newLayer, mergedLayer);
           setLayers(({ layers: prev }) => ({
             layers: map(prev, (l) =>
               l.key === mergedLayer.key ? mergedLayer : l
@@ -54,6 +56,6 @@ export function useLayer<T extends Record<string, any> = Record<string, any>>(
         },
         layers: filtered,
       } as const),
-    [layer, setLayers, layers]
+    [layer, setLayers, filtered]
   );
 }
diff --git a/client/src/theme.tsx b/client/src/theme.tsx
index f2e5628a..720e6310 100644
--- a/client/src/theme.tsx
+++ b/client/src/theme.tsx
@@ -12,10 +12,12 @@ const shadow = `
     0px 20px 96px 0px rgb(0 0 0 / 0.5%)
 `;
 
+const fontFamily = `"Inter", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
+        "Droid Sans", "Helvetica Neue", "Arial", sans-serif`;
 export const makeTheme = (mode: "light" | "dark", theme: AccentColor) =>
   createTheme({
     palette: {
-      primary: { main: colors[theme][mode === "dark" ? "A100" : "500"] },
+      primary: { main: colors[theme][mode === "dark" ? "A100" : "A700"] },
       mode,
       background:
         mode === "dark"
@@ -24,8 +26,7 @@ export const makeTheme = (mode: "light" | "dark", theme: AccentColor) =>
     },
     typography: {
       allVariants: {
-        fontFamily: `"Inter", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
-        "Droid Sans", "Helvetica Neue", "Arial", sans-serif`,
+        fontFamily,
       },
       button: {
         textTransform: "none",
@@ -43,6 +44,14 @@ export const makeTheme = (mode: "light" | "dark", theme: AccentColor) =>
           },
         },
       },
+      MuiTooltip: {
+        styleOverrides: {
+          tooltip: {
+            backgroundImage: "linear-gradient(#1c2128, #1c2128)",
+            fontFamily,
+          },
+        },
+      },
       MuiTypography: {
         styleOverrides: {
           body1: {
diff --git a/client/src/workers/async.ts b/client/src/workers/async.ts
index fd07c21d..0c1bfbdb 100644
--- a/client/src/workers/async.ts
+++ b/client/src/workers/async.ts
@@ -1,9 +1,13 @@
 import { memoize as memo } from "lodash";
-import { CompressWorker, HashWorker } from ".";
+import { CompressWorker, HashWorker, ParseYamlWorker } from ".";
 import { usingWorkerTask } from "./usingWorker";
 
 export const hashAsync = memo(usingWorkerTask<string, string>(HashWorker));
 
 export const compressAsync = memo(
   usingWorkerTask<string, string>(CompressWorker)
-);
\ No newline at end of file
+);
+
+export const parseYamlAsync = memo(
+  usingWorkerTask<string, any>(ParseYamlWorker)
+);
diff --git a/client/src/workers/index.ts b/client/src/workers/index.ts
index 0d9a507c..575814c8 100644
--- a/client/src/workers/index.ts
+++ b/client/src/workers/index.ts
@@ -1,6 +1,7 @@
 import hashWorkerUrl from "./hash.worker.ts?worker&url";
 import ipcWorkerUrl from "./ipc.worker.ts?worker&url";
 import compressWorkerUrl from "./compress.worker.ts?worker&url";
+import yamlWorkerUrl from "./parseYaml.worker.ts?worker&url";
 
 export class HashWorker extends Worker {
   constructor() {
@@ -19,3 +20,8 @@ export class IPCWorker extends Worker {
     super(ipcWorkerUrl, { type: "module" });
   }
 }
+export class ParseYamlWorker extends Worker {
+  constructor() {
+    super(yamlWorkerUrl, { type: "module" });
+  }
+}
diff --git a/client/src/workers/parseYaml.worker.ts b/client/src/workers/parseYaml.worker.ts
new file mode 100644
index 00000000..e3498eb9
--- /dev/null
+++ b/client/src/workers/parseYaml.worker.ts
@@ -0,0 +1,3 @@
+import { parse } from "yaml";
+
+onmessage = (str: MessageEvent<string>) => postMessage(parse(str.data));
diff --git a/client/vite.config.ts b/client/vite.config.ts
index fc198270..64d49062 100644
--- a/client/vite.config.ts
+++ b/client/vite.config.ts
@@ -1,11 +1,13 @@
+/// <reference types="vitest" />
+
 import react from "@vitejs/plugin-react";
 import path from "path";
+import { defineConfig } from "vite";
 import viteTsconfigPaths from "vite-tsconfig-paths";
-import { UserConfig } from "vite";
-/// <reference types="vitest" />
-export default {
-  mode: "production",
+
+export default defineConfig(({ mode }) => ({
   root: path.join(process.cwd(), "./src"),
+  publicDir: mode === "development" ? "public-dev" : "public",
   base: "./",
   build: { outDir: path.join(process.cwd(), "./dist") },
   plugins: [
@@ -36,4 +38,4 @@ export default {
       },
     },
   },
-} as UserConfig;
\ No newline at end of file
+}));
diff --git a/internal-renderers/src/d2-renderer/D2Renderer.ts b/internal-renderers/src/d2-renderer/D2Renderer.ts
index 346ae0e5..e4de087a 100644
--- a/internal-renderers/src/d2-renderer/D2Renderer.ts
+++ b/internal-renderers/src/d2-renderer/D2Renderer.ts
@@ -2,9 +2,11 @@ import {
   ceil,
   clamp,
   debounce,
+  delay,
   find,
   floor,
   isEqual,
+  isNaN,
   map,
   once,
   reduce,
@@ -18,10 +20,7 @@ import * as PIXI from "pixi.js";
 import { Bounds } from "protocol";
 import { ComponentEntry, makeRenderer } from "renderer";
 import { Bush } from "./Bush";
-import {
-  CompiledD2IntrinsicComponent,
-  D2InstrinsicComponents,
-} from "./D2IntrinsicComponents";
+import { CompiledD2IntrinsicComponent } from "./D2IntrinsicComponents";
 import {
   D2RendererEvents,
   D2RendererInterface,
@@ -45,6 +44,10 @@ class Tile extends PIXI.Sprite {
   }
 }
 
+function handleNaN<T>(obj: T, def: T) {
+  return isNaN(obj) ? def : obj;
+}
+
 class D2Renderer
   extends EventEmitter<D2RendererEvents>
   implements D2RendererInterface
@@ -74,10 +77,10 @@ class D2Renderer
       const out: Bounds = reduce(
         bounds,
         (a, b) => ({
-          top: min(a.top, b.top),
-          left: min(a.left, b.left),
-          bottom: max(a.bottom, b.bottom),
-          right: max(a.right, b.right),
+          top: handleNaN(min(a.top, b.top), a.top),
+          left: handleNaN(min(a.left, b.left), a.left),
+          bottom: handleNaN(max(a.bottom, b.bottom), a.bottom),
+          right: handleNaN(max(a.right, b.right), a.right),
         }),
         {
           bottom: -Infinity,
@@ -86,8 +89,6 @@ class D2Renderer
           right: -Infinity,
         }
       );
-      console.log(out);
-      console.log(this.#system.all());
       this.#viewport?.animate?.({
         position: new PIXI.Point(
           (out.left + out.right) / 2,
@@ -372,7 +373,7 @@ class D2Renderer
         }
       };
       tile.alpha = 0;
-      ticker.add(f);
+      delay(() => ticker.add(f), this.#options.animationDuration);
     });
   }
 }
diff --git a/internal-renderers/src/d2-renderer/D2RendererOptions.ts b/internal-renderers/src/d2-renderer/D2RendererOptions.ts
index b62d6e0b..6c879022 100644
--- a/internal-renderers/src/d2-renderer/D2RendererOptions.ts
+++ b/internal-renderers/src/d2-renderer/D2RendererOptions.ts
@@ -32,7 +32,7 @@ export type D2RendererOptions = RendererOptions & {
 };
 
 export const defaultD2RendererOptions: D2RendererOptions = {
-  screenSize: { width: 256, height: 256 },
+  screenSize: { width: 1, height: 1 },
   workerCount: 4,
   workerIndex: 0,
   tileResolution: {
@@ -48,7 +48,7 @@ export const defaultD2RendererOptions: D2RendererOptions = {
   dynamicResolution: {
     intervalMs: 5000,
     increment: 0.25,
-    maxScale: 1.5,
+    maxScale: 2,
     minScale: 1,
     dtMax: 1.5,
     dtMin: 1.1,