diff --git a/.changeset/pixi-canvas-renderer.md b/.changeset/pixi-canvas-renderer.md
new file mode 100644
index 00000000000..5f53d285d1c
--- /dev/null
+++ b/.changeset/pixi-canvas-renderer.md
@@ -0,0 +1,5 @@
+---
+"@hashintel/petrinaut": patch
+---
+
+Add an experimental Pixi renderer for the canvas, selectable in the viewport settings dialog.
diff --git a/libs/@hashintel/petrinaut/docs/visual-settings.md b/libs/@hashintel/petrinaut/docs/visual-settings.md
index 2c09ca8b344..e30dd76be40 100644
--- a/libs/@hashintel/petrinaut/docs/visual-settings.md
+++ b/libs/@hashintel/petrinaut/docs/visual-settings.md
@@ -73,3 +73,14 @@ Choose how arcs are drawn between nodes:
 | **Square**          | Right-angle paths (smoothstep routing).                     |
 | **Bezier**          | Smooth curved paths.                                        |
 | **Adaptive Bezier** | Curved paths that adjust based on node positions. (Default) |
+
+### Renderer (experimental)
+
+Choose which engine draws the canvas:
+
+| Renderer       | Description                                                                                                                                     |
+| -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
+| **React Flow** | The default. Nodes and arcs are regular page elements.                                                                                          |
+| **Pixi (GPU)** | Draws the net on a GPU-accelerated canvas. Stays smooth on large nets and during playback; some visual details differ slightly from React Flow. |
+
+Both renderers share the same nets, selection, tools and settings, so switching is safe at any time. The choice is saved with your other settings.
diff --git a/libs/@hashintel/petrinaut/package.json b/libs/@hashintel/petrinaut/package.json
index 6bcb0ebe27d..7a96f796839 100644
--- a/libs/@hashintel/petrinaut/package.json
+++ b/libs/@hashintel/petrinaut/package.json
@@ -70,12 +70,14 @@
     "@hashintel/petrinaut-core": "workspace:^",
     "@hashintel/refractive": "workspace:^",
     "@monaco-editor/react": "4.8.0-rc.3",
+    "@pixi/react": "8.0.5",
     "@tanstack/react-form": "1.29.0",
     "@xyflow/react": "12.10.1",
     "ai": "6.0.182",
     "fuzzysort": "3.1.0",
     "lodash-es": "4.18.1",
     "monaco-editor": "0.55.1",
+    "pixi.js": "8.20.0",
     "react-markdown": "10.1.0",
     "react-resizable-panels": "4.6.5",
     "uplot": "1.6.32",
diff --git a/libs/@hashintel/petrinaut/src/react/state/user-settings-context.ts b/libs/@hashintel/petrinaut/src/react/state/user-settings-context.ts
index a8cdf2d7cf6..842df121446 100644
--- a/libs/@hashintel/petrinaut/src/react/state/user-settings-context.ts
+++ b/libs/@hashintel/petrinaut/src/react/state/user-settings-context.ts
@@ -18,6 +18,11 @@ import type {
 
 export type ArcRendering = "smoothstep" | "bezier" | "custom";
 
+/** Which engine draws the canvas. */
+export const canvasRendererNames = ["react-flow", "pixi"] as const;
+
+export type CanvasRendererName = (typeof canvasRendererNames)[number];
+
 export type SubViewSectionSettings = {
   collapsed: boolean;
   /** Last known panel height in pixels */
@@ -35,6 +40,7 @@ export type UserSettings = {
   keepPanelsMounted: boolean;
   compactNodes: boolean;
   arcRendering: ArcRendering;
+  canvasRenderer: CanvasRendererName;
   cursorMode: CursorMode;
   isLeftSidebarOpen: boolean;
   leftSidebarWidth: number;
@@ -104,6 +110,7 @@ export type UserSettingsActions = {
   setKeepPanelsMounted: (value: boolean) => void;
   setCompactNodes: (value: boolean) => void;
   setArcRendering: (value: ArcRendering) => void;
+  setCanvasRenderer: (value: CanvasRendererName) => void;
   setIsLeftSidebarOpen: (value: boolean) => void;
   setLeftSidebarWidth: (value: number) => void;
   setPropertiesPanelWidth: (value: number) => void;
@@ -139,6 +146,7 @@ export const defaultUserSettings: UserSettings = {
   keepPanelsMounted: true,
   compactNodes: false,
   arcRendering: "custom",
+  canvasRenderer: "react-flow",
   cursorMode: "pan",
   isLeftSidebarOpen: true,
   leftSidebarWidth: DEFAULT_LEFT_SIDEBAR_WIDTH,
@@ -169,6 +177,7 @@ const DEFAULT_CONTEXT_VALUE: UserSettingsContextValue = {
   setKeepPanelsMounted: () => {},
   setCompactNodes: () => {},
   setArcRendering: () => {},
+  setCanvasRenderer: () => {},
   setIsLeftSidebarOpen: () => {},
   setLeftSidebarWidth: () => {},
   setPropertiesPanelWidth: () => {},
diff --git a/libs/@hashintel/petrinaut/src/react/state/user-settings-provider.tsx b/libs/@hashintel/petrinaut/src/react/state/user-settings-provider.tsx
index 711b3ff67a9..e8f4253af98 100644
--- a/libs/@hashintel/petrinaut/src/react/state/user-settings-provider.tsx
+++ b/libs/@hashintel/petrinaut/src/react/state/user-settings-provider.tsx
@@ -14,6 +14,7 @@ import type {
 } from "./editor-context";
 import type {
   ArcRendering,
+  CanvasRendererName,
   SubViewSectionSettings,
   UserSettings,
 } from "./user-settings-context";
@@ -74,6 +75,8 @@ export const UserSettingsProvider: React.FC<React.PropsWithChildren> = ({
       setState((prev) => ({ ...prev, compactNodes: value })),
     setArcRendering: (value: ArcRendering) =>
       setState((prev) => ({ ...prev, arcRendering: value })),
+    setCanvasRenderer: (value: CanvasRendererName) =>
+      setState((prev) => ({ ...prev, canvasRenderer: value })),
     setCursorMode: (value: CursorMode) =>
       setState((prev) => ({ ...prev, cursorMode: value })),
     setIsLeftSidebarOpen: (value: boolean) =>
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/experiments/create-experiment-drawer.test.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/experiments/create-experiment-drawer.test.tsx
index 6bd9572f759..e7dd6ed96ae 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/experiments/create-experiment-drawer.test.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/experiments/create-experiment-drawer.test.tsx
@@ -146,6 +146,7 @@ const TestProviders = ({
     setShowCompilationOutput: () => {},
     setEnableParameterSweeps: () => {},
     setEnableOptimizationSurface: () => {},
+    setCanvasRenderer: () => {},
     setCanvasViewport: () => {},
     updateSubViewSection: () => {},
   };
diff --git a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/canvas-renderer.ts b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/canvas-renderer.ts
index 40905368c1a..3918d126b1b 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/canvas-renderer.ts
+++ b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/canvas-renderer.ts
@@ -55,6 +55,5 @@ export type CanvasRendererProps = {
 
 export type CanvasRenderer = React.FC<CanvasRendererProps>;
 
-export const canvasRendererNames = ["react-flow"] as const;
-
-export type CanvasRendererName = (typeof canvasRendererNames)[number];
+/** The user setting that picks the renderer names the same engines. */
+export type { CanvasRendererName } from "../../../react/state/user-settings-context";
diff --git a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/canvas-renderers.ts b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/canvas-renderers.ts
index 331aed8258f..52e790636e3 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/canvas-renderers.ts
+++ b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/canvas-renderers.ts
@@ -1,10 +1,10 @@
+import { PixiCanvas } from "./renderers/pixi/pixi-canvas";
 import { ReactFlowCanvas } from "./renderers/react-flow/react-flow-canvas";
 
 import type { CanvasRenderer, CanvasRendererName } from "./canvas-renderer";
 
-/** Every renderer the canvas view can mount, by name. */
+/** Every renderer the canvas view can mount, by the name the user setting stores. */
 export const canvasRenderers: Record<CanvasRendererName, CanvasRenderer> = {
   "react-flow": ReactFlowCanvas,
+  pixi: PixiCanvas,
 };
-
-export const defaultCanvasRenderer: CanvasRendererName = "react-flow";
diff --git a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/viewport-settings-dialog.tsx b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/viewport-settings-dialog.tsx
index 6bafe7fc747..0ee0daf8a3c 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/viewport-settings-dialog.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/viewport-settings-dialog.tsx
@@ -7,7 +7,10 @@ import { isWebGpuAvailable } from "@hashintel/petrinaut-core";
 import { SDCPNContext } from "../../../../react/state/sdcpn-context";
 import { UserSettingsContext } from "../../../../react/state/user-settings-context";
 
-import type { ArcRendering } from "../../../../react/state/user-settings-context";
+import type {
+  ArcRendering,
+  CanvasRendererName,
+} from "../../../../react/state/user-settings-context";
 
 const rowStyle = css({
   display: "grid",
@@ -94,6 +97,8 @@ export const ViewportSettingsDialog: React.FC<ViewportSettingsDialogProps> = ({
     setCompactNodes,
     arcRendering,
     setArcRendering,
+    canvasRenderer,
+    setCanvasRenderer,
     showMinimap,
     setShowMinimap,
     snapToGrid,
@@ -174,6 +179,31 @@ export const ViewportSettingsDialog: React.FC<ViewportSettingsDialogProps> = ({
             ]}
           />
         </SettingRow>
+        <SettingRow
+          label={
+            <>
+              Renderer{" "}
+              <Chip size="xs" color="orange" variant="outline" shape="round">
+                Experimental
+              </Chip>
+            </>
+          }
+          description="Draw the canvas with React Flow or on a GPU-accelerated Pixi canvas"
+        >
+          <Select
+            size="sm"
+            className={selectStyle}
+            required
+            value={canvasRenderer}
+            onChange={(nextRenderer) =>
+              setCanvasRenderer(nextRenderer as CanvasRendererName)
+            }
+            items={[
+              { value: "react-flow", text: "React Flow" },
+              { value: "pixi", text: "Pixi (GPU)" },
+            ]}
+          />
+        </SettingRow>
 
         <h3 className={sectionTitleStyle}>General</h3>
         <SettingRow
diff --git a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/pixi/pixi-canvas.tsx b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/pixi/pixi-canvas.tsx
new file mode 100644
index 00000000000..8bd9753efe0
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/pixi/pixi-canvas.tsx
@@ -0,0 +1,201 @@
+/**
+ * @layerRoot ui.views.canvas.pixi
+ * @role Draws the canvas scene with Pixi and turns pointer gestures into the shared canvas interactions
+ */
+
+import { use, useEffect, useRef, useState } from "react";
+
+import { css } from "@hashintel/ds-helpers/css";
+import {
+  getBoundsOfCenteredBoxes,
+  getMinZoomForBounds,
+} from "@hashintel/petrinaut-core";
+
+import { useLatest } from "../../../../../react/hooks/use-latest";
+import { CanvasViewportContext } from "../../../../../react/state/canvas-viewport-context";
+import { EditorContext } from "../../../../../react/state/editor-context";
+import { UserSettingsContext } from "../../../../../react/state/user-settings-context";
+import {
+  CanvasControllerContext,
+  type CanvasRenderer,
+} from "../../canvas-renderer";
+import { getInitialViewport } from "../../canvas-viewport";
+import { ViewportControls } from "../../components/viewport-controls";
+import { useRecenterOnPanelOpen } from "../../hooks/use-recenter-on-panel-open";
+import { useDebouncedValue } from "../../hooks/util/use-debounced-value";
+import { useCanvasInteractions } from "../../use-canvas-interactions";
+import { buildArcPolylines } from "./pixi-canvas/arc-polylines";
+import {
+  createFrameStore,
+  FrameBridge,
+  useFrameSnapshot,
+} from "./pixi-canvas/frame-store";
+import { usePixiController } from "./pixi-canvas/pixi-controller";
+import { PixiMiniMap } from "./pixi-canvas/pixi-mini-map";
+import { PixiPlaceStateTooltip } from "./pixi-canvas/pixi-place-state-tooltip";
+import { readPixiTheme } from "./pixi-canvas/pixi-theme";
+import { PixiWorld } from "./pixi-canvas/pixi-world";
+import { useCanvasGestures } from "./pixi-canvas/use-canvas-gestures";
+import { createViewportStore, useViewport } from "./pixi-canvas/viewport-store";
+
+import type { ArcBatch } from "./pixi-canvas/pixi-arcs";
+import type { NodeRegistry } from "./pixi-canvas/pixi-nodes";
+
+/** React Flow's default zoom ceiling. */
+const maxZoom = 2;
+const minZoomDebounceMs = 100;
+/** How long the viewport holds still before it counts as settled and is saved. */
+const viewportSettleMs = 150;
+
+const hostStyle = css({
+  position: "absolute",
+  inset: "[0]",
+  overflow: "hidden",
+  touchAction: "none",
+  userSelect: "none",
+  "& canvas": {
+    display: "block",
+  },
+});
+
+const fadeBgStyle = css({
+  position: "absolute",
+  inset: "[0]",
+  background: "[rgba(255, 255, 255, 0.3)]",
+  pointerEvents: "none",
+});
+
+/**
+ * The Pixi implementation of the canvas. The renderer owns the viewport in an
+ * external store, draws the scene in one WebGL canvas, and keeps the shared
+ * DOM overlays (viewport controls, minimap, tooltips) around it.
+ */
+export const PixiCanvas: CanvasRenderer = ({
+  scene,
+  containerSize,
+  viewportActions,
+}) => {
+  const hostRef = useRef<HTMLDivElement>(null);
+  const { compactNodes, showMinimap, partialSelection, arcRendering } =
+    use(UserSettingsContext);
+  const { hasCanvasSelection, globalMode } = use(EditorContext);
+  const { savedViewport, rememberViewport } = use(CanvasViewportContext);
+  const interactions = useCanvasInteractions(scene);
+
+  const [theme] = useState(readPixiTheme);
+  const [frames] = useState(createFrameStore);
+  const [registry] = useState<NodeRegistry>(() => new Map());
+  const batchRef = useRef<ArcBatch | null>(null);
+
+  const bounds = getBoundsOfCenteredBoxes(scene.nodes);
+  // The viewport at mount: where this net was last left, or centered on the
+  // net. Gestures own it from then on, and every move is remembered.
+  const [viewport] = useState(() =>
+    createViewportStore(
+      savedViewport ?? getInitialViewport(bounds, containerSize),
+    ),
+  );
+  const current = useViewport(viewport);
+  const remember = useLatest(rememberViewport);
+  // The store reports every frame of a gesture, and a saved viewport is one
+  // write, so the report waits for the viewport to hold still. Whatever is
+  // still waiting when the renderer goes away is saved rather than dropped.
+  useEffect(() => {
+    const save = () => remember.current(viewport.get());
+    let settling: ReturnType<typeof setTimeout> | null = null;
+    const unsubscribe = viewport.subscribe(() => {
+      if (settling) {
+        clearTimeout(settling);
+      }
+      settling = setTimeout(save, viewportSettleMs);
+    });
+    return () => {
+      unsubscribe();
+      if (settling) {
+        clearTimeout(settling);
+        save();
+      }
+    };
+  }, [viewport, remember]);
+
+  // The zoom floor keeps the net at a readable fraction of the viewport, but
+  // never rises above the current zoom, and settles before it applies, as on
+  // the React Flow canvas.
+  const boundsMinZoom = getMinZoomForBounds(bounds, containerSize);
+  const minZoom = useDebouncedValue(
+    Math.min(boundsMinZoom, current.zoom),
+    minZoomDebounceMs,
+  );
+  const zoomLimits = { min: minZoom, max: maxZoom };
+
+  const polylines = buildArcPolylines(scene, arcRendering);
+  const { gestures, handlers, cursor } = useCanvasGestures(hostRef, {
+    scene,
+    polylines,
+    interactions,
+    viewport,
+    zoomLimits,
+    partialSelection,
+  });
+
+  const controller = usePixiController(
+    viewport,
+    hostRef,
+    containerSize,
+    zoomLimits,
+  );
+  useRecenterOnPanelOpen(controller, containerSize, scene.nodes);
+
+  // The arc mesh publishes its GPU batch here for the animator to write to.
+  const publishBatch = (batch: ArcBatch | null) => {
+    batchRef.current = batch;
+  };
+
+  const { hasFrames } = useFrameSnapshot(frames);
+  const hoveredPlaceWithVisualizer = scene.nodes.find(
+    (node) =>
+      node.kind === "place" &&
+      node.hovered &&
+      node.hasColorType &&
+      node.hasVisualizer,
+  );
+
+  return (
+    <CanvasControllerContext value={controller}>
+      <FrameBridge store={frames} />
+      <div ref={hostRef} className={hostStyle} style={{ cursor }} {...handlers}>
+        <PixiWorld
+          host={hostRef}
+          scene={scene}
+          polylines={polylines}
+          theme={theme}
+          viewport={viewport}
+          frames={frames}
+          gestures={gestures}
+          registry={registry}
+          batchRef={batchRef}
+          onBatchChange={publishBatch}
+          compact={compactNodes}
+          containerSize={containerSize}
+        />
+        {hasCanvasSelection && <div className={fadeBgStyle} />}
+        {hasFrames && hoveredPlaceWithVisualizer?.kind === "place" && (
+          <PixiPlaceStateTooltip
+            node={hoveredPlaceWithVisualizer}
+            viewport={viewport}
+          />
+        )}
+        {showMinimap && (
+          <PixiMiniMap
+            scene={scene}
+            viewport={viewport}
+            containerSize={containerSize}
+          />
+        )}
+        {globalMode !== "actual" && (
+          <ViewportControls viewportActions={viewportActions} />
+        )}
+      </div>
+    </CanvasControllerContext>
+  );
+};
diff --git a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/pixi/pixi-canvas/arc-paths.ts b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/pixi/pixi-canvas/arc-paths.ts
new file mode 100644
index 00000000000..4c77cab689d
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/pixi/pixi-canvas/arc-paths.ts
@@ -0,0 +1,211 @@
+/**
+ * Arc geometry for the Pixi renderer: the three path styles the settings
+ * offer, sampled to polylines. The shapes match what React Flow draws, so
+ * switching renderers does not move any arc.
+ */
+
+import type { ArcRendering } from "../../../../../../react/state/user-settings-context";
+import type { CanvasPoint } from "../../../canvas-scene";
+
+/** Handle centres: the arc leaves the source rightwards and enters the target from the left. */
+export type ArcEndpoints = { source: CanvasPoint; target: CanvasPoint };
+
+export type ArcPolyline = {
+  points: CanvasPoint[];
+  /** Where a weight label sits. */
+  label: CanvasPoint;
+  /** Unit direction of travel at the target end, for the arrow head. */
+  endTangent: CanvasPoint;
+};
+
+const bezierSegments = 24;
+
+const unit = ({ x, y }: CanvasPoint): CanvasPoint => {
+  const length = Math.hypot(x, y) || 1;
+  return { x: x / length, y: y / length };
+};
+
+const cubicPoint = (
+  start: CanvasPoint,
+  control1: CanvasPoint,
+  control2: CanvasPoint,
+  end: CanvasPoint,
+  t: number,
+): CanvasPoint => {
+  const u = 1 - t;
+  const a = u * u * u;
+  const b = 3 * u * u * t;
+  const c = 3 * u * t * t;
+  const d = t * t * t;
+  return {
+    x: a * start.x + b * control1.x + c * control2.x + d * end.x,
+    y: a * start.y + b * control1.y + c * control2.y + d * end.y,
+  };
+};
+
+const sampleCubic = (
+  start: CanvasPoint,
+  control1: CanvasPoint,
+  control2: CanvasPoint,
+  end: CanvasPoint,
+): ArcPolyline => ({
+  points: Array.from({ length: bezierSegments + 1 }, (_, index) =>
+    cubicPoint(start, control1, control2, end, index / bezierSegments),
+  ),
+  label: cubicPoint(start, control1, control2, end, 0.5),
+  endTangent: unit({ x: end.x - control2.x, y: end.y - control2.y }),
+});
+
+/**
+ * Petrinaut's adaptive bezier: control offsets proportional to the horizontal
+ * distance, so arcs stay tight between neighbours and sweep wide otherwise.
+ */
+const customPath = ({ source, target }: ArcEndpoints): ArcPolyline => {
+  const offset = Math.max(Math.abs(target.x - source.x) * 0.7, 80);
+  return sampleCubic(
+    source,
+    { x: source.x + offset / 2, y: source.y },
+    { x: target.x - offset, y: target.y },
+    target,
+  );
+};
+
+const bezierCurvature = 0.25;
+
+/** React Flow's control offset: half the distance forwards, a damped sweep backwards. */
+const bezierControlOffset = (distance: number): number =>
+  distance >= 0 ? 0.5 * distance : bezierCurvature * 25 * Math.sqrt(-distance);
+
+/** React Flow's default bezier between a right-facing source and a left-facing target. */
+const bezierPath = ({ source, target }: ArcEndpoints): ArcPolyline =>
+  sampleCubic(
+    source,
+    { x: source.x + bezierControlOffset(target.x - source.x), y: source.y },
+    { x: target.x - bezierControlOffset(target.x - source.x), y: target.y },
+    target,
+  );
+
+const stepOffset = 20;
+const stepRadius = 5;
+const cornerSegments = 4;
+
+/**
+ * Replaces each interior corner of an orthogonal polyline with a small arc
+ * of radius `stepRadius`, shortened when a leg is too short to fit it.
+ */
+const roundCorners = (corners: CanvasPoint[]): CanvasPoint[] => {
+  const points: CanvasPoint[] = [corners[0]!];
+  for (let index = 1; index < corners.length - 1; index++) {
+    const before = corners[index - 1]!;
+    const corner = corners[index]!;
+    const after = corners[index + 1]!;
+    const inDir = unit({ x: corner.x - before.x, y: corner.y - before.y });
+    const outDir = unit({ x: after.x - corner.x, y: after.y - corner.y });
+    const radius = Math.min(
+      stepRadius,
+      Math.hypot(corner.x - before.x, corner.y - before.y) / 2,
+      Math.hypot(after.x - corner.x, after.y - corner.y) / 2,
+    );
+    const entry = {
+      x: corner.x - inDir.x * radius,
+      y: corner.y - inDir.y * radius,
+    };
+    const exit = {
+      x: corner.x + outDir.x * radius,
+      y: corner.y + outDir.y * radius,
+    };
+    for (let step = 0; step <= cornerSegments; step++) {
+      const t = step / cornerSegments;
+      // Quadratic bezier through the corner approximates the rounded bend.
+      const u = 1 - t;
+      points.push({
+        x: u * u * entry.x + 2 * u * t * corner.x + t * t * exit.x,
+        y: u * u * entry.y + 2 * u * t * corner.y + t * t * exit.y,
+      });
+    }
+  }
+  points.push(corners[corners.length - 1]!);
+  return points;
+};
+
+/**
+ * React Flow's smooth step between a right-facing source and a left-facing
+ * target: a short lead out of each handle, then one vertical split halfway
+ * when the target is ahead, or a horizontal detour around when it is behind.
+ */
+const smoothStepPath = ({ source, target }: ArcEndpoints): ArcPolyline => {
+  const sourceGapped = { x: source.x + stepOffset, y: source.y };
+  const targetGapped = { x: target.x - stepOffset, y: target.y };
+  const center = {
+    x: (sourceGapped.x + targetGapped.x) / 2,
+    y: (sourceGapped.y + targetGapped.y) / 2,
+  };
+  const targetAhead = targetGapped.x >= sourceGapped.x;
+  const split = targetAhead
+    ? [
+        { x: center.x, y: sourceGapped.y },
+        { x: center.x, y: targetGapped.y },
+      ]
+    : [
+        { x: sourceGapped.x, y: center.y },
+        { x: targetGapped.x, y: center.y },
+      ];
+  const corners = [source, sourceGapped, ...split, targetGapped, target];
+  return {
+    points: roundCorners(corners),
+    label: center,
+    endTangent: { x: 1, y: 0 },
+  };
+};
+
+export const sampleArcPath = (
+  style: ArcRendering,
+  endpoints: ArcEndpoints,
+): ArcPolyline => {
+  switch (style) {
+    case "bezier":
+      return bezierPath(endpoints);
+    case "smoothstep":
+      return smoothStepPath(endpoints);
+    case "custom":
+      return customPath(endpoints);
+  }
+};
+
+/** Length of the polyline, for dash phases and tick spacing. */
+export const polylineLength = (points: CanvasPoint[]): number => {
+  let length = 0;
+  for (let index = 1; index < points.length; index++) {
+    length += Math.hypot(
+      points[index]!.x - points[index - 1]!.x,
+      points[index]!.y - points[index - 1]!.y,
+    );
+  }
+  return length;
+};
+
+/** The point and unit tangent at `distance` along the polyline. */
+export const pointAlong = (
+  points: CanvasPoint[],
+  distance: number,
+): { point: CanvasPoint; tangent: CanvasPoint } => {
+  let remaining = distance;
+  for (let index = 1; index < points.length; index++) {
+    const from = points[index - 1]!;
+    const to = points[index]!;
+    const length = Math.hypot(to.x - from.x, to.y - from.y);
+    if (remaining <= length || index === points.length - 1) {
+      const t = length === 0 ? 0 : Math.min(1, remaining / length);
+      return {
+        point: {
+          x: from.x + (to.x - from.x) * t,
+          y: from.y + (to.y - from.y) * t,
+        },
+        tangent: unit({ x: to.x - from.x, y: to.y - from.y }),
+      };
+    }
+    remaining -= length;
+  }
+  const last = points[points.length - 1]!;
+  return { point: last, tangent: { x: 1, y: 0 } };
+};
diff --git a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/pixi/pixi-canvas/arc-polylines.ts b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/pixi/pixi-canvas/arc-polylines.ts
new file mode 100644
index 00000000000..63c214e2b3f
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/pixi/pixi-canvas/arc-polylines.ts
@@ -0,0 +1,81 @@
+/**
+ * Every arc of the scene sampled to a polyline, shared by the mesh that draws
+ * them and the hit testing that finds the arc under the pointer.
+ */
+
+import { sampleArcPath, type ArcPolyline } from "./arc-paths";
+import { arcEndpointsOf } from "./node-geometry";
+
+import type { ArcRendering } from "../../../../../../react/state/user-settings-context";
+import type {
+  CanvasArc,
+  CanvasPoint,
+  CanvasScene,
+} from "../../../canvas-scene";
+
+export type ArcPolylines = Map<string, ArcPolyline>;
+
+export const buildArcPolylines = (
+  scene: CanvasScene,
+  style: ArcRendering,
+): ArcPolylines => {
+  const nodeById = new Map(scene.nodes.map((node) => [node.id, node]));
+  const polylines: ArcPolylines = new Map();
+  for (const arc of scene.arcs) {
+    const source = nodeById.get(arc.sourceId);
+    const target = nodeById.get(arc.targetId);
+    if (!source || !target) continue;
+    polylines.set(
+      arc.id,
+      sampleArcPath(
+        style,
+        arcEndpointsOf(source, arc.sourcePortId, target, arc.targetPortId),
+      ),
+    );
+  }
+  return polylines;
+};
+
+const distanceToSegment = (
+  point: CanvasPoint,
+  from: CanvasPoint,
+  to: CanvasPoint,
+): number => {
+  const dx = to.x - from.x;
+  const dy = to.y - from.y;
+  const lengthSquared = dx * dx + dy * dy;
+  const t =
+    lengthSquared === 0
+      ? 0
+      : Math.max(
+          0,
+          Math.min(
+            1,
+            ((point.x - from.x) * dx + (point.y - from.y) * dy) / lengthSquared,
+          ),
+        );
+  return Math.hypot(point.x - (from.x + dx * t), point.y - (from.y + dy * t));
+};
+
+/** The arc whose polyline passes within `tolerance` of a point; later arcs win. */
+export const arcAtPoint = (
+  scene: CanvasScene,
+  polylines: ArcPolylines,
+  point: CanvasPoint,
+  tolerance: number,
+): CanvasArc | null => {
+  for (let index = scene.arcs.length - 1; index >= 0; index--) {
+    const arc = scene.arcs[index]!;
+    const points = polylines.get(arc.id)?.points;
+    if (!points) continue;
+    for (let segment = 1; segment < points.length; segment++) {
+      if (
+        distanceToSegment(point, points[segment - 1]!, points[segment]!) <=
+        tolerance
+      ) {
+        return arc;
+      }
+    }
+  }
+  return null;
+};
diff --git a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/pixi/pixi-canvas/frame-store.ts b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/pixi/pixi-canvas/frame-store.ts
new file mode 100644
index 00000000000..ddaa537d553
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/pixi/pixi-canvas/frame-store.ts
@@ -0,0 +1,95 @@
+/**
+ * The simulation state the Pixi renderer animates from, as an external store.
+ * One component reads the React contexts and writes here, so a playback frame
+ * reaches the animator through a subscription instead of re-rendering every
+ * node.
+ */
+
+import { use, useEffect, useSyncExternalStore, type FC } from "react";
+
+import { ExecutionFrameSourceContext } from "../../../../../../react/execution-frame/context";
+import { SimulationContext } from "../../../../../../react/simulation/context";
+import { EditorContext } from "../../../../../../react/state/editor-context";
+
+import type { SimulationFrameReader } from "../../../../../../react/simulation/context";
+
+export type FrameSnapshot = {
+  frameReader: SimulationFrameReader | null;
+  /** Token count shown on a place's badge, or null to show no badge. */
+  tokenCountOf: (placeId: string) => number | null;
+  /** Whether any frames exist, which enables the place state tooltip. */
+  hasFrames: boolean;
+};
+
+export type FrameStore = {
+  get: () => FrameSnapshot;
+  set: (snapshot: FrameSnapshot) => void;
+  subscribe: (listener: () => void) => () => void;
+};
+
+const emptySnapshot: FrameSnapshot = {
+  frameReader: null,
+  tokenCountOf: () => null,
+  hasFrames: false,
+};
+
+export const createFrameStore = (): FrameStore => {
+  let snapshot = emptySnapshot;
+  const listeners = new Set<() => void>();
+  return {
+    get: () => snapshot,
+    set: (next) => {
+      snapshot = next;
+      for (const listener of listeners) listener();
+    },
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+  };
+};
+
+export const useFrameSnapshot = (store: FrameStore): FrameSnapshot =>
+  useSyncExternalStore(store.subscribe, store.get, store.get);
+
+/**
+ * Mirrors the execution frame and simulation contexts into the store. Token
+ * counts follow the viewed frame, or the initial marking while in simulate
+ * mode before a run, matching the React Flow nodes.
+ */
+export const FrameBridge: FC<{ store: FrameStore }> = ({ store }) => {
+  const { currentFrameReader, currentViewedFrame, totalFrames } = use(
+    ExecutionFrameSourceContext,
+  );
+  const { initialMarking } = use(SimulationContext);
+  const { globalMode } = use(EditorContext);
+  const isSimulateMode = globalMode === "simulate";
+
+  useEffect(() => {
+    store.set({
+      frameReader: currentFrameReader,
+      hasFrames: totalFrames > 0,
+      tokenCountOf: (placeId) => {
+        if (currentViewedFrame) {
+          return currentViewedFrame.places[placeId]?.tokenCount ?? null;
+        }
+        if (isSimulateMode) {
+          const marking = initialMarking[placeId];
+          return typeof marking === "number" ? marking : (marking?.length ?? 0);
+        }
+        return null;
+      },
+    });
+  }, [
+    store,
+    currentFrameReader,
+    currentViewedFrame,
+    totalFrames,
+    initialMarking,
+    isSimulateMode,
+  ]);
+
+  return null;
+};
diff --git a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/pixi/pixi-canvas/node-geometry.ts b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/pixi/pixi-canvas/node-geometry.ts
new file mode 100644
index 00000000000..7e0a291b7f7
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/pixi/pixi-canvas/node-geometry.ts
@@ -0,0 +1,181 @@
+/**
+ * Where a node's connection handles sit and what a point on the canvas hits.
+ * Handles follow React Flow's placement: one target handle centred on the
+ * left edge, one source handle on the right, and for component instances one
+ * pair per port spread along the height.
+ */
+
+import type { CanvasNode, CanvasPoint } from "../../../canvas-scene";
+import type { ArcEndpoints } from "./arc-paths";
+
+export type HandleKind = "source" | "target";
+
+export type CanvasHandle = {
+  nodeId: string;
+  kind: HandleKind;
+  /** The port place id for component instance handles, null otherwise. */
+  portId: string | null;
+  position: CanvasPoint;
+};
+
+/** Diameter of a place or transition handle, as React Flow styles them. */
+export const handleSize = 9;
+
+/** Diameter of a component instance port handle. */
+export const portHandleSize = 10;
+
+/** How far from a handle's centre a press still grabs it. */
+export const handleHitRadius = 8;
+
+const portFraction = (index: number, count: number) =>
+  count === 1 ? 0.5 : index / (count - 1);
+
+export const handlesOf = (node: CanvasNode): CanvasHandle[] => {
+  const left = node.position.x - node.width / 2;
+  const right = node.position.x + node.width / 2;
+  const top = node.position.y - node.height / 2;
+
+  if (node.kind !== "componentInstance") {
+    return [
+      {
+        nodeId: node.id,
+        kind: "target",
+        portId: null,
+        position: { x: left, y: node.position.y },
+      },
+      {
+        nodeId: node.id,
+        kind: "source",
+        portId: null,
+        position: { x: right, y: node.position.y },
+      },
+    ];
+  }
+
+  return node.ports.flatMap((port, index) => {
+    const y = top + portFraction(index, node.ports.length) * node.height;
+    return [
+      {
+        nodeId: node.id,
+        kind: "target",
+        portId: port.id,
+        position: { x: left, y },
+      },
+      {
+        nodeId: node.id,
+        kind: "source",
+        portId: port.id,
+        position: { x: right, y },
+      },
+    ];
+  });
+};
+
+const handleAt = (
+  node: CanvasNode,
+  kind: HandleKind,
+  portId: string | null,
+): CanvasPoint => {
+  const handle = handlesOf(node).find(
+    (candidate) => candidate.kind === kind && candidate.portId === portId,
+  );
+  return handle?.position ?? node.position;
+};
+
+/** The handle centres an arc runs between. */
+export const arcEndpointsOf = (
+  source: CanvasNode,
+  sourcePortId: string | null,
+  target: CanvasNode,
+  targetPortId: string | null,
+): ArcEndpoints => ({
+  source: handleAt(source, "source", sourcePortId),
+  target: handleAt(target, "target", targetPortId),
+});
+
+/** Classic places are drawn as circles; every other node is a box. */
+export const isRoundNode = (node: CanvasNode): boolean =>
+  node.kind === "place" && node.width === node.height;
+
+export const nodeContains = (node: CanvasNode, point: CanvasPoint): boolean => {
+  const dx = point.x - node.position.x;
+  const dy = point.y - node.position.y;
+  if (isRoundNode(node)) {
+    const radius = node.width / 2;
+    return dx * dx + dy * dy <= radius * radius;
+  }
+  return Math.abs(dx) <= node.width / 2 && Math.abs(dy) <= node.height / 2;
+};
+
+export type CanvasRect = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+export const nodeBounds = (node: CanvasNode): CanvasRect => ({
+  x: node.position.x - node.width / 2,
+  y: node.position.y - node.height / 2,
+  width: node.width,
+  height: node.height,
+});
+
+const intersects = (first: CanvasRect, second: CanvasRect): boolean =>
+  first.x < second.x + second.width &&
+  first.x + first.width > second.x &&
+  first.y < second.y + second.height &&
+  first.y + first.height > second.y;
+
+const contains = (outer: CanvasRect, inner: CanvasRect): boolean =>
+  inner.x >= outer.x &&
+  inner.y >= outer.y &&
+  inner.x + inner.width <= outer.x + outer.width &&
+  inner.y + inner.height <= outer.y + outer.height;
+
+/** Nodes a selection box picks: touching it when partial, enclosed otherwise. */
+export const nodesInSelectionBox = (
+  nodes: CanvasNode[],
+  box: CanvasRect,
+  partial: boolean,
+): CanvasNode[] =>
+  nodes.filter((node) =>
+    partial
+      ? intersects(nodeBounds(node), box)
+      : contains(box, nodeBounds(node)),
+  );
+
+/** The topmost node under a point; later nodes draw on top. */
+export const nodeAt = (
+  nodes: CanvasNode[],
+  point: CanvasPoint,
+): CanvasNode | null => {
+  for (let index = nodes.length - 1; index >= 0; index--) {
+    const node = nodes[index]!;
+    if (nodeContains(node, point)) return node;
+  }
+  return null;
+};
+
+/** The handle within `radius` of a point, preferring the closest. */
+export const handleAtPoint = (
+  nodes: CanvasNode[],
+  point: CanvasPoint,
+  radius: number,
+): CanvasHandle | null => {
+  let best: CanvasHandle | null = null;
+  let bestDistance = radius;
+  for (const node of nodes) {
+    for (const handle of handlesOf(node)) {
+      const distance = Math.hypot(
+        handle.position.x - point.x,
+        handle.position.y - point.y,
+      );
+      if (distance <= bestDistance) {
+        best = handle;
+        bestDistance = distance;
+      }
+    }
+  }
+  return best;
+};
diff --git a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/pixi/pixi-canvas/pixi-animator.tsx b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/pixi/pixi-canvas/pixi-animator.tsx
new file mode 100644
index 00000000000..5510e118eb5
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/pixi/pixi-canvas/pixi-animator.tsx
@@ -0,0 +1,146 @@
+/**
+ * Simulation feedback on the Pixi canvas: token badges, transition flashes
+ * and arc pulses. Frames arrive through the frame store, and everything
+ * animates by mutating Pixi objects in one tick callback, so a playback frame
+ * never re-renders a node.
+ */
+
+import { useTick } from "@pixi/react";
+import { use, useEffect, useRef, type FC } from "react";
+
+import { useLatest } from "../../../../../../react/hooks/use-latest";
+import {
+  baseStrokeWidth,
+  setArcWidth,
+  uploadArcWidths,
+  type ArcBatch,
+} from "./pixi-arcs";
+import { NodeRegistryContext } from "./pixi-nodes";
+import { lerpColor, transitionFlash } from "./pixi-theme";
+
+import type { CanvasScene } from "../../../canvas-scene";
+import type { FrameStore } from "./frame-store";
+
+const pulseDurationMs = 500;
+const flashDurationMs = 300;
+const boltDurationMs = flashDurationMs * 3;
+const maxPulseWidth = 65;
+const white = 0xffffff;
+
+type Pulse = { start: number; transitionsAnimating: number; weight: number };
+
+const easeOut = (t: number) => 1 - (1 - t) * (1 - t);
+
+/** The flash colour as it appears over a white card. */
+const flashTint = lerpColor(
+  white,
+  transitionFlash.color,
+  transitionFlash.alpha,
+);
+
+/** Stroke width at the start of a pulse, growing with the log of the firings and the weight. */
+const peakWidth = (transitions: number, weight: number) =>
+  Math.min(
+    maxPulseWidth,
+    baseStrokeWidth + Math.log(1 + transitions) * Math.min(6 * weight, 25),
+  );
+
+export const PixiAnimator: FC<{
+  scene: CanvasScene;
+  frames: FrameStore;
+  batchRef: React.RefObject<ArcBatch | null>;
+}> = ({ scene, frames, batchRef }) => {
+  const registry = use(NodeRegistryContext);
+  const firingCounts = useRef(new Map<string, number>());
+  const pulses = useRef(new Map<number, Pulse>());
+  const flashes = useRef(new Map<string, number>());
+  const latestScene = useLatest(scene);
+
+  useEffect(() => {
+    return frames.subscribe(() => {
+      const { frameReader, tokenCountOf } = frames.get();
+      const now = performance.now();
+      const current = latestScene.current;
+
+      for (const node of current.nodes) {
+        if (node.kind === "place") {
+          const handles = registry?.get(node.id);
+          const count = tokenCountOf(node.id);
+          if (handles?.badgeGroup) handles.badgeGroup.visible = count !== null;
+          if (handles?.badge && count !== null) {
+            handles.badge.text = String(count);
+          }
+          continue;
+        }
+        if (node.kind !== "transition") continue;
+
+        // A firing is a rise in the count between two observed frames. The
+        // first observation and drops (scrubbing back, a new run) start no
+        // animation, matching the React Flow nodes.
+        const count =
+          frameReader?.getTransitionState(node.id)?.firingCount ?? null;
+        if (count === null) continue;
+        const previous = firingCounts.current.get(node.id);
+        firingCounts.current.set(node.id, count);
+        if (previous === undefined || count <= previous) continue;
+        const delta = count - previous;
+
+        flashes.current.set(node.id, now);
+        const batch = batchRef.current;
+        if (!batch) continue;
+        for (const arc of current.arcs) {
+          if (arc.transitionId !== node.id) continue;
+          const arcIndex = batch.indexOf.get(arc.id);
+          if (arcIndex === undefined) continue;
+          // A pulse landing on a running one carries the remaining width forward.
+          const running = pulses.current.get(arcIndex);
+          const remaining = running
+            ? running.transitionsAnimating *
+              (1 - Math.min(1, (now - running.start) / pulseDurationMs))
+            : 0;
+          pulses.current.set(arcIndex, {
+            start: now,
+            transitionsAnimating: delta + remaining,
+            weight: arc.weight,
+          });
+        }
+      }
+    });
+  }, [frames, registry, batchRef, latestScene]);
+
+  useTick(() => {
+    const now = performance.now();
+
+    const batch = batchRef.current;
+    if (batch && pulses.current.size > 0) {
+      for (const [arcIndex, pulse] of pulses.current) {
+        const progress = Math.min(1, (now - pulse.start) / pulseDurationMs);
+        const peak = peakWidth(pulse.transitionsAnimating, pulse.weight);
+        setArcWidth(
+          batch,
+          arcIndex,
+          baseStrokeWidth + (peak - baseStrokeWidth) * (1 - easeOut(progress)),
+        );
+        if (progress >= 1) pulses.current.delete(arcIndex);
+      }
+      uploadArcWidths(batch, pulses.current.keys());
+    }
+
+    for (const [nodeId, start] of flashes.current) {
+      const handles = registry?.get(nodeId);
+      const elapsed = now - start;
+      const flashProgress = Math.min(1, elapsed / flashDurationMs);
+      const boltProgress = Math.min(1, elapsed / boltDurationMs);
+      if (handles?.fill) {
+        handles.fill.tint = lerpColor(flashTint, white, easeOut(flashProgress));
+      }
+      if (handles?.bolt) {
+        handles.bolt.alpha = 1 - easeOut(boltProgress);
+        handles.bolt.scale.set(1 - 0.5 * easeOut(boltProgress));
+      }
+      if (boltProgress >= 1) flashes.current.delete(nodeId);
+    }
+  });
+
+  return null;
+};
diff --git a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/pixi/pixi-canvas/pixi-arcs.tsx b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/pixi/pixi-canvas/pixi-arcs.tsx
new file mode 100644
index 00000000000..d81ea4d22c3
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/pixi/pixi-canvas/pixi-arcs.tsx
@@ -0,0 +1,553 @@
+/**
+ * Arcs as one Pixi mesh: every arc's ribbon and arrow head in a shared
+ * geometry with per-vertex colour and width, so a firing pulse rewrites a
+ * few floats instead of re-tessellating a stroke. Selection halos, read and
+ * inhibitor markers and weight labels are few and drawn with Graphics.
+ */
+
+import {
+  Buffer as PixiBuffer,
+  BufferUsage,
+  Container,
+  Geometry,
+  Graphics,
+  Mesh,
+  Shader,
+} from "pixi.js";
+import { useLayoutEffect, useRef, type FC } from "react";
+
+import { useLatest } from "../../../../../../react/hooks/use-latest";
+import { pointAlong, polylineLength, type ArcPolyline } from "./arc-paths";
+import { pixiLabelBoldFont, pixiLabelFont } from "./pixi-fonts";
+import {
+  arcSelectionHalo,
+  colorChannels,
+  dimmedAlpha,
+  weightLabelBorder,
+  weightSymbolColor,
+  weightTextColor,
+  type PixiTheme,
+} from "./pixi-theme";
+
+import type {
+  CanvasArc,
+  CanvasPoint,
+  CanvasScene,
+} from "../../../canvas-scene";
+import type { ArcPolylines } from "./arc-polylines";
+
+export const baseStrokeWidth = 2;
+
+/** Vertices per arc: the ribbon can hold this many polyline points. */
+const maxPolylinePoints = 64;
+const ribbonVertices = maxPolylinePoints * 2;
+const arrowVertices = 3;
+const arcVertices = ribbonVertices + arrowVertices;
+const arcIndices = (maxPolylinePoints - 1) * 6 + 3;
+
+const arrowLength = 12;
+const arrowHalfWidth = 5;
+const readMarkerRadius = 4;
+const inhibitorMarkerRadius = 10;
+const inhibitorTickSpacing = 13;
+const inhibitorTickHalfLength = 5;
+/** Read arcs draw dashed "2 6": two units on, six off. */
+const readDashOn = 2;
+const readDashPeriod = 8;
+
+// Buffer usage flags are powers of two, so adding them combines them.
+const dynamicVertexUsage = BufferUsage.VERTEX + BufferUsage.COPY_DST;
+const dynamicIndexUsage = BufferUsage.INDEX + BufferUsage.COPY_DST;
+
+// Each ribbon vertex carries its centreline point, a unit normal, a width,
+// its distance along the arc, a dash flag and a colour. The shader offsets
+// the point by half the width along the normal.
+const arcVertexShader = /* glsl */ `
+  in vec2 aPosition;
+  in vec2 aNormal;
+  in float aWidth;
+  in float aDistance;
+  in float aDash;
+  in vec4 aColor;
+  out float vDistance;
+  out float vDash;
+  out vec4 vColor;
+  uniform mat3 uProjectionMatrix;
+  uniform mat3 uWorldTransformMatrix;
+  uniform mat3 uTransformMatrix;
+  void main() {
+    vec2 position = aPosition + aNormal * (aWidth * 0.5);
+    mat3 mvp = uProjectionMatrix * uWorldTransformMatrix * uTransformMatrix;
+    gl_Position = vec4((mvp * vec3(position, 1.0)).xy, 0.0, 1.0);
+    vDistance = aDistance;
+    vDash = aDash;
+    vColor = aColor;
+  }
+`;
+
+const arcFragmentShader = /* glsl */ `
+  in float vDistance;
+  in float vDash;
+  in vec4 vColor;
+  out vec4 finalColor;
+  void main() {
+    if (vDash > 0.5 && mod(vDistance, ${readDashPeriod.toFixed(1)}) > ${readDashOn.toFixed(1)}) discard;
+    finalColor = vec4(vColor.rgb * vColor.a, vColor.a);
+  }
+`;
+
+export type ArcBatch = {
+  arcs: CanvasArc[];
+  indexOf: Map<string, number>;
+  mesh: Mesh<Geometry, Shader>;
+  positions: Float32Array;
+  normals: Float32Array;
+  widths: Float32Array;
+  distances: Float32Array;
+  dashes: Float32Array;
+  colors: Float32Array;
+  buffers: Record<
+    "position" | "normal" | "width" | "distance" | "dash" | "color",
+    PixiBuffer
+  >;
+};
+
+const vertexBuffer = (data: Float32Array) =>
+  new PixiBuffer({ data, usage: dynamicVertexUsage });
+
+// Pixi uploads one byte range per update and remembers the last size, so every
+// upload states its range explicitly.
+const uploadAll = (buffer: PixiBuffer) =>
+  buffer.update(buffer.data.byteLength, 0);
+const uploadArcs = (
+  buffer: PixiBuffer,
+  floatsPerVertex: number,
+  first: number,
+  count: number,
+) =>
+  buffer.update(
+    count * arcVertices * floatsPerVertex * 4,
+    first * arcVertices * floatsPerVertex * 4,
+  );
+
+const arcSpan = (
+  indices: Iterable<number>,
+): { first: number; count: number } => {
+  let min = Infinity;
+  let max = -Infinity;
+  for (const index of indices) {
+    min = Math.min(min, index);
+    max = Math.max(max, index);
+  }
+  return { first: min, count: max - min + 1 };
+};
+
+const createArcBatch = (arcs: CanvasArc[]): ArcBatch => {
+  const vertexCount = arcs.length * arcVertices;
+  const positions = new Float32Array(vertexCount * 2);
+  const normals = new Float32Array(vertexCount * 2);
+  const widths = new Float32Array(vertexCount).fill(baseStrokeWidth);
+  const distances = new Float32Array(vertexCount);
+  const dashes = new Float32Array(vertexCount);
+  const colors = new Float32Array(vertexCount * 4);
+  const indices = new Uint32Array(arcs.length * arcIndices);
+
+  arcs.forEach((_, arcIndex) => {
+    const base = arcIndex * arcVertices;
+    let offset = arcIndex * arcIndices;
+    for (let segment = 0; segment < maxPolylinePoints - 1; segment++) {
+      const left = base + segment * 2;
+      indices[offset++] = left;
+      indices[offset++] = left + 1;
+      indices[offset++] = left + 2;
+      indices[offset++] = left + 1;
+      indices[offset++] = left + 3;
+      indices[offset++] = left + 2;
+    }
+    indices[offset++] = base + ribbonVertices;
+    indices[offset++] = base + ribbonVertices + 1;
+    indices[offset++] = base + ribbonVertices + 2;
+  });
+
+  const buffers = {
+    position: vertexBuffer(positions),
+    normal: vertexBuffer(normals),
+    width: vertexBuffer(widths),
+    distance: vertexBuffer(distances),
+    dash: vertexBuffer(dashes),
+    color: vertexBuffer(colors),
+  };
+  const geometry = new Geometry({
+    attributes: {
+      aPosition: buffers.position,
+      aNormal: buffers.normal,
+      aWidth: buffers.width,
+      aDistance: buffers.distance,
+      aDash: buffers.dash,
+      aColor: buffers.color,
+    },
+    indexBuffer: new PixiBuffer({ data: indices, usage: dynamicIndexUsage }),
+  });
+  const shader = Shader.from({
+    gl: {
+      vertex: arcVertexShader,
+      fragment: arcFragmentShader,
+      name: "petrinaut-arc-ribbon",
+    },
+  });
+  const mesh = new Mesh<Geometry, Shader>({ geometry, shader });
+  mesh.eventMode = "none";
+  return {
+    arcs,
+    indexOf: new Map(arcs.map((arc, index) => [arc.id, index])),
+    mesh,
+    positions,
+    normals,
+    widths,
+    distances,
+    dashes,
+    colors,
+    buffers,
+  };
+};
+
+// Destroying the mesh drops its references, so its parts are taken first.
+const destroyArcBatch = (batch: ArcBatch) => {
+  const { geometry, shader } = batch.mesh;
+  batch.mesh.destroy();
+  geometry.destroy();
+  shader?.destroy();
+};
+
+/** Length of the arc the arrow head or marker takes up at the target end. */
+const markerInset = (arc: CanvasArc) =>
+  arc.kind === "inhibitor"
+    ? inhibitorMarkerRadius * 2
+    : arc.kind === "read"
+      ? readMarkerRadius
+      : arrowLength;
+
+/**
+ * Writes one arc's ribbon and arrow head. The polyline is resampled to the
+ * fixed vertex budget and stops short of the marker at the target end. Read
+ * and inhibitor markers are Graphics, so their arrow triangles collapse.
+ */
+const writeArc = (
+  batch: ArcBatch,
+  arcIndex: number,
+  arc: CanvasArc,
+  polyline: ArcPolyline,
+  theme: PixiTheme,
+) => {
+  const { positions, normals, distances, dashes, colors } = batch;
+  const base = arcIndex * arcVertices;
+  const total = polylineLength(polyline.points);
+  const usable = Math.max(0, total - markerInset(arc));
+  const { color, alpha } = theme.color(arc.color);
+  const [red, green, blue] = colorChannels(color).map(
+    (channel) => channel / 255,
+  ) as [number, number, number];
+  const finalAlpha = alpha * (arc.dimmed ? dimmedAlpha : 1);
+  const rgba = [red, green, blue, finalAlpha];
+
+  for (let index = 0; index < maxPolylinePoints; index++) {
+    const distance = (usable * index) / (maxPolylinePoints - 1);
+    const { point, tangent } = pointAlong(polyline.points, distance);
+    const normal = { x: -tangent.y, y: tangent.x };
+    for (const side of [1, -1]) {
+      const vertex = base + index * 2 + (side === 1 ? 0 : 1);
+      positions[vertex * 2] = point.x;
+      positions[vertex * 2 + 1] = point.y;
+      normals[vertex * 2] = normal.x * side;
+      normals[vertex * 2 + 1] = normal.y * side;
+      distances[vertex] = distance;
+      dashes[vertex] = arc.kind === "read" ? 1 : 0;
+      colors.set(rgba, vertex * 4);
+    }
+  }
+
+  const end = polyline.points[polyline.points.length - 1]!;
+  const tangent = polyline.endTangent;
+  const normal = { x: -tangent.y, y: tangent.x };
+  const tail = {
+    x: end.x - tangent.x * arrowLength,
+    y: end.y - tangent.y * arrowLength,
+  };
+  const corners =
+    arc.kind === "standard"
+      ? [
+          end,
+          {
+            x: tail.x + normal.x * arrowHalfWidth,
+            y: tail.y + normal.y * arrowHalfWidth,
+          },
+          {
+            x: tail.x - normal.x * arrowHalfWidth,
+            y: tail.y - normal.y * arrowHalfWidth,
+          },
+        ]
+      : [end, end, end];
+  corners.forEach((corner, cornerIndex) => {
+    const vertex = base + ribbonVertices + cornerIndex;
+    positions[vertex * 2] = corner.x;
+    positions[vertex * 2 + 1] = corner.y;
+    normals[vertex * 2] = 0;
+    normals[vertex * 2 + 1] = 0;
+    dashes[vertex] = 0;
+    colors.set(rgba, vertex * 4);
+  });
+};
+
+/** Sets an arc's ribbon width; the animator calls this every frame for pulsing arcs. */
+export const setArcWidth = (
+  batch: ArcBatch,
+  arcIndex: number,
+  width: number,
+) => {
+  const base = arcIndex * arcVertices;
+  batch.widths.fill(width, base, base + ribbonVertices);
+};
+
+export const uploadArcWidths = (
+  batch: ArcBatch,
+  arcIndexes: Iterable<number>,
+) => {
+  const { first, count } = arcSpan(arcIndexes);
+  if (count > 0) uploadArcs(batch.buffers.width, 1, first, count);
+};
+
+const uploadArcGeometry = (batch: ArcBatch) => {
+  for (const buffer of Object.values(batch.buffers)) uploadAll(buffer);
+};
+
+const arcListKey = (arcs: CanvasArc[]) => arcs.map((arc) => arc.id).join(" ");
+
+/**
+ * The ribbon mesh for every arc. The mesh is an imperative child of this
+ * layer: the batch is rebuilt when arcs are added or removed and rewritten in
+ * place when only geometry, colours or dimming change. `onBatchChange`
+ * announces the live batch, so the animator can write widths into it.
+ */
+export const PixiArcMesh: FC<{
+  scene: CanvasScene;
+  polylines: ArcPolylines;
+  theme: PixiTheme;
+  onBatchChange: (batch: ArcBatch | null) => void;
+}> = ({ scene, polylines, theme, onBatchChange }) => {
+  const layerRef = useRef<Container>(null);
+  const batchRef = useRef<ArcBatch | null>(null);
+  const latestArcs = useLatest(scene.arcs);
+  const notifyBatch = useLatest(onBatchChange);
+  const structureKey = arcListKey(scene.arcs);
+
+  useLayoutEffect(() => {
+    const layer = layerRef.current;
+    if (!layer) return;
+    const announce = notifyBatch.current;
+    const batch = createArcBatch(latestArcs.current);
+    layer.addChild(batch.mesh);
+    batchRef.current = batch;
+    announce(batch);
+    return () => {
+      batchRef.current = null;
+      announce(null);
+      layer.removeChild(batch.mesh);
+      destroyArcBatch(batch);
+    };
+    // The key stands for the arc list; the batch is rebuilt only when that changes.
+  }, [structureKey, latestArcs, notifyBatch]);
+
+  useLayoutEffect(() => {
+    const batch = batchRef.current;
+    if (!batch) return;
+    batch.arcs.forEach((arc, arcIndex) => {
+      const polyline = polylines.get(arc.id);
+      if (polyline) writeArc(batch, arcIndex, arc, polyline, theme);
+    });
+    uploadArcGeometry(batch);
+  }, [scene, polylines, theme]);
+
+  return <pixiContainer ref={layerRef} eventMode="none" />;
+};
+
+// Decorations ----------------------------------------------------------------------
+
+const drawSelectionHalos = (
+  graphics: Graphics,
+  scene: CanvasScene,
+  polylines: ArcPolylines,
+) => {
+  graphics.clear();
+  for (const arc of scene.arcs) {
+    if (!arc.selected) continue;
+    const points = polylines.get(arc.id)?.points;
+    if (!points || points.length < 2) continue;
+    graphics.moveTo(points[0]!.x, points[0]!.y);
+    for (const point of points.slice(1)) graphics.lineTo(point.x, point.y);
+    graphics.stroke({
+      color: arcSelectionHalo.color,
+      alpha: arcSelectionHalo.alpha,
+      width: arcSelectionHalo.width,
+    });
+  }
+};
+
+const drawMarkers = (
+  graphics: Graphics,
+  scene: CanvasScene,
+  polylines: ArcPolylines,
+  theme: PixiTheme,
+) => {
+  graphics.clear();
+  for (const arc of scene.arcs) {
+    if (arc.kind === "standard") continue;
+    const polyline = polylines.get(arc.id);
+    if (!polyline) continue;
+    const end = polyline.points[polyline.points.length - 1]!;
+    const { color, alpha } = theme.color(arc.color);
+    const finalAlpha = alpha * (arc.dimmed ? dimmedAlpha : 1);
+    if (arc.kind === "read") {
+      graphics
+        .circle(end.x, end.y, readMarkerRadius)
+        .fill({ color, alpha: finalAlpha });
+      continue;
+    }
+    // Inhibitor: hollow disc at the end, crossed by ticks along the path.
+    const center = {
+      x: end.x - polyline.endTangent.x * inhibitorMarkerRadius,
+      y: end.y - polyline.endTangent.y * inhibitorMarkerRadius,
+    };
+    graphics
+      .circle(center.x, center.y, inhibitorMarkerRadius)
+      .fill(theme["neutral.s00"])
+      .stroke({ color, alpha: finalAlpha, width: baseStrokeWidth });
+    const total = polylineLength(polyline.points);
+    const lastTick = total - (inhibitorMarkerRadius * 2 + inhibitorTickSpacing);
+    for (
+      let distance = inhibitorTickSpacing;
+      distance <= lastTick;
+      distance += inhibitorTickSpacing
+    ) {
+      const { point, tangent } = pointAlong(polyline.points, distance);
+      const normal = { x: -tangent.y, y: tangent.x };
+      graphics
+        .moveTo(
+          point.x - normal.x * inhibitorTickHalfLength,
+          point.y - normal.y * inhibitorTickHalfLength,
+        )
+        .lineTo(
+          point.x + normal.x * inhibitorTickHalfLength,
+          point.y + normal.y * inhibitorTickHalfLength,
+        )
+        .stroke({
+          color,
+          alpha: finalAlpha,
+          width: baseStrokeWidth,
+          cap: "round",
+        });
+    }
+  }
+};
+
+const weightLabelWidth = 32;
+const weightLabelHeight = 20;
+
+/** Weight labels for arcs with a weight above one: a white tag with "× n". */
+const WeightLabel: FC<{
+  arc: CanvasArc;
+  at: CanvasPoint;
+  theme: PixiTheme;
+}> = ({ arc, at, theme }) => (
+  <pixiContainer x={at.x} y={at.y} alpha={arc.dimmed ? dimmedAlpha : 1}>
+    <pixiGraphics
+      draw={(graphics) =>
+        graphics
+          .clear()
+          .roundRect(
+            -weightLabelWidth / 2,
+            -weightLabelHeight / 2,
+            weightLabelWidth,
+            weightLabelHeight,
+            3,
+          )
+          .fill(theme["neutral.s00"])
+          .stroke({ color: weightLabelBorder, width: 1 })
+      }
+    />
+    <pixiBitmapText
+      text="×"
+      x={-6}
+      anchor={0.5}
+      style={{
+        fontFamily: pixiLabelFont,
+        fontSize: 13,
+        fill: weightSymbolColor,
+      }}
+    />
+    <pixiBitmapText
+      text={String(arc.weight)}
+      x={6}
+      anchor={0.5}
+      style={{
+        fontFamily: pixiLabelBoldFont,
+        fontSize: 13,
+        fill: weightTextColor,
+      }}
+    />
+  </pixiContainer>
+);
+
+/** Everything about arcs that is not the ribbon: halos below, markers and labels above. */
+export const PixiArcDecorations: FC<{
+  scene: CanvasScene;
+  polylines: ArcPolylines;
+  theme: PixiTheme;
+  layer: "below" | "above";
+}> = ({ scene, polylines, theme, layer }) => {
+  if (layer === "below") {
+    return (
+      <pixiGraphics
+        draw={(graphics) => drawSelectionHalos(graphics, scene, polylines)}
+        eventMode="none"
+      />
+    );
+  }
+  return (
+    <>
+      <pixiGraphics
+        draw={(graphics) => drawMarkers(graphics, scene, polylines, theme)}
+        eventMode="none"
+      />
+      {scene.arcs
+        .filter((arc) => arc.weight > 1)
+        .map((arc) => {
+          const label = polylines.get(arc.id)?.label;
+          return label ? (
+            <WeightLabel key={arc.id} arc={arc} at={label} theme={theme} />
+          ) : null;
+        })}
+    </>
+  );
+};
+
+/** Live connection being dragged from a handle. */
+export const PixiConnectionLine: FC<{
+  from: CanvasPoint;
+  to: CanvasPoint;
+  valid: boolean;
+  theme: PixiTheme;
+}> = ({ from, to, valid, theme }) => (
+  <pixiGraphics
+    draw={(graphics) =>
+      graphics
+        .clear()
+        .moveTo(from.x, from.y)
+        .lineTo(to.x, to.y)
+        .stroke({
+          color: valid ? theme["blue.s110"] : theme["neutral.s90"],
+          width: baseStrokeWidth,
+        })
+    }
+    eventMode="none"
+  />
+);
diff --git a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/pixi/pixi-canvas/pixi-controller.ts b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/pixi/pixi-canvas/pixi-controller.ts
new file mode 100644
index 00000000000..fb21c70cef4
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/pixi/pixi-canvas/pixi-controller.ts
@@ -0,0 +1,57 @@
+import {
+  buttonZoomFactor,
+  sceneToScreen,
+  screenToScene,
+  zoomAt,
+  type ViewportStore,
+  type ZoomLimits,
+} from "./viewport-store";
+
+import type { CanvasController } from "../../../canvas-renderer";
+import type { Size } from "@hashintel/petrinaut-core";
+
+/**
+ * The canvas controller over the viewport store. Screen coordinates in the
+ * contract are client coordinates, so the host element's position is
+ * subtracted on the way in and added on the way out; the host is read when a
+ * method runs, never during render.
+ */
+export const usePixiController = (
+  store: ViewportStore,
+  host: React.RefObject<HTMLElement | null>,
+  containerSize: Size,
+  zoomLimits: ZoomLimits,
+): CanvasController => {
+  const hostOrigin = () => {
+    const rect = host.current?.getBoundingClientRect();
+    return { x: rect?.left ?? 0, y: rect?.top ?? 0 };
+  };
+  const zoomAroundCenter = (factor: number) => {
+    store.set(
+      zoomAt(
+        store.get(),
+        { x: containerSize.width / 2, y: containerSize.height / 2 },
+        factor,
+        zoomLimits,
+      ),
+    );
+  };
+  return {
+    getViewport: store.get,
+    setViewport: (viewport) => store.set(viewport),
+    zoomIn: () => zoomAroundCenter(buttonZoomFactor),
+    zoomOut: () => zoomAroundCenter(1 / buttonZoomFactor),
+    screenToScene: (point) => {
+      const origin = hostOrigin();
+      return screenToScene(store.get(), {
+        x: point.x - origin.x,
+        y: point.y - origin.y,
+      });
+    },
+    sceneToScreen: (point) => {
+      const origin = hostOrigin();
+      const screen = sceneToScreen(store.get(), point);
+      return { x: screen.x + origin.x, y: screen.y + origin.y };
+    },
+  };
+};
diff --git a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/pixi/pixi-canvas/pixi-fonts.ts b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/pixi/pixi-canvas/pixi-fonts.ts
new file mode 100644
index 00000000000..f2148f23af4
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/pixi/pixi-canvas/pixi-fonts.ts
@@ -0,0 +1,40 @@
+/**
+ * Bitmap fonts for the Pixi renderer. Glyphs are rasterised on demand from
+ * the editor's web font, so labels batch with everything else and any
+ * character a net uses still renders.
+ */
+
+import { BitmapFont } from "pixi.js";
+
+export const pixiLabelFont = "petrinaut-canvas-label";
+export const pixiLabelBoldFont = "petrinaut-canvas-label-bold";
+
+const fontFamily = '"Inter Variable", Inter, system-ui, sans-serif';
+
+let installed: Promise<void> | null = null;
+
+/**
+ * Installs the fonts once the web font has loaded, so the first rasterised
+ * glyphs already use it. Safe to call from every renderer mount.
+ */
+export const ensurePixiFonts = (): Promise<void> => {
+  installed ??= (async () => {
+    if (typeof document !== "undefined" && "fonts" in document) {
+      await Promise.all([
+        document.fonts.load(`500 14px ${fontFamily}`),
+        document.fonts.load(`600 14px ${fontFamily}`),
+      ]).catch(() => undefined);
+    }
+    BitmapFont.install({
+      name: pixiLabelFont,
+      style: { fontFamily, fontSize: 32, fontWeight: "500", fill: 0xffffff },
+      resolution: 2,
+    });
+    BitmapFont.install({
+      name: pixiLabelBoldFont,
+      style: { fontFamily, fontSize: 32, fontWeight: "600", fill: 0xffffff },
+      resolution: 2,
+    });
+  })();
+  return installed;
+};
diff --git a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/pixi/pixi-canvas/pixi-mini-map.tsx b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/pixi/pixi-canvas/pixi-mini-map.tsx
new file mode 100644
index 00000000000..c31d957d441
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/pixi/pixi-canvas/pixi-mini-map.tsx
@@ -0,0 +1,163 @@
+import { use, useRef, type FC } from "react";
+
+import { css } from "@hashintel/ds-helpers/css";
+import { getBoundsOfCenteredBoxes } from "@hashintel/petrinaut-core";
+
+import { EditorContext } from "../../../../../../react/state/editor-context";
+import { PANEL_MARGIN } from "../../../../../constants/ui";
+import { getViewportRect } from "../../../canvas-viewport";
+import { miniMapPlaceFillColor } from "../../../styles/type-colors";
+import { panBy, useViewport, type ViewportStore } from "./viewport-store";
+
+import type { CanvasScene } from "../../../canvas-scene";
+import type { Rect, Size } from "@hashintel/petrinaut-core";
+
+const mapWidth = 116;
+const mapHeight = 65;
+const mapOffset = 12;
+const boundsPadding = 0.1;
+
+const defaultTransitionFill = "#6b7280";
+const defaultComponentFill = "#0f766e";
+const selectedColor = "#3bb9f6";
+const maskColor = "rgba(0, 0, 0, 0.15)";
+
+const mapStyle = css({
+  position: "absolute",
+  backgroundColor: "white.a95",
+  borderRadius: "md",
+  backdropFilter: "[blur(20px)]",
+  overflow: "hidden",
+  cursor: "grab",
+  zIndex: "[4]",
+  "& svg": {
+    display: "block",
+    borderRadius: "md",
+  },
+});
+
+const union = (first: Rect, second: Rect): Rect => {
+  const x = Math.min(first.x, second.x);
+  const y = Math.min(first.y, second.y);
+  return {
+    x,
+    y,
+    width: Math.max(first.x + first.width, second.x + second.width) - x,
+    height: Math.max(first.y + first.height, second.y + second.height) - y,
+  };
+};
+
+/**
+ * Overview of the net with the visible region cut out of a shade, as the
+ * React Flow minimap draws it. Dragging the map pans the canvas.
+ */
+export const PixiMiniMap: FC<{
+  scene: CanvasScene;
+  viewport: ViewportStore;
+  containerSize: Size;
+}> = ({ scene, viewport, containerSize }) => {
+  const { hasSelection, propertiesPanelWidth, isPanelAnimating } =
+    use(EditorContext);
+  const current = useViewport(viewport);
+  const dragRef = useRef<{ x: number; y: number } | null>(null);
+
+  const visible = getViewportRect(containerSize, current);
+  const netBounds = getBoundsOfCenteredBoxes(scene.nodes) ?? visible;
+  const shown = union(netBounds, visible);
+  const padX = shown.width * boundsPadding;
+  const padY = shown.height * boundsPadding;
+  const viewBox = {
+    x: shown.x - padX,
+    y: shown.y - padY,
+    width: shown.width + 2 * padX,
+    height: shown.height + 2 * padY,
+  };
+  // Scene units per map pixel, so dragging the map pans the canvas in step.
+  const scale = Math.max(viewBox.width / mapWidth, viewBox.height / mapHeight);
+
+  const panelOffset = hasSelection ? propertiesPanelWidth + PANEL_MARGIN : 0;
+
+  const onPointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
+    event.currentTarget.setPointerCapture(event.pointerId);
+    dragRef.current = { x: event.clientX, y: event.clientY };
+  };
+  const onPointerMove = (event: React.PointerEvent<HTMLDivElement>) => {
+    const last = dragRef.current;
+    if (!last) return;
+    // Moving the map view rightwards means the canvas content moves leftwards.
+    const delta = {
+      x: -(event.clientX - last.x) * scale * current.zoom,
+      y: -(event.clientY - last.y) * scale * current.zoom,
+    };
+    viewport.set(panBy(current, delta));
+    dragRef.current = { x: event.clientX, y: event.clientY };
+  };
+  const onPointerUp = () => {
+    dragRef.current = null;
+  };
+
+  return (
+    <div
+      className={mapStyle}
+      style={{
+        top: mapOffset,
+        right: mapOffset + panelOffset,
+        width: mapWidth,
+        height: mapHeight,
+        transition: isPanelAnimating ? "right 150ms ease-in-out" : undefined,
+      }}
+      onPointerDown={onPointerDown}
+      onPointerMove={onPointerMove}
+      onPointerUp={onPointerUp}
+      onPointerCancel={onPointerUp}
+    >
+      <svg
+        width={mapWidth}
+        height={mapHeight}
+        viewBox={`${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`}
+        preserveAspectRatio="xMidYMid meet"
+      >
+        {scene.nodes.map((node) => {
+          const fill =
+            node.kind === "place"
+              ? miniMapPlaceFillColor(node.typeColor)
+              : node.kind === "componentInstance"
+                ? defaultComponentFill
+                : defaultTransitionFill;
+          const color = node.selected ? selectedColor : fill;
+          const stroke = node.selected ? selectedColor : "none";
+          return node.kind === "place" ? (
+            <circle
+              key={node.id}
+              cx={node.position.x}
+              cy={node.position.y}
+              r={Math.max(node.width, node.height) / 2}
+              fill={color}
+              stroke={stroke}
+              strokeWidth={12}
+              strokeOpacity={0.4}
+            />
+          ) : (
+            <rect
+              key={node.id}
+              x={node.position.x - node.width / 2}
+              y={node.position.y - node.height / 2}
+              width={node.width}
+              height={node.height}
+              rx={node.kind === "componentInstance" ? 12 : 0}
+              fill={color}
+              stroke={stroke}
+              strokeWidth={12}
+              strokeOpacity={0.4}
+            />
+          );
+        })}
+        <path
+          fill={maskColor}
+          fillRule="evenodd"
+          d={`M${viewBox.x - viewBox.width},${viewBox.y - viewBox.height}h${viewBox.width * 3}v${viewBox.height * 3}h${-viewBox.width * 3}z M${visible.x},${visible.y}h${visible.width}v${visible.height}h${-visible.width}z`}
+        />
+      </svg>
+    </div>
+  );
+};
diff --git a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/pixi/pixi-canvas/pixi-nodes.tsx b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/pixi/pixi-canvas/pixi-nodes.tsx
new file mode 100644
index 00000000000..42f1aeb53a4
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/pixi/pixi-canvas/pixi-nodes.tsx
@@ -0,0 +1,623 @@
+/**
+ * Nodes as Pixi display objects, in the compact card and classic shapes the
+ * React Flow node components draw. Each node is a small tree of Graphics and
+ * bitmap text; only the node whose scene entry changed redraws.
+ */
+
+import {
+  BitmapText,
+  Container,
+  Graphics,
+  type TextStyleOptions,
+} from "pixi.js";
+import { createContext, use, useEffect, useRef, type FC } from "react";
+
+import { splitPascalCase } from "../../../../../lib/split-pascal-case";
+import { placeBorderColor, placeFillColor } from "../../../styles/type-colors";
+import {
+  handlesOf,
+  handleSize,
+  isRoundNode,
+  portHandleSize,
+} from "./node-geometry";
+import { pixiLabelBoldFont, pixiLabelFont } from "./pixi-fonts";
+import {
+  dimmedAlpha,
+  handleColor,
+  hoverOutline,
+  iconBorder,
+  selectionOutline,
+  tokenBadgeColor,
+  untypedClassicPlaceBorder,
+  type PixiTheme,
+} from "./pixi-theme";
+
+import type {
+  CanvasComponentInstanceNode,
+  CanvasNode,
+  CanvasPlaceNode,
+  CanvasTransitionNode,
+} from "../../../canvas-scene";
+
+// Registry -----------------------------------------------------------------------
+
+/** Live objects the animator mutates without re-rendering the node. */
+export type NodeHandles = {
+  /** The card or shape fill; flashes on firing. */
+  fill: Graphics | null;
+  /** Lightning bolt shown while a transition fires. */
+  bolt: Container | null;
+  /** Token count badge for places. */
+  badge: BitmapText | null;
+  badgeGroup: Container | null;
+};
+
+export type NodeRegistry = Map<string, NodeHandles>;
+
+export const NodeRegistryContext = createContext<NodeRegistry | null>(null);
+
+const useNodeRegistry = (): NodeRegistry => {
+  const registry = use(NodeRegistryContext);
+  if (!registry)
+    throw new Error("Pixi nodes must be rendered inside the Pixi world");
+  return registry;
+};
+
+export const PixiThemeContext = createContext<PixiTheme | null>(null);
+
+const useTheme = (): PixiTheme => {
+  const theme = use(PixiThemeContext);
+  if (!theme)
+    throw new Error("Pixi nodes must be rendered inside the Pixi world");
+  return theme;
+};
+
+// Styling ------------------------------------------------------------------------
+
+const textStyle = (
+  fontSize: number,
+  fill: number,
+  options: Partial<TextStyleOptions> = {},
+): TextStyleOptions => ({
+  fontFamily: pixiLabelFont,
+  fontSize,
+  fill,
+  ...options,
+});
+
+const boldTextStyle = (
+  fontSize: number,
+  fill: number,
+  options: Partial<TextStyleOptions> = {},
+): TextStyleOptions => ({
+  ...textStyle(fontSize, fill, options),
+  fontFamily: pixiLabelBoldFont,
+});
+
+/** Approximate CSS `text-overflow: ellipsis` for a single line. */
+const truncate = (text: string, maxWidth: number, fontSize: number): string => {
+  const averageGlyph = fontSize * 0.55;
+  const maxChars = Math.max(1, Math.floor(maxWidth / averageGlyph));
+  return text.length > maxChars ? `${text.slice(0, maxChars - 1)}…` : text;
+};
+
+type Look = { selected: boolean; hovered: boolean };
+
+/** Outline outside the shape: 4px, blue when selected, faint when hovered. */
+const strokeOutline = (
+  graphics: Graphics,
+  look: Look,
+  draw: (graphics: Graphics, inset: number) => Graphics,
+) => {
+  if (!look.selected && !look.hovered) return;
+  const outline = look.selected ? selectionOutline : hoverOutline;
+  draw(graphics, -outline.width / 2).stroke({
+    color: outline.color,
+    alpha: outline.alpha,
+    width: outline.width,
+  });
+};
+
+const drawHandles = (graphics: Graphics, node: CanvasNode) => {
+  const size = node.kind === "componentInstance" ? portHandleSize : handleSize;
+  for (const handle of handlesOf(node)) {
+    graphics
+      .circle(
+        handle.position.x - node.position.x,
+        handle.position.y - node.position.y,
+        size / 2,
+      )
+      .fill(handleColor);
+  }
+};
+
+// Compact cards ------------------------------------------------------------------
+
+const cardPadding = 4;
+const iconBoxSize = 40;
+const compactTitleSize = 14;
+const compactSubtitleSize = 12;
+
+const drawCompactCard = (
+  graphics: Graphics,
+  node: CanvasPlaceNode | CanvasTransitionNode,
+  theme: PixiTheme,
+  look: Look,
+) => {
+  graphics.clear();
+  const width = node.width;
+  const height = node.height;
+  const radius = node.kind === "place" ? height / 2 : 6;
+  const isPlace = node.kind === "place";
+  const fill = isPlace
+    ? theme.color(placeFillColor(node.typeColor))
+    : { color: theme["neutral.s00"], alpha: 1 };
+  const border = isPlace
+    ? placeBorderColor(node.typeColor)
+      ? theme.color(placeBorderColor(node.typeColor)!)
+      : { color: theme["neutral.s120"], alpha: 1 }
+    : {
+        color: look.hovered ? theme["neutral.s100"] : theme["neutral.s70"],
+        alpha: 1,
+      };
+
+  const card = (target: Graphics, inset: number) =>
+    target.roundRect(
+      -width / 2 - inset,
+      -height / 2 - inset,
+      width + 2 * inset,
+      height + 2 * inset,
+      radius - inset,
+    );
+
+  strokeOutline(graphics, look, card);
+  card(graphics, 0)
+    .fill(fill)
+    .stroke({ color: border.color, alpha: border.alpha, width: 1 });
+
+  // Icon box at the left edge, round for places and square for transitions.
+  const iconX = -width / 2 + cardPadding;
+  const iconY = -iconBoxSize / 2;
+  const iconRadius = isPlace ? iconBoxSize / 2 : 0;
+  graphics
+    .roundRect(iconX, iconY, iconBoxSize, iconBoxSize, iconRadius)
+    .fill(theme["neutral.s10"])
+    .stroke({ color: iconBorder.color, alpha: iconBorder.alpha, width: 1 });
+  const iconColor = isPlace
+    ? placeBorderColor(node.typeColor)
+      ? theme.color(placeBorderColor(node.typeColor)!).color
+      : theme["neutral.s80"]
+    : theme["neutral.s80"];
+  const iconCenterX = iconX + iconBoxSize / 2;
+  if (isPlace) {
+    graphics.circle(iconCenterX, 0, 7).fill(iconColor);
+  } else {
+    graphics.rect(iconCenterX - 7, -7, 14, 14).fill(iconColor);
+  }
+  drawHandles(graphics, node);
+};
+
+const compactSubtitle = (
+  node: CanvasPlaceNode | CanvasTransitionNode,
+): string => {
+  if (node.kind === "place")
+    return node.dynamicsEnabled ? "Place (Dynamics)" : "Place";
+  return node.lambdaType === "none"
+    ? "Transition"
+    : node.lambdaType === "stochastic"
+      ? "Stochastic"
+      : "Predicate";
+};
+
+// Classic shapes -----------------------------------------------------------------
+
+const classicLabelSize = 15;
+
+const drawClassicPlace = (
+  graphics: Graphics,
+  node: CanvasPlaceNode,
+  theme: PixiTheme,
+  look: Look,
+) => {
+  graphics.clear();
+  const radius = node.width / 2;
+  const fill = theme.color(placeFillColor(node.typeColor));
+  const border = placeBorderColor(node.typeColor)
+    ? theme.color(placeBorderColor(node.typeColor)!)
+    : { color: untypedClassicPlaceBorder, alpha: 1 };
+  strokeOutline(graphics, look, (target, inset) =>
+    target.circle(0, 0, radius - inset),
+  );
+  graphics
+    .circle(0, 0, radius)
+    .fill(fill)
+    .stroke({ color: border.color, alpha: border.alpha, width: 2 });
+  drawHandles(graphics, node);
+};
+
+const drawClassicTransition = (
+  graphics: Graphics,
+  node: CanvasTransitionNode,
+  theme: PixiTheme,
+  look: Look,
+) => {
+  graphics.clear();
+  const { width, height } = node;
+  const box = (target: Graphics, inset: number) =>
+    target.roundRect(
+      -width / 2 - inset,
+      -height / 2 - inset,
+      width + 2 * inset,
+      height + 2 * inset,
+      12 - inset,
+    );
+  strokeOutline(graphics, look, box);
+  box(graphics, 0)
+    .fill(theme["neutral.s10"])
+    .stroke({
+      color: look.hovered ? theme["neutral.s90"] : theme["neutral.s80"],
+      width: 2,
+    });
+  drawHandles(graphics, node);
+};
+
+// Component instances ------------------------------------------------------------
+
+const drawComponentInstance = (
+  graphics: Graphics,
+  node: CanvasComponentInstanceNode,
+  theme: PixiTheme,
+  look: Look,
+) => {
+  graphics.clear();
+  const { width, height } = node;
+  const box = (target: Graphics, inset: number) =>
+    target.roundRect(
+      -width / 2 - inset,
+      -height / 2 - inset,
+      width + 2 * inset,
+      height + 2 * inset,
+      4,
+    );
+  strokeOutline(graphics, look, box);
+  box(graphics, 0)
+    .fill(theme["neutral.s15"])
+    .stroke({ color: theme["neutral.s60"], width: 2 });
+  // Cube icon: a small rhombus above the title.
+  const iconY = -height / 2 + 18;
+  graphics
+    .poly([
+      0,
+      iconY - 8,
+      8,
+      iconY - 4,
+      8,
+      iconY + 4,
+      0,
+      iconY + 8,
+      -8,
+      iconY + 4,
+      -8,
+      iconY - 4,
+    ])
+    .stroke({ color: theme["neutral.s90"], width: 1.5 });
+  drawHandles(graphics, node);
+};
+
+// Components ---------------------------------------------------------------------
+
+const noRef: React.RefObject<null> = { current: null };
+
+/** Publishes this node's animated objects to the registry for its lifetime. */
+const useRegisteredHandles = (
+  nodeId: string,
+  fillRef: React.RefObject<Graphics | null>,
+  boltRef: React.RefObject<Container | null> = noRef,
+  badgeRef: React.RefObject<BitmapText | null> = noRef,
+  badgeGroupRef: React.RefObject<Container | null> = noRef,
+) => {
+  const registry = useNodeRegistry();
+  useEffect(() => {
+    registry.set(nodeId, {
+      fill: fillRef.current,
+      bolt: boltRef.current,
+      badge: badgeRef.current,
+      badgeGroup: badgeGroupRef.current,
+    });
+    return () => {
+      registry.delete(nodeId);
+    };
+  }, [registry, nodeId, fillRef, boltRef, badgeRef, badgeGroupRef]);
+};
+
+const badgeRadius = 10;
+
+/** Token count badge: a black pill with a white number, hidden until a count exists. */
+const TokenBadge: FC<{
+  x: number;
+  y: number;
+  groupRef: React.RefObject<Container | null>;
+  textRef: React.RefObject<BitmapText | null>;
+  large?: boolean;
+}> = ({ x, y, groupRef, textRef, large = false }) => {
+  const radius = large ? 13 : badgeRadius;
+  return (
+    <pixiContainer ref={groupRef} x={x} y={y} visible={false}>
+      <pixiGraphics
+        draw={(graphics) =>
+          graphics
+            .clear()
+            .roundRect(-radius, -radius, radius * 2, radius * 2, radius)
+            .fill(tokenBadgeColor)
+        }
+      />
+      <pixiBitmapText
+        ref={textRef}
+        text="0"
+        anchor={0.5}
+        style={boldTextStyle(large ? 15 : 12, 0xffffff)}
+      />
+    </pixiContainer>
+  );
+};
+
+/** Lightning bolt that flares up when a transition fires. */
+const FiringBolt: FC<{
+  x: number;
+  y: number;
+  boltRef: React.RefObject<Container | null>;
+  theme: PixiTheme;
+}> = ({ x, y, boltRef, theme }) => (
+  <pixiContainer ref={boltRef} x={x} y={y} alpha={0}>
+    <pixiGraphics
+      draw={(graphics) =>
+        graphics
+          .clear()
+          .poly([1, -8, -4, 1, 0, 1, -1, 8, 4, -1, 0, -1])
+          .fill(theme["yellow.s60"])
+      }
+    />
+  </pixiContainer>
+);
+
+const PixiCompactNode: FC<{ node: CanvasPlaceNode | CanvasTransitionNode }> = ({
+  node,
+}) => {
+  const theme = useTheme();
+  const fillRef = useRef<Graphics>(null);
+  const boltRef = useRef<Container>(null);
+  const badgeRef = useRef<BitmapText>(null);
+  const badgeGroupRef = useRef<Container>(null);
+  useRegisteredHandles(node.id, fillRef, boltRef, badgeRef, badgeGroupRef);
+
+  const look = { selected: node.selected, hovered: node.hovered };
+  const textLeft = -node.width / 2 + cardPadding + iconBoxSize + 8;
+  const textWidth = node.width / 2 - 12 - textLeft;
+  const badgeColor =
+    node.kind === "place" ? theme["blue.s110"] : theme["blue.s60"];
+  const showIconBadge =
+    (node.kind === "place" && node.dynamicsEnabled) ||
+    (node.kind === "transition" && node.lambdaType === "stochastic");
+
+  return (
+    <pixiContainer
+      x={node.position.x}
+      y={node.position.y}
+      alpha={node.dimmed ? dimmedAlpha : 1}
+    >
+      <pixiGraphics
+        ref={fillRef}
+        draw={(graphics) => drawCompactCard(graphics, node, theme, look)}
+      />
+      <pixiBitmapText
+        text={truncate(node.label, textWidth, compactTitleSize)}
+        x={textLeft}
+        y={-2}
+        anchor={{ x: 0, y: 1 }}
+        style={textStyle(compactTitleSize, theme["neutral.s120"])}
+      />
+      <pixiBitmapText
+        text={compactSubtitle(node)}
+        x={textLeft}
+        y={2}
+        anchor={{ x: 0, y: 0 }}
+        style={textStyle(compactSubtitleSize, theme["neutral.s90"])}
+      />
+      {showIconBadge ? (
+        <pixiContainer
+          x={-node.width / 2 + cardPadding + iconBoxSize - 6}
+          y={iconBoxSize / 2 - 6}
+        >
+          <pixiGraphics
+            draw={(graphics) =>
+              graphics.clear().circle(0, 0, 8).fill(theme["neutral.s00"])
+            }
+          />
+          <pixiBitmapText
+            text={node.kind === "place" ? "ƒ" : "λ"}
+            anchor={0.5}
+            y={-1}
+            style={boldTextStyle(11, badgeColor)}
+          />
+        </pixiContainer>
+      ) : null}
+      {node.kind === "place" ? (
+        <TokenBadge
+          x={node.width / 2 - 2}
+          y={-node.height / 2 + 2}
+          groupRef={badgeGroupRef}
+          textRef={badgeRef}
+        />
+      ) : (
+        <FiringBolt
+          x={node.width / 2 - 2}
+          y={-node.height / 2 + 2}
+          boltRef={boltRef}
+          theme={theme}
+        />
+      )}
+    </pixiContainer>
+  );
+};
+
+const PixiClassicPlace: FC<{ node: CanvasPlaceNode }> = ({ node }) => {
+  const theme = useTheme();
+  const fillRef = useRef<Graphics>(null);
+  const badgeRef = useRef<BitmapText>(null);
+  const badgeGroupRef = useRef<Container>(null);
+  useRegisteredHandles(node.id, fillRef, noRef, badgeRef, badgeGroupRef);
+  const look = { selected: node.selected, hovered: node.hovered };
+
+  return (
+    <pixiContainer
+      x={node.position.x}
+      y={node.position.y}
+      alpha={node.dimmed ? dimmedAlpha : 1}
+    >
+      <pixiGraphics
+        ref={fillRef}
+        draw={(graphics) => drawClassicPlace(graphics, node, theme, look)}
+      />
+      {node.dynamicsEnabled ? (
+        <pixiBitmapText
+          text="ƒ"
+          anchor={0.5}
+          y={-node.height / 2 + 30}
+          style={boldTextStyle(16, theme["blue.s110"])}
+        />
+      ) : null}
+      <pixiBitmapText
+        text={splitPascalCase(node.label).join("​")}
+        anchor={0.5}
+        style={textStyle(classicLabelSize, theme["neutral.s120"], {
+          align: "center",
+          wordWrap: true,
+          wordWrapWidth: node.width - 40,
+          breakWords: true,
+        })}
+      />
+      <TokenBadge
+        x={0}
+        y={node.height * 0.2 + 13}
+        groupRef={badgeGroupRef}
+        textRef={badgeRef}
+        large
+      />
+    </pixiContainer>
+  );
+};
+
+const PixiClassicTransition: FC<{ node: CanvasTransitionNode }> = ({
+  node,
+}) => {
+  const theme = useTheme();
+  const fillRef = useRef<Graphics>(null);
+  const boltRef = useRef<Container>(null);
+  useRegisteredHandles(node.id, fillRef, boltRef);
+  const look = { selected: node.selected, hovered: node.hovered };
+
+  return (
+    <pixiContainer
+      x={node.position.x}
+      y={node.position.y}
+      alpha={node.dimmed ? dimmedAlpha : 1}
+    >
+      <pixiGraphics
+        ref={fillRef}
+        draw={(graphics) => drawClassicTransition(graphics, node, theme, look)}
+      />
+      {node.lambdaType === "stochastic" ? (
+        <pixiBitmapText
+          text="λ"
+          anchor={0.5}
+          y={-node.height / 2 + 14}
+          style={boldTextStyle(16, theme["blue.s60"])}
+        />
+      ) : null}
+      <pixiBitmapText
+        text={node.label}
+        anchor={0.5}
+        style={textStyle(classicLabelSize, theme["neutral.s120"], {
+          align: "center",
+          wordWrap: true,
+          wordWrapWidth: node.width - 16,
+          breakWords: true,
+        })}
+      />
+      <FiringBolt
+        x={0}
+        y={node.height / 2 - 14}
+        boltRef={boltRef}
+        theme={theme}
+      />
+    </pixiContainer>
+  );
+};
+
+const PixiComponentInstance: FC<{ node: CanvasComponentInstanceNode }> = ({
+  node,
+}) => {
+  const theme = useTheme();
+  const fillRef = useRef<Graphics>(null);
+  useRegisteredHandles(node.id, fillRef);
+  const look = { selected: node.selected, hovered: node.hovered };
+  const ports = handlesOf(node).filter((handle) => handle.kind === "target");
+
+  return (
+    <pixiContainer
+      x={node.position.x}
+      y={node.position.y}
+      alpha={node.dimmed ? dimmedAlpha : 1}
+    >
+      <pixiGraphics
+        ref={fillRef}
+        draw={(graphics) => drawComponentInstance(graphics, node, theme, look)}
+      />
+      <pixiBitmapText
+        text={truncate(node.label, node.width - 24, compactTitleSize)}
+        anchor={0.5}
+        y={4}
+        style={boldTextStyle(compactTitleSize, theme["neutral.s120"])}
+      />
+      <pixiBitmapText
+        text={truncate(node.subnetName, node.width - 24, compactSubtitleSize)}
+        anchor={0.5}
+        y={20}
+        style={textStyle(compactSubtitleSize, theme["neutral.s80"])}
+      />
+      {ports.map((port) => (
+        <pixiBitmapText
+          key={port.portId ?? port.nodeId}
+          text={node.ports.find(({ id }) => id === port.portId)?.name ?? ""}
+          x={port.position.x - node.position.x + portHandleSize + 4}
+          y={port.position.y - node.position.y}
+          anchor={{ x: 0, y: 0.5 }}
+          style={textStyle(9, theme["neutral.s80"])}
+        />
+      ))}
+    </pixiContainer>
+  );
+};
+
+/** One node in the active visual style. */
+export const PixiNode: FC<{ node: CanvasNode; compact: boolean }> = ({
+  node,
+  compact,
+}) => {
+  switch (node.kind) {
+    case "componentInstance":
+      return <PixiComponentInstance node={node} />;
+    case "place":
+      return compact || !isRoundNode(node) ? (
+        <PixiCompactNode node={node} />
+      ) : (
+        <PixiClassicPlace node={node} />
+      );
+    case "transition":
+      return compact ? (
+        <PixiCompactNode node={node} />
+      ) : (
+        <PixiClassicTransition node={node} />
+      );
+  }
+};
diff --git a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/pixi/pixi-canvas/pixi-place-state-tooltip.tsx b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/pixi/pixi-canvas/pixi-place-state-tooltip.tsx
new file mode 100644
index 00000000000..10a86ffb525
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/pixi/pixi-canvas/pixi-place-state-tooltip.tsx
@@ -0,0 +1,94 @@
+import { use, useRef, type FC } from "react";
+
+import { css } from "@hashintel/ds-helpers/css";
+
+import { useElementSize } from "../../../../../../react/hooks/use-element-size";
+import { SDCPNContext } from "../../../../../../react/state/sdcpn-context";
+import { PlaceStateVisualization } from "../../../../shared/place-state-visualization";
+import {
+  sceneToScreen,
+  useViewport,
+  type ViewportStore,
+} from "./viewport-store";
+
+import type { CanvasPlaceNode } from "../../../canvas-scene";
+
+// Gap between the node and the box, in screen pixels.
+const tooltipOffsetPx = 12;
+
+// Screen-space height of the top bar; the box flips below the node rather than
+// disappear behind it when placing it above would intrude into this zone.
+const topBarSafeZonePx = 72;
+
+const tooltipStyle = css({
+  position: "absolute",
+  display: "flex",
+  maxWidth: "[90vw]",
+  maxHeight: "[80vh]",
+  overflow: "auto",
+  padding: "[4px]",
+  backgroundColor: "neutral.s00",
+  border: "[1px solid {colors.neutral.bd.subtle}]",
+  borderRadius: "md",
+  boxShadow: "[0px 8px 24px rgba(0, 0, 0, 0.16)]",
+  pointerEvents: "none",
+  zIndex: "[5]",
+});
+
+/**
+ * Hover box surfacing a colored place's custom visualizer, positioned over
+ * the canvas from the node's scene position.
+ */
+export const PixiPlaceStateTooltip: FC<{
+  node: CanvasPlaceNode;
+  viewport: ViewportStore;
+}> = ({ node, viewport }) => {
+  const { petriNetDefinition } = use(SDCPNContext);
+  const current = useViewport(viewport);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const boxSize = useElementSize(contentRef);
+
+  const place = petriNetDefinition.places.find(({ id }) => id === node.id);
+  const placeType = place?.colorId
+    ? (petriNetDefinition.types.find(({ id }) => id === place.colorId) ?? null)
+    : null;
+
+  if (
+    !place ||
+    !placeType ||
+    placeType.elements.length === 0 ||
+    !place.visualizerCode
+  ) {
+    return null;
+  }
+
+  const top = sceneToScreen(current, {
+    x: node.position.x,
+    y: node.position.y - node.height / 2,
+  });
+  const bottom = sceneToScreen(current, {
+    x: node.position.x,
+    y: node.position.y + node.height / 2,
+  });
+  const boxHeight = boxSize?.height ?? 0;
+  const boxWidth = boxSize?.width ?? 0;
+  const placeBelow = top.y - tooltipOffsetPx - boxHeight < topBarSafeZonePx;
+
+  return (
+    <div
+      ref={contentRef}
+      className={tooltipStyle}
+      style={{
+        left: top.x - boxWidth / 2,
+        top: placeBelow
+          ? bottom.y + tooltipOffsetPx
+          : top.y - tooltipOffsetPx - boxHeight,
+        // Hide until measured so a tall box near the top never flashes behind
+        // the top bar before the above/below decision settles.
+        opacity: boxSize ? 1 : 0,
+      }}
+    >
+      <PlaceStateVisualization place={place} placeType={placeType} />
+    </div>
+  );
+};
diff --git a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/pixi/pixi-canvas/pixi-theme.ts b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/pixi/pixi-canvas/pixi-theme.ts
new file mode 100644
index 00000000000..40e21500e39
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/pixi/pixi-canvas/pixi-theme.ts
@@ -0,0 +1,123 @@
+/**
+ * Colours the Pixi renderer draws with, matching the React Flow nodes' Panda
+ * styles. Design tokens are read from their CSS variables at mount so the
+ * canvas follows the host theme, with the light values as fallbacks.
+ */
+
+import { Color } from "pixi.js";
+
+const tokenFallbacks = {
+  "neutral.s00": "#ffffff",
+  "neutral.s10": "#fcfcfc",
+  "neutral.s15": "#fafafa",
+  "neutral.s60": "#d9d9d9",
+  "neutral.s70": "#cecece",
+  "neutral.s80": "#bbbbbb",
+  "neutral.s90": "#8d8d8d",
+  "neutral.s100": "#838383",
+  "neutral.s120": "#202020",
+  "blue.s60": "#acd8fc",
+  "blue.s110": "#0d74ce",
+  "yellow.s60": "#f3d768",
+} as const;
+
+type TokenName = keyof typeof tokenFallbacks;
+
+export type PixiTheme = Record<TokenName, number> & {
+  /** Resolves a CSS colour, including `var(--…)` references, to a Pixi colour. */
+  color: (css: string) => { color: number; alpha: number };
+};
+
+const cssVariableName = (token: TokenName) =>
+  `--colors-${token.replace(".", "-")}`;
+
+/** The token a `--colors-…` variable stands for, when it is one we know. */
+const tokenOfVariable = (name: string): TokenName | null => {
+  const match = /^--colors-([a-z]+)-([a-z0-9]+)$/.exec(name);
+  const token = match ? `${match[1]}.${match[2]}` : null;
+  return token && token in tokenFallbacks ? (token as TokenName) : null;
+};
+
+const parseColor = (css: string): { color: number; alpha: number } => {
+  const parsed = new Color(css.trim());
+  return { color: parsed.toNumber(), alpha: parsed.alpha };
+};
+
+const readTheme = (element: Element | null): PixiTheme => {
+  const styles = element ? getComputedStyle(element) : null;
+  const resolveVariable = (name: string, fallback: string): string => {
+    const value = styles?.getPropertyValue(name).trim();
+    if (value) return value;
+    const token = tokenOfVariable(name);
+    return token ? tokenFallbacks[token] : fallback;
+  };
+  const tokens = Object.fromEntries(
+    (Object.keys(tokenFallbacks) as TokenName[]).map((token) => [
+      token,
+      parseColor(resolveVariable(cssVariableName(token), tokenFallbacks[token]))
+        .color,
+    ]),
+  ) as Record<TokenName, number>;
+
+  return {
+    ...tokens,
+    color: (css) => {
+      const variable = /^var\((--[^,)]+)(?:,\s*([^)]+))?\)$/.exec(css.trim());
+      if (variable) {
+        const [, name, fallback] = variable;
+        return parseColor(resolveVariable(name!, fallback ?? "#000000"));
+      }
+      return parseColor(css);
+    },
+  };
+};
+
+/**
+ * The theme from the token variables Panda emits on the Petrinaut root
+ * element (and on dark-mode ancestors), read once when the renderer mounts.
+ * Without a root element, the light values apply.
+ */
+export const readPixiTheme = (): PixiTheme =>
+  readTheme(
+    typeof document === "undefined"
+      ? null
+      : (document.querySelector(".petrinaut-root") ?? document.documentElement),
+  );
+
+// Colours and dimensions the React Flow styles hard-code rather than token.
+
+export const selectionOutline = { color: 0x3bb2f6, alpha: 0.6, width: 4 };
+export const hoverOutline = { color: 0x4b7e9c, alpha: 0.2, width: 4 };
+export const dimmedAlpha = 0.5;
+export const handleColor = 0x6b7280;
+export const iconBorder = { color: 0x000000, alpha: 0.06 };
+/** Classic place border when the place has no type: black lightened by 35%. */
+export const untypedClassicPlaceBorder = 0x595959;
+export const tokenBadgeColor = 0x111111;
+export const arcSelectionHalo = { color: 0xf97316, alpha: 0.4, width: 8 };
+export const weightLabelBorder = 0xdddddd;
+export const weightSymbolColor = 0x999999;
+export const weightTextColor = 0x333333;
+export const gridDotColor = 0x91919a;
+export const transitionFlash = { color: 0xffe084, alpha: 0.7 };
+
+/** Red, green and blue of a packed colour, each 0 to 255. */
+export const colorChannels = (color: number): [number, number, number] => [
+  Math.floor(color / 0x10000) % 0x100,
+  Math.floor(color / 0x100) % 0x100,
+  color % 0x100,
+];
+
+export const packColor = (red: number, green: number, blue: number): number =>
+  Math.round(red) * 0x10000 + Math.round(green) * 0x100 + Math.round(blue);
+
+/** The colour `t` of the way from `from` to `to`, per channel. */
+export const lerpColor = (from: number, to: number, t: number): number => {
+  const [fromRed, fromGreen, fromBlue] = colorChannels(from);
+  const [toRed, toGreen, toBlue] = colorChannels(to);
+  return packColor(
+    fromRed + (toRed - fromRed) * t,
+    fromGreen + (toGreen - fromGreen) * t,
+    fromBlue + (toBlue - fromBlue) * t,
+  );
+};
diff --git a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/pixi/pixi-canvas/pixi-world.tsx b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/pixi/pixi-canvas/pixi-world.tsx
new file mode 100644
index 00000000000..eb12bda4468
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/pixi/pixi-canvas/pixi-world.tsx
@@ -0,0 +1,229 @@
+/**
+ * The Pixi scene graph: a dot grid in screen space and, inside one render
+ * group that pan and zoom move as a unit, the arcs, the nodes and the gesture
+ * overlays.
+ */
+
+import { Application, extend } from "@pixi/react";
+import {
+  BitmapText,
+  Container,
+  Graphics,
+  Texture,
+  TilingSprite,
+} from "pixi.js";
+import { Suspense, use, type FC } from "react";
+
+import { SNAP_GRID_SIZE } from "../../../../../constants/ui";
+import { PixiAnimator } from "./pixi-animator";
+import {
+  PixiArcDecorations,
+  PixiArcMesh,
+  PixiConnectionLine,
+  type ArcBatch,
+} from "./pixi-arcs";
+import { ensurePixiFonts } from "./pixi-fonts";
+import {
+  NodeRegistryContext,
+  PixiNode,
+  PixiThemeContext,
+  type NodeRegistry,
+} from "./pixi-nodes";
+import { gridDotColor, selectionOutline, type PixiTheme } from "./pixi-theme";
+import {
+  selectionBoxOf,
+  useGesture,
+  type GestureStore,
+} from "./use-canvas-gestures";
+import { useViewport, type ViewportStore } from "./viewport-store";
+
+import type { CanvasScene } from "../../../canvas-scene";
+import type { ArcPolylines } from "./arc-polylines";
+import type { FrameStore } from "./frame-store";
+import type { Size } from "@hashintel/petrinaut-core";
+
+extend({ Container, Graphics, BitmapText, TilingSprite });
+
+const gridDotRadius = 1;
+
+let gridTexture: Texture | null = null;
+
+/** One grid cell with a dot in its corner, drawn once to a canvas. */
+const getGridTexture = (): Texture => {
+  if (gridTexture) return gridTexture;
+  const resolution = 2;
+  const canvas = document.createElement("canvas");
+  canvas.width = SNAP_GRID_SIZE * resolution;
+  canvas.height = SNAP_GRID_SIZE * resolution;
+  const context = canvas.getContext("2d")!;
+  context.fillStyle = `#${gridDotColor.toString(16).padStart(6, "0")}`;
+  context.beginPath();
+  context.arc(
+    gridDotRadius * resolution,
+    gridDotRadius * resolution,
+    gridDotRadius * resolution,
+    0,
+    Math.PI * 2,
+  );
+  context.fill();
+  gridTexture = Texture.from({ resource: canvas, resolution });
+  return gridTexture;
+};
+
+/** Dots every grid step, scaled and offset with the viewport like React Flow's background. */
+const Grid: FC<{ viewport: ViewportStore; size: Size }> = ({
+  viewport,
+  size,
+}) => {
+  const current = useViewport(viewport);
+  const step = SNAP_GRID_SIZE * current.zoom;
+  return (
+    <pixiTilingSprite
+      texture={getGridTexture()}
+      width={size.width}
+      height={size.height}
+      tileScale={{ x: current.zoom, y: current.zoom }}
+      tilePosition={{
+        x: ((current.x % step) + step) % step,
+        y: ((current.y % step) + step) % step,
+      }}
+      eventMode="none"
+    />
+  );
+};
+
+/** Only this component re-renders on pan and zoom; its children keep their identity. */
+const World: FC<{ viewport: ViewportStore; children: React.ReactNode }> = ({
+  viewport,
+  children,
+}) => {
+  const current = useViewport(viewport);
+  return (
+    <pixiContainer
+      isRenderGroup
+      eventMode="none"
+      interactiveChildren={false}
+      x={current.x}
+      y={current.y}
+      scale={current.zoom}
+    >
+      {children}
+    </pixiContainer>
+  );
+};
+
+/** The selection box and the connection being dragged, in scene coordinates. */
+const GestureOverlay: FC<{ gestures: GestureStore; theme: PixiTheme }> = ({
+  gestures,
+  theme,
+}) => {
+  const gesture = useGesture(gestures);
+  const box = selectionBoxOf(gesture);
+  if (box) {
+    return (
+      <pixiGraphics
+        draw={(graphics) =>
+          graphics
+            .clear()
+            .rect(box.x, box.y, box.width, box.height)
+            .fill({ color: selectionOutline.color, alpha: 0.08 })
+            .stroke({ color: selectionOutline.color, alpha: 0.8, width: 1 })
+        }
+        eventMode="none"
+      />
+    );
+  }
+  if (gesture.type === "connect") {
+    return (
+      <PixiConnectionLine
+        from={gesture.from.position}
+        to={gesture.target?.position ?? gesture.current}
+        valid={gesture.target !== null}
+        theme={theme}
+      />
+    );
+  }
+  return null;
+};
+
+/** Waits for the bitmap fonts so the first labels already use the editor font. */
+const FontsReady: FC<{ children: React.ReactNode }> = ({ children }) => {
+  use(ensurePixiFonts());
+  return children;
+};
+
+export type PixiWorldProps = {
+  host: React.RefObject<HTMLDivElement | null>;
+  scene: CanvasScene;
+  polylines: ArcPolylines;
+  theme: PixiTheme;
+  viewport: ViewportStore;
+  frames: FrameStore;
+  gestures: GestureStore;
+  registry: NodeRegistry;
+  /** The arc mesh's GPU batch, read by the animator. */
+  batchRef: React.RefObject<ArcBatch | null>;
+  /** Called when the arc mesh creates or destroys its batch. */
+  onBatchChange: (batch: ArcBatch | null) => void;
+  compact: boolean;
+  containerSize: Size;
+};
+
+export const PixiWorld: FC<PixiWorldProps> = ({
+  host,
+  scene,
+  polylines,
+  theme,
+  viewport,
+  frames,
+  gestures,
+  registry,
+  batchRef,
+  onBatchChange,
+  compact,
+  containerSize,
+}) => (
+  <Application
+    resizeTo={host}
+    backgroundAlpha={0}
+    antialias
+    autoDensity
+    resolution={Math.min(window.devicePixelRatio, 2)}
+    preference="webgl"
+  >
+    <Suspense fallback={null}>
+      <FontsReady>
+        <PixiThemeContext value={theme}>
+          <NodeRegistryContext value={registry}>
+            <Grid viewport={viewport} size={containerSize} />
+            <World viewport={viewport}>
+              <PixiArcDecorations
+                scene={scene}
+                polylines={polylines}
+                theme={theme}
+                layer="below"
+              />
+              <PixiArcMesh
+                scene={scene}
+                polylines={polylines}
+                theme={theme}
+                onBatchChange={onBatchChange}
+              />
+              <PixiArcDecorations
+                scene={scene}
+                polylines={polylines}
+                theme={theme}
+                layer="above"
+              />
+              {scene.nodes.map((node) => (
+                <PixiNode key={node.id} node={node} compact={compact} />
+              ))}
+              <GestureOverlay gestures={gestures} theme={theme} />
+            </World>
+            <PixiAnimator scene={scene} frames={frames} batchRef={batchRef} />
+          </NodeRegistryContext>
+        </PixiThemeContext>
+      </FontsReady>
+    </Suspense>
+  </Application>
+);
diff --git a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/pixi/pixi-canvas/use-canvas-gestures.ts b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/pixi/pixi-canvas/use-canvas-gestures.ts
new file mode 100644
index 00000000000..cd41953527c
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/pixi/pixi-canvas/use-canvas-gestures.ts
@@ -0,0 +1,492 @@
+/**
+ * Pointer, wheel and keyboard handling for the Pixi canvas host. Hit testing
+ * runs against the scene geometry, and every outcome goes through the shared
+ * canvas interactions, so selection, dragging, connecting and placement behave
+ * as they do on the React Flow canvas.
+ */
+
+import { useEffect, useState, useSyncExternalStore } from "react";
+
+import { useLatest } from "../../../../../../react/hooks/use-latest";
+import { arcAtPoint, type ArcPolylines } from "./arc-polylines";
+import {
+  handleAtPoint,
+  handleHitRadius,
+  nodeAt,
+  nodesInSelectionBox,
+  type CanvasHandle,
+  type CanvasRect,
+  type HandleKind,
+} from "./node-geometry";
+import {
+  panBy,
+  screenToScene,
+  wheelZoomFactor,
+  zoomAt,
+  type ViewportStore,
+  type ZoomLimits,
+} from "./viewport-store";
+
+import type {
+  CanvasNode,
+  CanvasPoint,
+  CanvasScene,
+} from "../../../canvas-scene";
+import type {
+  CanvasConnection,
+  CanvasInteractions,
+} from "../../../use-canvas-interactions";
+
+/** Pointer travel below this many screen pixels is a click, not a drag. */
+const clickThresholdPx = 3;
+
+/** How close, in screen pixels, the pointer must pass to hover an arc. */
+const arcHoverTolerancePx = 6;
+
+export type Gesture =
+  | { type: "idle" }
+  | { type: "pan"; last: CanvasPoint; moved: boolean; allowed: boolean }
+  | {
+      type: "node";
+      nodeId: string;
+      start: CanvasPoint;
+      startPositions: Map<string, CanvasPoint>;
+      moved: boolean;
+    }
+  | { type: "box"; origin: CanvasPoint; current: CanvasPoint }
+  | {
+      type: "connect";
+      from: CanvasHandle;
+      current: CanvasPoint;
+      target: CanvasHandle | null;
+    };
+
+export type GestureStore = {
+  get: () => Gesture;
+  set: (gesture: Gesture) => void;
+  subscribe: (listener: () => void) => () => void;
+};
+
+const createGestureStore = (): GestureStore => {
+  let gesture: Gesture = { type: "idle" };
+  const listeners = new Set<() => void>();
+  return {
+    get: () => gesture,
+    set: (next) => {
+      gesture = next;
+      for (const listener of listeners) listener();
+    },
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+  };
+};
+
+export const useGesture = (store: GestureStore): Gesture =>
+  useSyncExternalStore(store.subscribe, store.get, store.get);
+
+export const selectionBoxOf = (gesture: Gesture): CanvasRect | null => {
+  if (gesture.type !== "box") return null;
+  return {
+    x: Math.min(gesture.origin.x, gesture.current.x),
+    y: Math.min(gesture.origin.y, gesture.current.y),
+    width: Math.abs(gesture.current.x - gesture.origin.x),
+    height: Math.abs(gesture.current.y - gesture.origin.y),
+  };
+};
+
+const isTextTarget = (target: EventTarget | null) => {
+  const element = target as HTMLElement | null;
+  return (
+    !!element &&
+    (element.tagName === "INPUT" ||
+      element.tagName === "TEXTAREA" ||
+      element.isContentEditable ||
+      element.closest(".monaco-editor") !== null)
+  );
+};
+
+/** A connection oriented source to target, whichever handle the drag began on. */
+const connectionBetween = (
+  from: CanvasHandle,
+  to: CanvasHandle,
+): CanvasConnection => {
+  const [source, target] = from.kind === "source" ? [from, to] : [to, from];
+  return {
+    sourceId: source.nodeId,
+    targetId: target.nodeId,
+    sourcePortId: source.portId,
+    targetPortId: target.portId,
+  };
+};
+
+export type CanvasGestureInput = {
+  scene: CanvasScene;
+  polylines: ArcPolylines;
+  interactions: CanvasInteractions;
+  viewport: ViewportStore;
+  zoomLimits: ZoomLimits;
+  partialSelection: boolean;
+};
+
+export type CanvasGestureHandlers = {
+  onPointerDown: (event: React.PointerEvent<HTMLElement>) => void;
+  onPointerMove: (event: React.PointerEvent<HTMLElement>) => void;
+  onPointerUp: (event: React.PointerEvent<HTMLElement>) => void;
+  onPointerCancel: (event: React.PointerEvent<HTMLElement>) => void;
+  onPointerLeave: (event: React.PointerEvent<HTMLElement>) => void;
+};
+
+export const useCanvasGestures = (
+  host: React.RefObject<HTMLDivElement | null>,
+  input: CanvasGestureInput,
+): {
+  gestures: GestureStore;
+  handlers: CanvasGestureHandlers;
+  cursor: string;
+} => {
+  const [gestures] = useState(createGestureStore);
+  const [spaceHeld, setSpaceHeld] = useState(false);
+  const [hoverTarget, setHoverTarget] = useState<{
+    kind: "node" | "arc" | "handle";
+    id: string;
+  } | null>(null);
+  const latest = useLatest(input);
+
+  // Wheel zoom needs preventDefault, which React's passive wheel listener
+  // cannot do, and Space is a global modifier while the pointer is anywhere.
+  useEffect(() => {
+    const element = host.current;
+    if (!element) return;
+
+    const onWheel = (event: WheelEvent) => {
+      event.preventDefault();
+      const current = latest.current;
+      const rect = element.getBoundingClientRect();
+      const anchor = {
+        x: event.clientX - rect.left,
+        y: event.clientY - rect.top,
+      };
+      current.viewport.set(
+        zoomAt(
+          current.viewport.get(),
+          anchor,
+          wheelZoomFactor(event),
+          current.zoomLimits,
+        ),
+      );
+    };
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.code === "Space" && !isTextTarget(event.target)) {
+        setSpaceHeld(true);
+      }
+    };
+    const onKeyUp = (event: KeyboardEvent) => {
+      if (event.code === "Space") setSpaceHeld(false);
+    };
+
+    element.addEventListener("wheel", onWheel, { passive: false });
+    window.addEventListener("keydown", onKeyDown);
+    window.addEventListener("keyup", onKeyUp);
+    return () => {
+      element.removeEventListener("wheel", onWheel);
+      window.removeEventListener("keydown", onKeyDown);
+      window.removeEventListener("keyup", onKeyUp);
+    };
+  }, [host, latest]);
+
+  const { scene, polylines, interactions, viewport, partialSelection } = input;
+
+  const localPoint = (event: React.PointerEvent<HTMLElement>): CanvasPoint => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    return { x: event.clientX - rect.left, y: event.clientY - rect.top };
+  };
+  const scenePoint = (event: React.PointerEvent<HTMLElement>) =>
+    screenToScene(viewport.get(), localPoint(event));
+  const zoom = () => viewport.get().zoom;
+
+  const handleUnder = (point: CanvasPoint) =>
+    handleAtPoint(scene.nodes, point, handleHitRadius / zoom());
+
+  const hover = (next: typeof hoverTarget) => {
+    if (next?.kind === hoverTarget?.kind && next?.id === hoverTarget?.id)
+      return;
+    setHoverTarget(next);
+    if (!next || next.kind === "handle") {
+      interactions.clearHover();
+    } else if (next.kind === "arc") {
+      interactions.hoverArc(next.id);
+    } else {
+      const node = scene.nodes.find((candidate) => candidate.id === next.id);
+      if (node) interactions.hoverNode(node);
+    }
+  };
+
+  const updateHover = (point: CanvasPoint) => {
+    const handle = interactions.readonly ? null : handleUnder(point);
+    if (handle) {
+      hover({
+        kind: "handle",
+        id: `${handle.nodeId}:${handle.kind}:${handle.portId ?? ""}`,
+      });
+      return;
+    }
+    const node = nodeAt(scene.nodes, point);
+    if (node) {
+      hover({ kind: "node", id: node.id });
+      return;
+    }
+    const arc = arcAtPoint(
+      scene,
+      polylines,
+      point,
+      arcHoverTolerancePx / zoom(),
+    );
+    hover(arc ? { kind: "arc", id: arc.id } : null);
+  };
+
+  const selectNodeByClick = (node: CanvasNode, additive: boolean) => {
+    if (interactions.isAddMode) return;
+    if (additive) {
+      interactions.applySelectionChanges([
+        { id: node.id, selected: !node.selected },
+      ]);
+      return;
+    }
+    const others = scene.nodes.filter(
+      (candidate) => candidate.selected && candidate.id !== node.id,
+    );
+    if (node.selected && others.length === 0) return;
+    interactions.applySelectionChanges([
+      ...others.map((other) => ({ id: other.id, selected: false })),
+      { id: node.id, selected: true },
+    ]);
+  };
+
+  const finishGesture = (point: CanvasPoint, additive: boolean) => {
+    const gesture = gestures.get();
+    switch (gesture.type) {
+      case "pan":
+        if (!gesture.moved) interactions.clickPane(point);
+        break;
+      case "node": {
+        const node = scene.nodes.find(
+          (candidate) => candidate.id === gesture.nodeId,
+        );
+        if (gesture.moved) {
+          interactions.dropNodes(
+            [...gesture.startPositions.keys()].map((id) => ({
+              id,
+              position:
+                scene.nodes.find((candidate) => candidate.id === id)
+                  ?.position ?? null,
+            })),
+          );
+        } else if (node) {
+          selectNodeByClick(node, additive);
+        }
+        break;
+      }
+      case "box":
+        interactions.endSelectionGesture();
+        break;
+      case "connect":
+        if (gesture.target) {
+          interactions.connect(connectionBetween(gesture.from, gesture.target));
+        }
+        break;
+      case "idle":
+        break;
+    }
+    gestures.set({ type: "idle" });
+  };
+
+  const onPointerDown = (event: React.PointerEvent<HTMLElement>) => {
+    if (event.button !== 0 && event.button !== 1 && event.button !== 2) return;
+    event.currentTarget.setPointerCapture(event.pointerId);
+    const point = scenePoint(event);
+    const panByButton = event.button !== 0;
+
+    if (!panByButton) {
+      const handle = interactions.readonly ? null : handleUnder(point);
+      if (handle) {
+        gestures.set({
+          type: "connect",
+          from: handle,
+          current: point,
+          target: null,
+        });
+        return;
+      }
+      const node = nodeAt(scene.nodes, point);
+      if (node) {
+        const dragged = node.selected
+          ? scene.nodes.filter((candidate) => candidate.selected)
+          : [node];
+        gestures.set({
+          type: "node",
+          nodeId: node.id,
+          start: point,
+          startPositions: new Map(
+            dragged.map((candidate) => [candidate.id, candidate.position]),
+          ),
+          moved: false,
+        });
+        return;
+      }
+      if (interactions.isSelectMode && !spaceHeld) {
+        interactions.beginSelectionGesture();
+        gestures.set({ type: "box", origin: point, current: point });
+        return;
+      }
+    }
+
+    // React Flow pans on a left drag in pan mode, on Space, and on the
+    // middle or right button; in add modes a left drag does nothing.
+    const allowed =
+      panByButton ||
+      spaceHeld ||
+      interactions.isPanMode ||
+      !interactions.isAddMode;
+    gestures.set({
+      type: "pan",
+      last: localPoint(event),
+      moved: false,
+      allowed,
+    });
+  };
+
+  const onPointerMove = (event: React.PointerEvent<HTMLElement>) => {
+    const gesture = gestures.get();
+    const point = scenePoint(event);
+
+    switch (gesture.type) {
+      case "idle":
+        updateHover(point);
+        return;
+      case "pan": {
+        const local = localPoint(event);
+        const delta = {
+          x: local.x - gesture.last.x,
+          y: local.y - gesture.last.y,
+        };
+        const moved =
+          gesture.moved || Math.hypot(delta.x, delta.y) >= clickThresholdPx;
+        if (gesture.allowed && moved) {
+          viewport.set(panBy(viewport.get(), delta));
+        }
+        gestures.set({ ...gesture, last: local, moved });
+        return;
+      }
+      case "node": {
+        const delta = {
+          x: point.x - gesture.start.x,
+          y: point.y - gesture.start.y,
+        };
+        const moved =
+          gesture.moved ||
+          Math.hypot(delta.x, delta.y) * zoom() >= clickThresholdPx;
+        if (moved && !interactions.readonly) {
+          interactions.moveNodes(
+            [...gesture.startPositions].map(([id, start]) => ({
+              id,
+              position: { x: start.x + delta.x, y: start.y + delta.y },
+            })),
+          );
+        }
+        if (moved !== gesture.moved) gestures.set({ ...gesture, moved });
+        return;
+      }
+      case "box": {
+        const next = { ...gesture, current: point };
+        gestures.set(next);
+        const box = selectionBoxOf(next)!;
+        const inBox = new Set(
+          nodesInSelectionBox(scene.nodes, box, partialSelection).map(
+            (node) => node.id,
+          ),
+        );
+        const changes = scene.nodes
+          .filter((node) => inBox.has(node.id) !== node.selected)
+          .map((node) => ({ id: node.id, selected: inBox.has(node.id) }));
+        if (changes.length > 0) interactions.applySelectionChanges(changes);
+        return;
+      }
+      case "connect": {
+        const wanted: HandleKind =
+          gesture.from.kind === "source" ? "target" : "source";
+        const handle = handleUnder(point);
+        const node = handle ? null : nodeAt(scene.nodes, point);
+        // Dropping anywhere on a place or transition targets its one handle.
+        const target: CanvasHandle | null =
+          handle?.kind === wanted && handle.nodeId !== gesture.from.nodeId
+            ? handle
+            : node &&
+                node.kind !== "componentInstance" &&
+                node.id !== gesture.from.nodeId
+              ? {
+                  nodeId: node.id,
+                  kind: wanted,
+                  portId: null,
+                  position: node.position,
+                }
+              : null;
+        const valid =
+          target !== null &&
+          interactions.isValidConnection(
+            connectionBetween(gesture.from, target),
+          );
+        gestures.set({
+          ...gesture,
+          current: point,
+          target: valid ? target : null,
+        });
+        return;
+      }
+    }
+  };
+
+  const onPointerUp = (event: React.PointerEvent<HTMLElement>) => {
+    if (gestures.get().type === "idle") return;
+    event.currentTarget.releasePointerCapture(event.pointerId);
+    finishGesture(
+      scenePoint(event),
+      event.shiftKey || event.metaKey || event.ctrlKey,
+    );
+  };
+
+  const onPointerCancel = onPointerUp;
+
+  const onPointerLeave = (event: React.PointerEvent<HTMLElement>) => {
+    if (gestures.get().type !== "idle") return;
+    hover(null);
+    void event;
+  };
+
+  const gesture = useGesture(gestures);
+  const cursor =
+    gesture.type === "connect" || hoverTarget?.kind === "handle"
+      ? "crosshair"
+      : gesture.type === "pan" && gesture.allowed && gesture.moved
+        ? "grabbing"
+        : hoverTarget?.kind === "node"
+          ? "default"
+          : spaceHeld
+            ? "grab"
+            : interactions.paneCursor;
+
+  return {
+    gestures,
+    handlers: {
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
+      onPointerCancel,
+      onPointerLeave,
+    },
+    cursor,
+  };
+};
diff --git a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/pixi/pixi-canvas/viewport-store.ts b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/pixi/pixi-canvas/viewport-store.ts
new file mode 100644
index 00000000000..3567a7fa40e
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/pixi/pixi-canvas/viewport-store.ts
@@ -0,0 +1,103 @@
+/**
+ * The Pixi renderer's viewport as an external store: gestures write to it
+ * many times a second, and only the world container and the overlays that
+ * subscribe re-render.
+ */
+
+import { useSyncExternalStore } from "react";
+
+import type { CanvasViewport } from "../../../canvas-renderer";
+import type { CanvasPoint } from "../../../canvas-scene";
+
+export type ViewportStore = {
+  get: () => CanvasViewport;
+  set: (viewport: CanvasViewport) => void;
+  subscribe: (listener: () => void) => () => void;
+};
+
+export const createViewportStore = (initial: CanvasViewport): ViewportStore => {
+  let viewport = initial;
+  const listeners = new Set<() => void>();
+  return {
+    get: () => viewport,
+    set: (next) => {
+      if (
+        next.x === viewport.x &&
+        next.y === viewport.y &&
+        next.zoom === viewport.zoom
+      ) {
+        return;
+      }
+      viewport = next;
+      for (const listener of listeners) listener();
+    },
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+  };
+};
+
+export const useViewport = (store: ViewportStore): CanvasViewport =>
+  useSyncExternalStore(store.subscribe, store.get, store.get);
+
+export const sceneToScreen = (
+  viewport: CanvasViewport,
+  point: CanvasPoint,
+): CanvasPoint => ({
+  x: point.x * viewport.zoom + viewport.x,
+  y: point.y * viewport.zoom + viewport.y,
+});
+
+export const screenToScene = (
+  viewport: CanvasViewport,
+  point: CanvasPoint,
+): CanvasPoint => ({
+  x: (point.x - viewport.x) / viewport.zoom,
+  y: (point.y - viewport.y) / viewport.zoom,
+});
+
+export type ZoomLimits = { min: number; max: number };
+
+/** Zooms by `factor` keeping the scene point under `anchor` fixed on screen. */
+export const zoomAt = (
+  viewport: CanvasViewport,
+  anchor: CanvasPoint,
+  factor: number,
+  limits: ZoomLimits,
+): CanvasViewport => {
+  const zoom = Math.min(
+    limits.max,
+    Math.max(limits.min, viewport.zoom * factor),
+  );
+  const ratio = zoom / viewport.zoom;
+  return {
+    zoom,
+    x: anchor.x - (anchor.x - viewport.x) * ratio,
+    y: anchor.y - (anchor.y - viewport.y) * ratio,
+  };
+};
+
+export const panBy = (
+  viewport: CanvasViewport,
+  delta: CanvasPoint,
+): CanvasViewport => ({
+  ...viewport,
+  x: viewport.x + delta.x,
+  y: viewport.y + delta.y,
+});
+
+/** React Flow's wheel step: one notch of a mouse wheel multiplies the zoom by about 1.2. */
+export const wheelZoomFactor = (event: {
+  deltaY: number;
+  deltaMode: number;
+  ctrlKey: boolean;
+}): number => {
+  const scale = event.deltaMode === 1 ? 0.05 : event.deltaMode ? 1 : 0.002;
+  return 2 ** (-event.deltaY * scale * (event.ctrlKey ? 10 : 1));
+};
+
+/** React Flow's zoom-in and zoom-out buttons scale by this factor. */
+export const buttonZoomFactor = 1.2;
diff --git a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/sdcpn-view.tsx b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/sdcpn-view.tsx
index 98a1668f04b..7c8608e5ae1 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/sdcpn-view.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/sdcpn-view.tsx
@@ -8,7 +8,8 @@ import { use, useRef } from "react";
 import { css } from "@hashintel/ds-helpers/css";
 
 import { SDCPNContext } from "../../../react/state/sdcpn-context";
-import { canvasRenderers, defaultCanvasRenderer } from "./canvas-renderers";
+import { UserSettingsContext } from "../../../react/state/user-settings-context";
+import { canvasRenderers } from "./canvas-renderers";
 import { CursorTooltip } from "./components/cursor-tooltip";
 import { useContainerSize } from "./hooks/util/use-container-size";
 import { useCanvasScene } from "./use-canvas-scene";
@@ -27,8 +28,8 @@ const canvasContainerStyle = css({
  * SDCPNView builds the renderer-agnostic scene for the active net and hands
  * it to the active canvas renderer. It measures the canvas container and only
  * mounts the renderer once the size is known, so the net renders centered
- * from its very first frame. Switching to another net remounts the renderer,
- * centering it on the new net.
+ * from its very first frame. Switching to another net, or to another renderer
+ * in the settings, remounts the renderer, centering it on the current net.
  */
 export const SDCPNView: React.FC<{
   viewportActions?: ViewportAction[];
@@ -39,14 +40,15 @@ export const SDCPNView: React.FC<{
     containerSizeSettleMs,
   );
   const { petriNetId } = use(SDCPNContext);
+  const { canvasRenderer } = use(UserSettingsContext);
   const scene = useCanvasScene();
-  const Renderer = canvasRenderers[defaultCanvasRenderer];
+  const Renderer = canvasRenderers[canvasRenderer];
 
   return (
     <div ref={canvasContainer} className={canvasContainerStyle}>
       {containerSize && (
         <Renderer
-          key={petriNetId}
+          key={`${petriNetId}:${canvasRenderer}`}
           scene={scene}
           containerSize={containerSize}
           viewportActions={viewportActions}
diff --git a/libs/@hashintel/petrinaut/vite.config.ts b/libs/@hashintel/petrinaut/vite.config.ts
index 5b0486a998e..4c62f7ce3e9 100644
--- a/libs/@hashintel/petrinaut/vite.config.ts
+++ b/libs/@hashintel/petrinaut/vite.config.ts
@@ -11,6 +11,8 @@ const externalDependencies = [
   "react",
   "react-dom",
   "@xyflow/react",
+  "pixi.js",
+  "@pixi/react",
   "@babel/standalone",
   // Pure-CJS dep pulled in transitively by @tanstack/react-form →
   // @tanstack/react-store. Rolldown can't safely transform its
diff --git a/yarn.lock b/yarn.lock
index b1e7b541220..70db59f9bfc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7677,6 +7677,7 @@ __metadata:
     "@local/petrinaut-optimizer-client": "workspace:*"
     "@monaco-editor/react": "npm:4.8.0-rc.3"
     "@pandacss/dev": "npm:1.11.1"
+    "@pixi/react": "npm:8.0.5"
     "@storybook/react-vite": "npm:10.4.6"
     "@tanstack/react-form": "npm:1.29.0"
     "@testing-library/dom": "npm:10.4.1"
@@ -7696,6 +7697,7 @@ __metadata:
     oxc-transform-react: "npm:0.145.0"
     oxlint: "npm:1.63.0"
     oxlint-tsgolint: "npm:0.22.1"
+    pixi.js: "npm:8.20.0"
     react: "npm:19.2.6"
     react-dom: "npm:19.2.6"
     react-markdown: "npm:10.1.0"
@@ -12524,6 +12526,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@pixi/colord@npm:^2.9.6":
+  version: 2.9.6
+  resolution: "@pixi/colord@npm:2.9.6"
+  checksum: 10c0/513636a67140b8bb3292eb4a7a3a5303a394525410fe972ebfe1e5db3749f27f7c0f176e4c84fcb9ab0fa22ee1d8ce2a15b3e32db7021e65ac0561941d2933a3
+  languageName: node
+  linkType: hard
+
+"@pixi/react@npm:8.0.5":
+  version: 8.0.5
+  resolution: "@pixi/react@npm:8.0.5"
+  dependencies:
+    its-fine: "npm:^2.0.0"
+    react-reconciler: "npm:0.31.0"
+  peerDependencies:
+    pixi.js: ^8.2.6
+    react: ">=19.0.0"
+  checksum: 10c0/ca139da0f57c122d7db8cc71e94fcf009987b11efb2e940d96afb2f2501b518112c7d7336ddc4ceb03500358f5c510fe8480bd8c4935dc04e5554e03a885fad8
+  languageName: node
+  linkType: hard
+
 "@pkgr/core@npm:^0.1.0":
   version: 0.1.1
   resolution: "@pkgr/core@npm:0.1.1"
@@ -18543,6 +18565,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/earcut@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "@types/earcut@npm:3.0.0"
+  checksum: 10c0/3c03e66bebb9b2408934f3ba4c3e9de37847166047fd64c23efd1bb9e127ed9330a9c61b03f3dc6cee060cb3b7e0a19689ee983d08defc93ca387a17b96e9499
+  languageName: node
+  linkType: hard
+
 "@types/eslint-scope@npm:^3.7.7":
   version: 3.7.7
   resolution: "@types/eslint-scope@npm:3.7.7"
@@ -19157,6 +19186,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react-reconciler@npm:^0.28.9":
+  version: 0.28.9
+  resolution: "@types/react-reconciler@npm:0.28.9"
+  peerDependencies:
+    "@types/react": "*"
+  checksum: 10c0/9fe71fa856aab2cd4742fe0416bdd4f5c82ecc05ef6451ee7fcb65a5efdf5fa588f5820fbe2a665b15371b0da3bfc4097f28bb6d450b9a834af2d0fc00f403bd
+  languageName: node
+  linkType: hard
+
 "@types/react-redux@npm:^7.1.20":
   version: 7.1.34
   resolution: "@types/react-redux@npm:7.1.34"
@@ -20815,6 +20853,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@webgpu/types@npm:^0.1.69":
+  version: 0.1.72
+  resolution: "@webgpu/types@npm:0.1.72"
+  checksum: 10c0/f03af4f3db0543158bbc39810d57a01269cc315e9ba5c1f8690a6c6f3c969d1c1cc53bc55899c5aa2f9d3702fa866682c3cd33129d614487d4a763f0dbea72c0
+  languageName: node
+  linkType: hard
+
 "@webpack-cli/configtest@npm:^3.0.1":
   version: 3.0.1
   resolution: "@webpack-cli/configtest@npm:3.0.1"
@@ -20949,10 +20994,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@xmldom/xmldom@npm:^0.8.11, @xmldom/xmldom@npm:^0.8.6":
-  version: 0.8.13
-  resolution: "@xmldom/xmldom@npm:0.8.13"
-  checksum: 10c0/06405ee6fffba631abf715a305ace338420ebcea8baf1317f19f2752f5c505952b7df45159908e7be8451a42faa54326b780616ab4d08242b20477b2973da24b
+"@xmldom/xmldom@npm:^0.8.11, @xmldom/xmldom@npm:^0.8.13, @xmldom/xmldom@npm:^0.8.6":
+  version: 0.8.15
+  resolution: "@xmldom/xmldom@npm:0.8.15"
+  checksum: 10c0/59d09b85824b684fba5a0a224d5b43abea1a0d745e8d8b8136a7013e996eb6da122fdbb3deb32ed1621923a10e1937b1f7917cea43481d9d5b976e8c1ff836c1
   languageName: node
   linkType: hard
 
@@ -26346,6 +26391,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"earcut@npm:^3.0.2":
+  version: 3.2.3
+  resolution: "earcut@npm:3.2.3"
+  checksum: 10c0/38660ec1ce55eecbbbf11d5a0072934c9f33851527bf5e40923c6656c3a0c6b00bb449ae8f4b28f89a0b249fe18568e630a8ea9ee39ce2707a50a89531a2f995
+  languageName: node
+  linkType: hard
+
 "easy-table@npm:1.1.0":
   version: 1.1.0
   resolution: "easy-table@npm:1.1.0"
@@ -29494,6 +29546,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"gifuct-js@npm:^2.1.2":
+  version: 2.1.2
+  resolution: "gifuct-js@npm:2.1.2"
+  dependencies:
+    js-binary-schema-parser: "npm:^2.0.3"
+  checksum: 10c0/39521aabcb87b50c3e44b98c564bf229f33f9667809b643c719674a7bcc6b42eb9faa521be6575707ea5964ecf1613991b09295a7a389aa502b109d1ca303fcf
+  languageName: node
+  linkType: hard
+
 "github-from-package@npm:0.0.0":
   version: 0.0.0
   resolution: "github-from-package@npm:0.0.0"
@@ -32343,6 +32404,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ismobilejs@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "ismobilejs@npm:1.1.1"
+  checksum: 10c0/3f15f3bd8fe2290bc2f7398c95ceee7525db7d8cf76b8def201c19c49b3a37be33d9ecedc4e316aadcc67a70859ae491981e07cf998db1ec3e5ad0df905bc16a
+  languageName: node
+  linkType: hard
+
 "isobject@npm:^3.0.1":
   version: 3.0.1
   resolution: "isobject@npm:3.0.1"
@@ -32601,6 +32669,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"its-fine@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "its-fine@npm:2.0.0"
+  dependencies:
+    "@types/react-reconciler": "npm:^0.28.9"
+  peerDependencies:
+    react: ^19.0.0
+  checksum: 10c0/1ff1ff3257c0c7eb115c9c26cf0506eb84162edc1a63d3136780d146f7c7833298b240d0fcb46888909773f1a7d16539e0c03f2482cff1a5a502d6436686fe21
+  languageName: node
+  linkType: hard
+
 "jackspeak@npm:^4.1.1, jackspeak@npm:^4.2.3":
   version: 4.2.3
   resolution: "jackspeak@npm:4.2.3"
@@ -32715,6 +32794,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"js-binary-schema-parser@npm:^2.0.3":
+  version: 2.0.3
+  resolution: "js-binary-schema-parser@npm:2.0.3"
+  checksum: 10c0/0acf895918974d95f5c8c432486d23b6257c555c8a3efff1e4f6a72818877b40c2467bcb2fbd79e519b9c34612526b3595f805eb294e19f48f68f6aa9ee8469e
+  languageName: node
+  linkType: hard
+
 "js-levenshtein@npm:1.1.6":
   version: 1.1.6
   resolution: "js-levenshtein@npm:1.1.6"
@@ -37898,6 +37984,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"parse-svg-path@npm:^0.2.0":
+  version: 0.2.0
+  resolution: "parse-svg-path@npm:0.2.0"
+  checksum: 10c0/a6089505fd63ce43c873c616e6eb7fa85f88644bb38fadd5c2b66a1e30c77275d391049e5c6cd4be09520f191e1e2d37d173b6470f9aa6f548a2fff6f649894a
+  languageName: node
+  linkType: hard
+
 "parse5@npm:^7.0.0, parse5@npm:^7.1.2":
   version: 7.3.0
   resolution: "parse5@npm:7.3.0"
@@ -38413,6 +38506,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pixi.js@npm:8.20.0":
+  version: 8.20.0
+  resolution: "pixi.js@npm:8.20.0"
+  dependencies:
+    "@pixi/colord": "npm:^2.9.6"
+    "@types/earcut": "npm:^3.0.0"
+    "@webgpu/types": "npm:^0.1.69"
+    "@xmldom/xmldom": "npm:^0.8.13"
+    earcut: "npm:^3.0.2"
+    eventemitter3: "npm:^5.0.1"
+    gifuct-js: "npm:^2.1.2"
+    ismobilejs: "npm:^1.1.1"
+    parse-svg-path: "npm:^0.2.0"
+    tiny-lru: "npm:^11.4.7"
+  checksum: 10c0/73fcfa01fa92dde24306e9cb7aa88f6930334cea5dc99e46e42533f25dca2898ffc7acf9054ad37137f3fa00f0830c93cb285e014cfc70445d84c8a99f44c998
+  languageName: node
+  linkType: hard
+
 "pkce-challenge@npm:^5.0.0":
   version: 5.0.0
   resolution: "pkce-challenge@npm:5.0.0"
@@ -39741,6 +39852,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-reconciler@npm:0.31.0":
+  version: 0.31.0
+  resolution: "react-reconciler@npm:0.31.0"
+  dependencies:
+    scheduler: "npm:^0.25.0"
+  peerDependencies:
+    react: ^19.0.0
+  checksum: 10c0/97920e1866c7206e200c3920c133c2e85f62a3c54fd9bc4b83c10c558d83d98eb378caab4fe37498e0cc1b1b2665d898627f2ae2537b29c8ab295ec8abc0c580
+  languageName: node
+  linkType: hard
+
 "react-redux@npm:8.x.x || 9.x.x":
   version: 9.3.0
   resolution: "react-redux@npm:9.3.0"
@@ -41632,6 +41754,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"scheduler@npm:^0.25.0":
+  version: 0.25.0
+  resolution: "scheduler@npm:0.25.0"
+  checksum: 10c0/a4bb1da406b613ce72c1299db43759526058fdcc413999c3c3e0db8956df7633acf395cb20eb2303b6a65d658d66b6585d344460abaee8080b4aa931f10eaafe
+  languageName: node
+  linkType: hard
+
 "scheduler@npm:^0.27.0":
   version: 0.27.0
   resolution: "scheduler@npm:0.27.0"
@@ -43757,6 +43886,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tiny-lru@npm:^11.4.7":
+  version: 11.4.7
+  resolution: "tiny-lru@npm:11.4.7"
+  checksum: 10c0/2cd65b987396e331ddcef57133b3f0cb30c832641a215a2e627af04941c839ca6772f216b238e96500b4747f39b434d129cec4c0a25db3beb08c8f3d448a2705
+  languageName: node
+  linkType: hard
+
 "tinybench@npm:^2.9.0":
   version: 2.9.0
   resolution: "tinybench@npm:2.9.0"