diff --git a/package.json b/package.json
index 09a22b0..ed6796d 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
     "bech32": "^2.0.0",
     "bip39": "^3.1.0",
     "buffer": "^6.0.3",
+    "d3-force": "^3.0.0",
     "date-fns": "^3.6.0",
     "dompurify": "^3.0.6",
     "dotenv": "^17.2.3",
@@ -88,6 +89,7 @@
     "@tailwindcss/forms": "^0.5.10",
     "@tailwindcss/postcss": "^4.1.13",
     "@tailwindcss/typography": "^0.5.19",
+    "@types/d3-force": "^3.0.10",
     "@types/dompurify": "^3.0.5",
     "@types/markdown-it": "^13.0.7",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 67c7509..8924770 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -101,6 +101,9 @@ importers:
       buffer:
         specifier: ^6.0.3
         version: 6.0.3
+      d3-force:
+        specifier: ^3.0.0
+        version: 3.0.0
       date-fns:
         specifier: ^3.6.0
         version: 3.6.0
@@ -198,6 +201,9 @@ importers:
       '@tailwindcss/typography':
         specifier: ^0.5.19
         version: 0.5.19(tailwindcss@4.1.13)
+      '@types/d3-force':
+        specifier: ^3.0.10
+        version: 3.0.10
       '@types/dompurify':
         specifier: ^3.0.5
         version: 3.2.0
@@ -1529,6 +1535,9 @@ packages:
   '@types/cookie@0.6.0':
     resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==}
 
+  '@types/d3-force@3.0.10':
+    resolution: {integrity: sha512-ZYeSaCF3p73RdOKcjj+swRlZfnYpK1EbaDiYICEEp5Q6sUiqFaFQ9qgoshp5CzIyyb/yD09kD9o2zEltCexlgw==}
+
   '@types/dompurify@3.2.0':
     resolution: {integrity: sha512-Fgg31wv9QbLDA0SpTOXO3MaxySc4DKGLi8sna4/Utjo4r3ZRPdCt4UQee8BWr+Q5z21yifghREPJGYaEOEIACg==}
     deprecated: This is a stub types definition. dompurify provides its own type definitions, so you do not need this installed.
@@ -2245,6 +2254,22 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
+  d3-dispatch@3.0.1:
+    resolution: {integrity: sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==}
+    engines: {node: '>=12'}
+
+  d3-force@3.0.0:
+    resolution: {integrity: sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==}
+    engines: {node: '>=12'}
+
+  d3-quadtree@3.0.1:
+    resolution: {integrity: sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==}
+    engines: {node: '>=12'}
+
+  d3-timer@3.0.1:
+    resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
+    engines: {node: '>=12'}
+
   d@1.0.2:
     resolution: {integrity: sha512-MOqHvMWF9/9MX6nza0KgvFH4HpMU0EF5uUDXqX/BtxtU8NfB0QzRtJ8Oe/6SuS4kbhyzVJwjd97EA4PKrzJ8bw==}
     engines: {node: '>=0.12'}
@@ -6372,6 +6397,8 @@ snapshots:
 
   '@types/cookie@0.6.0': {}
 
+  '@types/d3-force@3.0.10': {}
+
   '@types/dompurify@3.2.0':
     dependencies:
       dompurify: 3.3.1
@@ -7201,6 +7228,18 @@ snapshots:
 
   cssesc@3.0.0: {}
 
+  d3-dispatch@3.0.1: {}
+
+  d3-force@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-quadtree: 3.0.1
+      d3-timer: 3.0.1
+
+  d3-quadtree@3.0.1: {}
+
+  d3-timer@3.0.1: {}
+
   d@1.0.2:
     dependencies:
       es5-ext: 0.10.64
diff --git a/src/components/CulinaryMesh.svelte b/src/components/CulinaryMesh.svelte
new file mode 100644
index 0000000..e7142ee
--- /dev/null
+++ b/src/components/CulinaryMesh.svelte
@@ -0,0 +1,610 @@
+<script lang="ts">
+  import { onMount, onDestroy, createEventDispatcher } from 'svelte';
+  import {
+    forceSimulation,
+    forceLink,
+    forceManyBody,
+    forceCenter,
+    forceCollide,
+    forceX,
+    forceY,
+    forceRadial
+  } from 'd3-force';
+  import type { Simulation, SimulationNodeDatum, SimulationLinkDatum } from 'd3-force';
+  import type { NDKEvent } from '@nostr-dev-kit/ndk';
+  import { buildMeshGraph, type MeshNode, type MeshEdge, type RecipeNode, type TagNode, type EngagementMap } from '$lib/meshUtils';
+  import type { MeshVisualTheme, MeshLayers, MeshFilters } from '$lib/mesh/meshTypes';
+  import { setCachedLayout, getCachedLayout, applyCachedLayout } from '$lib/mesh/meshLayout';
+  import { theme } from '$lib/themeStore';
+  import MeshCanvas from './mesh/MeshCanvas.svelte';
+  import MeshNodes from './mesh/MeshNodes.svelte';
+  import MeshTooltip from './mesh/MeshTooltip.svelte';
+
+  const dispatch = createEventDispatcher<{ settled: void; nodeSelect: { node: MeshNode } }>();
+
+  export let recipes: NDKEvent[];
+  export let engagement: EngagementMap = new Map();
+  export let layers: MeshLayers | undefined = undefined;
+  export let filters: MeshFilters | undefined = undefined;
+  export let visualTheme: MeshVisualTheme = 'default';
+  export let showTopEdges: boolean = false;
+
+  // Settling state
+  let settled = false;
+
+  // Graph data — use a version counter instead of `nodes = nodes` to trigger Svelte updates
+  let nodes: (MeshNode & SimulationNodeDatum)[] = [];
+  let edges: (MeshEdge & SimulationLinkDatum<MeshNode & SimulationNodeDatum>)[] = [];
+  let nodeVersion = 0; // Bump this to trigger node re-render without full array diff
+
+  // Viewport
+  let containerEl: HTMLDivElement;
+  let width = 0;
+  let height = 0;
+
+  // Zoom & Pan
+  let zoom = 1;
+  let panX = 0;
+  let panY = 0;
+
+  // Pan drag state
+  let isPanning = false;
+  let panStartX = 0;
+  let panStartY = 0;
+  let panStartPanX = 0;
+  let panStartPanY = 0;
+
+  // Node drag state
+  let draggedNode: (MeshNode & SimulationNodeDatum) | null = null;
+  let nodeDragStartX = 0;
+  let nodeDragStartY = 0;
+  let nodeDragDidMove = false;
+  const DRAG_THRESHOLD = 8;
+
+  // Touch state
+  let lastTouchDist = 0;
+
+  // Simulation
+  let simulation: Simulation<MeshNode & SimulationNodeDatum, MeshEdge & SimulationLinkDatum<MeshNode & SimulationNodeDatum>> | null = null;
+
+  // Hover highlight
+  let highlightedNodeId: string | null = null;
+  let highlightedNeighborIds: Set<string> = new Set();
+
+  // Tooltip
+  let tooltipNode: (RecipeNode & SimulationNodeDatum) | null = null;
+  let tooltipX = 0;
+  let tooltipY = 0;
+
+  // Resize observer
+  let resizeObserver: ResizeObserver | null = null;
+
+  // Safety timeout for settling
+  let settleTimeout: ReturnType<typeof setTimeout> | null = null;
+
+  // Hover throttle
+  let lastHoverTime = 0;
+
+  // Canvas component reference
+  let meshCanvas: MeshCanvas;
+
+  $: resolvedTheme = $theme === 'system' ? theme.getResolvedTheme() : $theme;
+  $: isDarkMode = resolvedTheme === 'dark';
+  $: isConstellation = visualTheme === 'constellation';
+
+  // Total section count for horizontal spread
+  $: sectionCount = new Set(nodes.filter((n): n is (TagNode & SimulationNodeDatum) => n.type === 'tag').map((n) => n.sectionIndex)).size || 1;
+
+  // ── Pre-computed adjacency list for O(1) neighbor lookups ────────
+
+  let adjacency = new Map<string, Set<string>>();
+
+  function rebuildAdjacency() {
+    adjacency = new Map();
+    for (const edge of edges) {
+      const src = (edge.source as MeshNode & SimulationNodeDatum).id ?? (edge.source as string);
+      const tgt = (edge.target as MeshNode & SimulationNodeDatum).id ?? (edge.target as string);
+      if (!adjacency.has(src)) adjacency.set(src, new Set());
+      if (!adjacency.has(tgt)) adjacency.set(tgt, new Set());
+      adjacency.get(src)!.add(tgt);
+      adjacency.get(tgt)!.add(src);
+    }
+  }
+
+  function buildNeighborSet(nodeId: string): Set<string> {
+    const neighbors = new Set<string>();
+    neighbors.add(nodeId);
+    const adj = adjacency.get(nodeId);
+    if (adj) {
+      for (const id of adj) neighbors.add(id);
+    }
+    return neighbors;
+  }
+
+  // ── Simulation ───────────────────────────────────────────────────
+
+  function initSimulation() {
+    const graph = buildMeshGraph(recipes, engagement, layers, filters);
+    nodes = graph.nodes as (MeshNode & SimulationNodeDatum)[];
+    edges = graph.edges as (MeshEdge & SimulationLinkDatum<MeshNode & SimulationNodeDatum>)[];
+
+    if (nodes.length === 0) return;
+
+    rebuildAdjacency();
+
+    // Try to apply cached layout
+    const nodeIds = nodes.map((n) => n.id);
+    const cached = getCachedLayout(nodeIds, edges.length);
+    if (cached) {
+      const allApplied = applyCachedLayout(nodes, cached);
+      if (allApplied) {
+        settled = true;
+        nodeVersion++;
+        dispatch('settled');
+        return;
+      }
+    }
+
+    const recipeTagEdges = edges.filter((e) => e.edgeType === 'recipe-tag');
+    const recipeRecipeEdges = edges.filter((e) => e.edgeType === 'recipe-recipe');
+
+    simulation = forceSimulation<MeshNode & SimulationNodeDatum>(nodes)
+      .force(
+        'link-tag',
+        forceLink<MeshNode & SimulationNodeDatum, MeshEdge & SimulationLinkDatum<MeshNode & SimulationNodeDatum>>(recipeTagEdges)
+          .id((d) => d.id)
+          .distance(90)
+          .strength(0.4)
+      )
+      .force(
+        'link-recipe',
+        forceLink<MeshNode & SimulationNodeDatum, MeshEdge & SimulationLinkDatum<MeshNode & SimulationNodeDatum>>(recipeRecipeEdges)
+          .id((d) => d.id)
+          .distance(60)
+          .strength(0.6)
+      )
+      .force(
+        'charge',
+        forceManyBody<MeshNode & SimulationNodeDatum>().strength((d) => {
+          if (d.type === 'tag') return 150;
+          if (d.type === 'chef') return -20;
+          const tier = (d as RecipeNode).tier;
+          switch (tier) {
+            case 1: return -10;
+            case 2: return -25;
+            case 3: return -40;
+            default: return -30;
+          }
+        })
+      )
+      .force('center', forceCenter(width / 2, height / 2))
+      .force(
+        'collide',
+        forceCollide<MeshNode & SimulationNodeDatum>().radius((d) => {
+          if (d.type === 'tag') return 40;
+          if (d.type === 'chef') return 30;
+          const tier = (d as RecipeNode).tier;
+          switch (tier) {
+            case 1: return 44;
+            case 2: return 30;
+            case 3: return 20;
+            default: return 20;
+          }
+        })
+      )
+      .force(
+        'x',
+        forceX<MeshNode & SimulationNodeDatum>().x((d) => {
+          if (d.type === 'tag') {
+            const spread = width * 0.8;
+            const offset = width * 0.1;
+            return offset + ((d as TagNode).sectionIndex / Math.max(sectionCount - 1, 1)) * spread;
+          }
+          return width / 2;
+        }).strength((d) => {
+          if (d.type === 'tag') return 0.1;
+          if (d.type === 'chef') return 0.05;
+          const tier = (d as RecipeNode).tier;
+          switch (tier) {
+            case 1: return 0.15;
+            case 2: return 0.08;
+            case 3: return 0.03;
+            default: return 0.05;
+          }
+        })
+      )
+      .force(
+        'y',
+        forceY<MeshNode & SimulationNodeDatum>().y(height / 2).strength((d) => {
+          if (d.type === 'tag') return 0.1;
+          if (d.type === 'chef') return 0.05;
+          const tier = (d as RecipeNode).tier;
+          switch (tier) {
+            case 1: return 0.15;
+            case 2: return 0.08;
+            case 3: return 0.03;
+            default: return 0.05;
+          }
+        })
+      )
+      .force(
+        'radial',
+        forceRadial<MeshNode & SimulationNodeDatum>(
+          Math.min(width, height) * 0.35,
+          width / 2,
+          height / 2
+        ).strength((d) => (d.type === 'recipe' && (d as RecipeNode).tier === 3 ? 0.04 : 0))
+      )
+      .alphaDecay(0.008)
+      .velocityDecay(0.35)
+      .on('tick', handleTick);
+
+    settleTimeout = setTimeout(() => {
+      if (!settled) forceSettle();
+    }, 6000);
+  }
+
+  function handleTick() {
+    if (!settled) {
+      if (simulation && simulation.alpha() < 0.05) {
+        forceSettle();
+      }
+      return;
+    }
+    // Only bump version during drag (structural change), not every tick
+    meshCanvas?.scheduleDrawEdges();
+  }
+
+  function forceSettle() {
+    if (settled) return;
+    if (settleTimeout) {
+      clearTimeout(settleTimeout);
+      settleTimeout = null;
+    }
+
+    if (simulation) {
+      simulation.stop();
+      // Non-blocking: run ticks in batches yielding to the main thread
+      settleAsync();
+      return;
+    }
+
+    finishSettle();
+  }
+
+  function settleAsync() {
+    if (!simulation) { finishSettle(); return; }
+
+    const BATCH_SIZE = 50;
+    let ticked = 0;
+    while (simulation.alpha() > 0.001 && ticked < BATCH_SIZE) {
+      simulation.tick();
+      ticked++;
+    }
+
+    if (simulation.alpha() > 0.001) {
+      // Yield to browser, then continue
+      setTimeout(settleAsync, 0);
+    } else {
+      finishSettle();
+    }
+  }
+
+  function finishSettle() {
+    setCachedLayout(nodes, edges.length);
+    settled = true;
+    nodeVersion++;
+    meshCanvas?.scheduleDrawEdges();
+    dispatch('settled');
+  }
+
+  // ── Screen ↔ Graph coordinate conversion ─────────────────────
+
+  function screenToGraphX(sx: number): number {
+    return (sx - panX) / zoom;
+  }
+
+  function screenToGraphY(sy: number): number {
+    return (sy - panY) / zoom;
+  }
+
+  // ── Zoom & Pan ────────────────────────────────────────────────
+
+  function handleWheel(e: WheelEvent) {
+    e.preventDefault();
+    const factor = e.deltaY > 0 ? 0.92 : 1.08;
+    const newZoom = Math.min(3, Math.max(0.2, zoom * factor));
+
+    const rect = containerEl.getBoundingClientRect();
+    const mx = e.clientX - rect.left;
+    const my = e.clientY - rect.top;
+
+    panX = mx - ((mx - panX) / zoom) * newZoom;
+    panY = my - ((my - panY) / zoom) * newZoom;
+    zoom = newZoom;
+  }
+
+  function handleContainerMouseDown(e: MouseEvent) {
+    if (e.button !== 0) return;
+    isPanning = true;
+    panStartX = e.clientX;
+    panStartY = e.clientY;
+    panStartPanX = panX;
+    panStartPanY = panY;
+  }
+
+  function handleContainerMouseMove(e: MouseEvent) {
+    if (draggedNode) {
+      const dx = e.clientX - nodeDragStartX;
+      const dy = e.clientY - nodeDragStartY;
+      if (!nodeDragDidMove && Math.hypot(dx, dy) >= DRAG_THRESHOLD) {
+        nodeDragDidMove = true;
+        if (simulation) {
+          simulation.alphaTarget(0.1).restart();
+        }
+      }
+      if (nodeDragDidMove) {
+        const rect = containerEl.getBoundingClientRect();
+        draggedNode.fx = screenToGraphX(e.clientX - rect.left);
+        draggedNode.fy = screenToGraphY(e.clientY - rect.top);
+        nodeVersion++; // Trigger re-render for dragged node position
+      }
+      return;
+    }
+
+    if (!isPanning) return;
+    panX = panStartPanX + (e.clientX - panStartX);
+    panY = panStartPanY + (e.clientY - panStartY);
+  }
+
+  function handleContainerMouseUp() {
+    if (draggedNode) {
+      if (nodeDragDidMove) {
+        draggedNode.fx = null;
+        draggedNode.fy = null;
+        if (simulation) {
+          simulation.alphaTarget(0);
+        }
+      }
+      draggedNode = null;
+      nodeDragDidMove = false;
+      return;
+    }
+    isPanning = false;
+  }
+
+  // ── Node interaction (passed to MeshNodes) ─────────────────────
+
+  function handleNodeMouseDown(node: MeshNode & SimulationNodeDatum, e: MouseEvent) {
+    if (e.button !== 0) return;
+    e.stopPropagation();
+    draggedNode = node;
+    nodeDragStartX = e.clientX;
+    nodeDragStartY = e.clientY;
+    nodeDragDidMove = false;
+  }
+
+  function handleNodeClick(e: MouseEvent) {
+    if (nodeDragDidMove) {
+      e.preventDefault();
+    }
+  }
+
+  function handleNodeEnter(node: MeshNode & SimulationNodeDatum, e: MouseEvent) {
+    const now = performance.now();
+    if (now - lastHoverTime < 33) return; // 30fps throttle
+    lastHoverTime = now;
+
+    highlightedNodeId = node.id;
+    highlightedNeighborIds = buildNeighborSet(node.id);
+
+    if (node.type === 'recipe') {
+      tooltipNode = node as RecipeNode & SimulationNodeDatum;
+      tooltipX = e.clientX;
+      tooltipY = e.clientY;
+    }
+  }
+
+  function handleNodeMove(e: MouseEvent) {
+    if (tooltipNode) {
+      tooltipX = e.clientX;
+      tooltipY = e.clientY;
+    }
+  }
+
+  function handleNodeLeave() {
+    highlightedNodeId = null;
+    highlightedNeighborIds = new Set();
+    tooltipNode = null;
+  }
+
+  // ── Touch ─────────────────────────────────────────────────────
+
+  function handleTouchStart(e: TouchEvent) {
+    if (e.touches.length === 1) {
+      isPanning = true;
+      panStartX = e.touches[0].clientX;
+      panStartY = e.touches[0].clientY;
+      panStartPanX = panX;
+      panStartPanY = panY;
+    } else if (e.touches.length === 2) {
+      isPanning = false;
+      lastTouchDist = Math.hypot(
+        e.touches[0].clientX - e.touches[1].clientX,
+        e.touches[0].clientY - e.touches[1].clientY
+      );
+    }
+  }
+
+  function handleTouchMove(e: TouchEvent) {
+    if (e.touches.length === 1 && isPanning) {
+      panX = panStartPanX + (e.touches[0].clientX - panStartX);
+      panY = panStartPanY + (e.touches[0].clientY - panStartY);
+    } else if (e.touches.length === 2) {
+      const dist = Math.hypot(
+        e.touches[0].clientX - e.touches[1].clientX,
+        e.touches[0].clientY - e.touches[1].clientY
+      );
+      if (lastTouchDist > 0) {
+        const factor = dist / lastTouchDist;
+        const newZoom = Math.min(3, Math.max(0.2, zoom * factor));
+
+        const rect = containerEl.getBoundingClientRect();
+        const mx = (e.touches[0].clientX + e.touches[1].clientX) / 2 - rect.left;
+        const my = (e.touches[0].clientY + e.touches[1].clientY) / 2 - rect.top;
+
+        panX = mx - ((mx - panX) / zoom) * newZoom;
+        panY = my - ((my - panY) / zoom) * newZoom;
+        zoom = newZoom;
+      }
+      lastTouchDist = dist;
+    }
+  }
+
+  function handleTouchEnd() {
+    isPanning = false;
+    lastTouchDist = 0;
+  }
+
+  // ── Public zoom controls ──────────────────────────────────────
+
+  export function zoomIn() {
+    const newZoom = Math.min(3, zoom * 1.25);
+    const cx = width / 2;
+    const cy = height / 2;
+    panX = cx - ((cx - panX) / zoom) * newZoom;
+    panY = cy - ((cy - panY) / zoom) * newZoom;
+    zoom = newZoom;
+  }
+
+  export function zoomOut() {
+    const newZoom = Math.max(0.2, zoom * 0.8);
+    const cx = width / 2;
+    const cy = height / 2;
+    panX = cx - ((cx - panX) / zoom) * newZoom;
+    panY = cy - ((cy - panY) / zoom) * newZoom;
+    zoom = newZoom;
+  }
+
+  export function resetZoom() {
+    zoom = 1;
+    panX = 0;
+    panY = 0;
+  }
+
+  // ── Lifecycle ─────────────────────────────────────────────────
+
+  onMount(() => {
+    resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        width = entry.contentRect.width;
+        height = entry.contentRect.height;
+      }
+    });
+
+    if (containerEl) {
+      resizeObserver.observe(containerEl);
+      width = containerEl.clientWidth;
+      height = containerEl.clientHeight;
+      containerEl.addEventListener('wheel', handleWheel, { passive: false });
+    }
+
+    requestAnimationFrame(() => {
+      if (width > 0 && height > 0) {
+        initSimulation();
+      }
+    });
+  });
+
+  onDestroy(() => {
+    if (simulation) simulation.stop();
+    if (resizeObserver) resizeObserver.disconnect();
+    if (settleTimeout) clearTimeout(settleTimeout);
+    if (containerEl) containerEl.removeEventListener('wheel', handleWheel);
+  });
+</script>
+
+<div
+  class="mesh-container"
+  class:mesh-settled={settled}
+  class:constellation={isConstellation}
+  style="background: {isConstellation
+    ? 'radial-gradient(ellipse at center, rgba(10,12,25,1) 0%, rgba(3,5,15,1) 100%)'
+    : isDarkMode
+      ? 'radial-gradient(ellipse at center, rgba(20,15,12,1) 0%, rgba(10,8,6,1) 100%)'
+      : 'radial-gradient(ellipse at center, rgba(255,252,248,1) 0%, rgba(245,240,235,1) 100%)'};"
+  bind:this={containerEl}
+  on:mousedown={handleContainerMouseDown}
+  on:mousemove={handleContainerMouseMove}
+  on:mouseup={handleContainerMouseUp}
+  on:mouseleave={handleContainerMouseUp}
+  on:touchstart|passive={handleTouchStart}
+  on:touchmove={handleTouchMove}
+  on:touchend={handleTouchEnd}
+  on:touchcancel={handleTouchEnd}
+  role="application"
+  aria-label="Culinary Mesh visualization"
+  style:touch-action="none"
+>
+  <MeshCanvas
+    bind:this={meshCanvas}
+    {edges}
+    {width}
+    {height}
+    {panX}
+    {panY}
+    {zoom}
+    {highlightedNodeId}
+    {isDarkMode}
+    {visualTheme}
+    {showTopEdges}
+  />
+
+  <MeshNodes
+    {nodes}
+    {nodeVersion}
+    {panX}
+    {panY}
+    {zoom}
+    {width}
+    {height}
+    {highlightedNodeId}
+    {highlightedNeighborIds}
+    {draggedNode}
+    {isDarkMode}
+    {visualTheme}
+    onNodeMouseDown={handleNodeMouseDown}
+    onNodeClick={handleNodeClick}
+    onNodeEnter={handleNodeEnter}
+    onNodeMove={handleNodeMove}
+    onNodeLeave={handleNodeLeave}
+  />
+
+  <MeshTooltip
+    {tooltipNode}
+    {tooltipX}
+    {tooltipY}
+    {nodeDragDidMove}
+  />
+</div>
+
+<style>
+  .mesh-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    cursor: grab;
+    user-select: none;
+    opacity: 0;
+    transition: opacity 0.6s ease-out;
+  }
+
+  .mesh-container.mesh-settled {
+    opacity: 1;
+  }
+
+  .mesh-container:active {
+    cursor: grabbing;
+  }
+</style>
diff --git a/src/components/DesktopSideNav.svelte b/src/components/DesktopSideNav.svelte
index de2dfef..0664d43 100644
--- a/src/components/DesktopSideNav.svelte
+++ b/src/components/DesktopSideNav.svelte
@@ -76,8 +76,7 @@
       href: '/groups',
       label: 'Groups',
       icon: UsersThreeIcon,
-      match: (p) => p.startsWith('/groups'),
-      badge: 'members'
+      match: (p) => p.startsWith('/groups')
     },
     {
       href: '/messages',
diff --git a/src/components/MembershipBeltBadge.svelte b/src/components/MembershipBeltBadge.svelte
new file mode 100644
index 0000000..e7e999d
--- /dev/null
+++ b/src/components/MembershipBeltBadge.svelte
@@ -0,0 +1,111 @@
+<script lang="ts">
+  import { onDestroy, onMount } from 'svelte';
+  import {
+    getMembership,
+    getMembershipLabel,
+    membershipStatusMap,
+    queueMembershipLookup,
+    type MembershipStatus
+  } from '$lib/stores/membershipStatus';
+
+  export let pubkey: string;
+  export let size: number = 18;
+
+  let membershipMap: Record<string, MembershipStatus> = {};
+
+  const unsubscribe = membershipStatusMap.subscribe((value) => {
+    membershipMap = value;
+  });
+
+  $: normalizedPubkey = String(pubkey || '').trim().toLowerCase();
+  $: status = membershipMap[normalizedPubkey];
+  $: isActiveMember = Boolean(status?.active);
+  $: tooltipLabel = getMembershipLabel(status?.tier || 'unknown');
+  $: beltColor = (() => {
+    switch (status?.tier) {
+      case 'founders':
+        return 'rgba(255, 215, 0, 0.9)';
+      case 'pro_kitchen':
+        return 'rgba(139, 92, 246, 0.85)';
+      case 'cook_plus':
+        return 'rgba(249, 115, 22, 0.85)';
+      default:
+        return 'rgba(249, 115, 22, 0.85)';
+    }
+  })();
+
+  $: if (normalizedPubkey) {
+    queueMembershipLookup(normalizedPubkey);
+  }
+
+  onMount(() => {
+    if (normalizedPubkey) {
+      void getMembership([normalizedPubkey]);
+    }
+  });
+
+  onDestroy(() => {
+    unsubscribe();
+  });
+</script>
+
+{#if isActiveMember}
+  <span
+    title={tooltipLabel}
+    style="display: inline-flex; vertical-align: middle; flex-shrink: 0;"
+  >
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-label={tooltipLabel}
+      role="img"
+    >
+      <!-- Left strap -->
+      <path
+        d="M2 8 L6 6 L6 18 L2 16 Z"
+        fill={beltColor}
+        stroke="rgba(0,0,0,0.5)"
+        stroke-width="0.8"
+      />
+      <!-- Right strap -->
+      <path
+        d="M22 8 L18 6 L18 18 L22 16 Z"
+        fill={beltColor}
+        stroke="rgba(0,0,0,0.5)"
+        stroke-width="0.8"
+      />
+      <!-- Center plate -->
+      <rect
+        x="6"
+        y="5"
+        width="12"
+        height="14"
+        rx="2"
+        fill={beltColor}
+        stroke="rgba(0,0,0,0.5)"
+        stroke-width="0.8"
+      />
+      <!-- Inner plate detail -->
+      <rect
+        x="8"
+        y="7"
+        width="8"
+        height="10"
+        rx="1"
+        fill="none"
+        stroke="rgba(0,0,0,0.35)"
+        stroke-width="0.6"
+      />
+      <!-- Diamond detail -->
+      <polygon
+        points="12,8.5 14,12 12,15.5 10,12"
+        fill="rgba(255,255,255,0.35)"
+        stroke="rgba(0,0,0,0.3)"
+        stroke-width="0.5"
+      />
+    </svg>
+  </span>
+{/if}
diff --git a/src/components/UserSidePanel.svelte b/src/components/UserSidePanel.svelte
index d3007b8..81ce58c 100644
--- a/src/components/UserSidePanel.svelte
+++ b/src/components/UserSidePanel.svelte
@@ -445,9 +445,6 @@
             >
               <StorefrontIcon size={22} />
               <span class="font-medium">The Pantry</span>
-              <span class="text-xs px-2 py-0.5 rounded-full bg-primary/10 text-primary font-medium"
-                >Members</span
-              >
             </button>
           </li>
         </ul>
diff --git a/src/components/mesh/MeshCanvas.svelte b/src/components/mesh/MeshCanvas.svelte
new file mode 100644
index 0000000..6e0adcb
--- /dev/null
+++ b/src/components/mesh/MeshCanvas.svelte
@@ -0,0 +1,187 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import type { MeshEdge, MeshVisualTheme, SimMeshNode } from '$lib/mesh/meshTypes';
+  import { getEdgeColors } from '$lib/mesh/meshTheme';
+  import { getViewportBounds, isEdgeVisible } from '$lib/mesh/meshViewport';
+
+  export let edges: MeshEdge[] = [];
+  export let width: number;
+  export let height: number;
+  export let panX: number;
+  export let panY: number;
+  export let zoom: number;
+  export let highlightedNodeId: string | null = null;
+  export let isDarkMode: boolean = false;
+  export let visualTheme: MeshVisualTheme = 'default';
+  export let showTopEdges: boolean = false;
+
+  let canvasEl: HTMLCanvasElement;
+  let rafId: number | null = null;
+
+  function isEdgeHighlighted(edge: MeshEdge): boolean {
+    if (!highlightedNodeId) return false;
+    const src = (edge.source as SimMeshNode).id ?? (edge.source as string);
+    const tgt = (edge.target as SimMeshNode).id ?? (edge.target as string);
+    return src === highlightedNodeId || tgt === highlightedNodeId;
+  }
+
+  export function scheduleDrawEdges() {
+    if (rafId !== null) return;
+    rafId = requestAnimationFrame(() => {
+      rafId = null;
+      drawEdges();
+    });
+  }
+
+  export function drawEdges() {
+    if (!canvasEl) return;
+    const ctx = canvasEl.getContext('2d');
+    if (!ctx) return;
+
+    const dpr = window.devicePixelRatio || 1;
+    const cw = width * dpr;
+    const ch = height * dpr;
+
+    if (canvasEl.width !== cw || canvasEl.height !== ch) {
+      canvasEl.width = cw;
+      canvasEl.height = ch;
+    }
+
+    ctx.clearRect(0, 0, cw, ch);
+
+    const hasHighlight = highlightedNodeId !== null;
+
+    // Skip all edge drawing when nothing to show
+    if (!hasHighlight && !showTopEdges) {
+      return;
+    }
+
+    ctx.save();
+    ctx.scale(dpr, dpr);
+    ctx.translate(panX, panY);
+    ctx.scale(zoom, zoom);
+
+    const colors = getEdgeColors(visualTheme, isDarkMode);
+    const bounds = getViewportBounds(panX, panY, zoom, width, height);
+    const useConstellation = visualTheme === 'constellation';
+    const invZoom = 1 / zoom;
+
+    // Single pass over all edges — sort by type inline
+    for (const edge of edges) {
+      if (!isEdgeVisible(edge, bounds)) continue;
+
+      const source = edge.source as SimMeshNode;
+      const target = edge.target as SimMeshNode;
+      if (source.x == null || source.y == null || target.x == null || target.y == null) continue;
+
+      const edgeType = edge.edgeType;
+
+      if (edgeType === 'recipe-tag') {
+        ctx.shadowBlur = 0;
+        ctx.lineWidth = 0.4 * invZoom;
+
+        if (hasHighlight) {
+          const lit = isEdgeHighlighted(edge);
+          ctx.strokeStyle = lit ? colors.recipeTagHighlight : colors.recipeTagDim;
+        } else {
+          ctx.strokeStyle = colors.recipeTagBase;
+        }
+
+        ctx.beginPath();
+        ctx.moveTo(source.x, source.y);
+        ctx.lineTo(target.x, target.y);
+        ctx.stroke();
+      } else if (edgeType === 'recipe-recipe') {
+        const lit = !hasHighlight || isEdgeHighlighted(edge);
+        const w = edge.weight;
+        const lineWidth = (0.5 + w * 0.7) * invZoom;
+
+        const mx = (source.x + target.x) / 2;
+        const my = (source.y + target.y) / 2;
+        const dx = target.x - source.x;
+        const dy = target.y - source.y;
+        const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+        const offset = Math.min(dist * 0.15, 25);
+        const cpx = mx - (dy / dist) * offset;
+        const cpy = my + (dx / dist) * offset;
+
+        if (lit && w >= 4) {
+          ctx.shadowBlur = 3;
+          ctx.shadowColor = colors.recipeRecipeGlow;
+        } else {
+          ctx.shadowBlur = 0;
+        }
+
+        if (lit) {
+          const alpha = useConstellation
+            ? Math.min(0.12 + w * 0.06, 0.5)
+            : isDarkMode
+              ? Math.min(0.15 + w * 0.05, 0.5)
+              : Math.min(0.1 + w * 0.04, 0.4);
+          const finalAlpha = hasHighlight ? Math.min(alpha * 2.5, 0.9) : alpha;
+
+          if (useConstellation) {
+            ctx.strokeStyle = `rgba(180, 200, 240, ${finalAlpha})`;
+          } else if (isDarkMode) {
+            ctx.strokeStyle = `rgba(251, 191, 36, ${finalAlpha})`;
+          } else {
+            ctx.strokeStyle = `rgba(234, 88, 12, ${finalAlpha})`;
+          }
+        } else {
+          if (useConstellation) {
+            ctx.strokeStyle = 'rgba(180, 200, 240, 0.02)';
+          } else {
+            ctx.strokeStyle = isDarkMode
+              ? 'rgba(251, 191, 36, 0.03)'
+              : 'rgba(234, 88, 12, 0.02)';
+          }
+        }
+        ctx.lineWidth = lit ? lineWidth : lineWidth * 0.5;
+
+        ctx.beginPath();
+        ctx.moveTo(source.x, source.y);
+        ctx.quadraticCurveTo(cpx, cpy, target.x, target.y);
+        ctx.stroke();
+      } else if (edgeType === 'recipe-chef') {
+        ctx.shadowBlur = 0;
+
+        if (hasHighlight) {
+          const lit = isEdgeHighlighted(edge);
+          ctx.strokeStyle = lit
+            ? (useConstellation ? 'rgba(180, 200, 240, 0.3)' : 'rgba(139, 92, 246, 0.35)')
+            : 'rgba(139, 92, 246, 0.02)';
+        } else {
+          ctx.strokeStyle = useConstellation ? 'rgba(180, 200, 240, 0.06)' : 'rgba(139, 92, 246, 0.08)';
+        }
+
+        ctx.lineWidth = 0.6 * invZoom;
+        const dashLen = 4 * invZoom;
+        ctx.setLineDash([dashLen, dashLen]);
+        ctx.beginPath();
+        ctx.moveTo(source.x, source.y);
+        ctx.lineTo(target.x, target.y);
+        ctx.stroke();
+        ctx.setLineDash([]);
+      }
+    }
+
+    ctx.shadowBlur = 0;
+    ctx.shadowColor = 'transparent';
+    ctx.restore();
+  }
+
+  // Reactive redraw when inputs change
+  // Each dependency is explicitly listed so Svelte tracks them properly
+  $: edges, panX, panY, zoom, highlightedNodeId, isDarkMode, visualTheme, showTopEdges,
+     canvasEl && width > 0 && height > 0 && scheduleDrawEdges();
+
+  onDestroy(() => {
+    if (rafId !== null) cancelAnimationFrame(rafId);
+  });
+</script>
+
+<canvas
+  bind:this={canvasEl}
+  class="absolute inset-0 w-full h-full"
+  style="pointer-events: none;"
+/>
diff --git a/src/components/mesh/MeshControlPanel.svelte b/src/components/mesh/MeshControlPanel.svelte
new file mode 100644
index 0000000..e6332eb
--- /dev/null
+++ b/src/components/mesh/MeshControlPanel.svelte
@@ -0,0 +1,401 @@
+<script lang="ts">
+  import type { MeshVisualTheme } from '$lib/mesh/meshTypes';
+  import { meshVisualTheme, meshLayers, meshFilters } from '$lib/mesh/meshStore';
+  import { CURATED_TAG_SECTIONS } from '$lib/consts';
+  import { theme } from '$lib/themeStore';
+
+  export let recipeCount: number = 0;
+  export let tagCount: number = 0;
+  export let connectionCount: number = 0;
+  export let loading: boolean = false;
+  export let hasError: boolean = false;
+
+  $: resolvedTheme = $theme === 'system' ? theme.getResolvedTheme() : $theme;
+  $: isDarkMode = resolvedTheme === 'dark';
+  $: visualTheme = $meshVisualTheme;
+  $: layers = $meshLayers;
+  $: filters = $meshFilters;
+  $: isConstellation = visualTheme === 'constellation';
+
+  let searchValue = '';
+  let showFilters = false;
+
+  // Get cuisine tags from curated sections
+  $: cuisineTags = CURATED_TAG_SECTIONS.find((s) => s.title === 'Explore by culture')?.tags || [];
+  $: dietaryTags = CURATED_TAG_SECTIONS.find((s) => s.title === 'Dietary')?.tags || [];
+
+  function handleSearch() {
+    meshFilters.update((f) => ({ ...f, search: searchValue }));
+  }
+
+  function clearSearch() {
+    searchValue = '';
+    meshFilters.update((f) => ({ ...f, search: '' }));
+  }
+
+  function toggleLayer(layer: 'recipes' | 'tags' | 'chefs') {
+    meshLayers.update((l) => ({ ...l, [layer]: !l[layer] }));
+  }
+
+  function toggleTheme() {
+    meshVisualTheme.update((t) => t === 'default' ? 'constellation' : 'default');
+  }
+
+  function toggleCuisineFilter(tag: string) {
+    meshFilters.update((f) => {
+      const cuisine = f.cuisine.includes(tag)
+        ? f.cuisine.filter((c) => c !== tag)
+        : [...f.cuisine, tag];
+      return { ...f, cuisine };
+    });
+  }
+
+  function clearAllFilters() {
+    searchValue = '';
+    meshFilters.set({
+      search: '',
+      cuisine: [],
+      ingredient: [],
+      difficulty: [],
+      time: [],
+      dietary: [],
+      lightningGated: null,
+      membershipTier: null,
+      creator: null
+    });
+  }
+
+  $: hasActiveFilters = filters.search !== '' ||
+    filters.cuisine.length > 0 ||
+    filters.ingredient.length > 0 ||
+    filters.dietary.length > 0 ||
+    filters.lightningGated !== null ||
+    filters.membershipTier !== null ||
+    filters.creator !== null;
+</script>
+
+<div class="mesh-control-panel" class:constellation={isConstellation}>
+  <!-- Header row -->
+  <div class="panel-header">
+    <div class="panel-title">
+      <h1 class="text-lg font-bold" style="color: {isConstellation ? 'rgba(220, 230, 255, 0.9)' : 'var(--color-text-primary)'};">
+        {isConstellation ? 'Star Map' : 'Culinary Mesh'}
+      </h1>
+      {#if !loading && !hasError}
+        <p class="text-xs" style="color: {isConstellation ? 'rgba(180, 200, 240, 0.5)' : 'var(--color-caption)'};">
+          {recipeCount} recipes &middot; {tagCount} tags &middot; {connectionCount} connections
+        </p>
+      {/if}
+    </div>
+
+    <div class="panel-actions">
+      <!-- Theme toggle -->
+      <button
+        class="theme-toggle"
+        class:active={isConstellation}
+        on:click={toggleTheme}
+        aria-label="Toggle constellation theme"
+        title={isConstellation ? 'Default view' : 'Constellation view'}
+      >
+        {isConstellation ? '&#9728;' : '&#9733;'}
+      </button>
+
+      <!-- Filter toggle -->
+      <button
+        class="filter-toggle"
+        class:active={showFilters || hasActiveFilters}
+        on:click={() => showFilters = !showFilters}
+        aria-label="Toggle filters"
+        aria-expanded={showFilters}
+      >
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+          <path d="M1 2h14l-5 6v5l-4 2V8L1 2z"/>
+        </svg>
+        {#if hasActiveFilters}
+          <span class="filter-badge"></span>
+        {/if}
+      </button>
+    </div>
+  </div>
+
+  <!-- Expandable filter area -->
+  {#if showFilters}
+    <div class="panel-filters">
+      <!-- Search -->
+      <div class="filter-row">
+        <input
+          type="text"
+          placeholder="Search recipes & tags..."
+          bind:value={searchValue}
+          on:input={handleSearch}
+          class="search-input"
+          style="background-color: {isConstellation ? 'rgba(180, 200, 240, 0.08)' : 'var(--color-input-bg)'}; color: {isConstellation ? 'rgba(220, 230, 255, 0.9)' : 'var(--color-text-primary)'}; border-color: {isConstellation ? 'rgba(180, 200, 240, 0.2)' : 'var(--color-input-border)'};"
+          aria-label="Search mesh"
+        />
+        {#if searchValue}
+          <button class="clear-search" on:click={clearSearch} aria-label="Clear search">&times;</button>
+        {/if}
+      </div>
+
+      <!-- Layer toggles -->
+      <div class="filter-row">
+        <span class="filter-label" style="color: {isConstellation ? 'rgba(180, 200, 240, 0.5)' : 'var(--color-caption)'};">Layers:</span>
+        <div class="layer-pills">
+          <button
+            class="layer-pill"
+            class:active={layers.recipes}
+            class:constellation={isConstellation}
+            on:click={() => toggleLayer('recipes')}
+          >Recipes</button>
+          <button
+            class="layer-pill"
+            class:active={layers.tags}
+            class:constellation={isConstellation}
+            on:click={() => toggleLayer('tags')}
+          >Tags</button>
+          <button
+            class="layer-pill"
+            class:active={layers.chefs}
+            class:constellation={isConstellation}
+            on:click={() => toggleLayer('chefs')}
+          >Chefs</button>
+        </div>
+      </div>
+
+      <!-- Cuisine chips -->
+      {#if cuisineTags.length > 0}
+        <div class="filter-row">
+          <span class="filter-label" style="color: {isConstellation ? 'rgba(180, 200, 240, 0.5)' : 'var(--color-caption)'};">Cuisine:</span>
+          <div class="filter-chips">
+            {#each cuisineTags.slice(0, 12) as tag}
+              <button
+                class="filter-chip"
+                class:active={filters.cuisine.includes(tag)}
+                class:constellation={isConstellation}
+                on:click={() => toggleCuisineFilter(tag)}
+              >{tag}</button>
+            {/each}
+          </div>
+        </div>
+      {/if}
+
+      <!-- Clear all -->
+      {#if hasActiveFilters}
+        <div class="filter-row">
+          <button class="clear-all" on:click={clearAllFilters}>Clear all filters</button>
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .mesh-control-panel {
+    flex-shrink: 0;
+    z-index: 10;
+    background-color: var(--color-bg-primary);
+    border-bottom: 1px solid var(--color-input-border);
+  }
+
+  .mesh-control-panel.constellation {
+    background-color: rgba(10, 12, 25, 0.95);
+    border-bottom-color: rgba(180, 200, 240, 0.1);
+  }
+
+  .panel-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.75rem 1rem;
+  }
+
+  .panel-title {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .panel-actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .theme-toggle,
+  .filter-toggle {
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 8px;
+    border: 1px solid var(--color-input-border);
+    background: transparent;
+    color: var(--color-text-primary);
+    cursor: pointer;
+    position: relative;
+    font-size: 16px;
+    transition: background-color 0.15s, border-color 0.15s;
+  }
+
+  .theme-toggle:hover,
+  .filter-toggle:hover {
+    background-color: var(--color-input-bg);
+  }
+
+  .theme-toggle.active {
+    background-color: rgba(180, 200, 240, 0.15);
+    border-color: rgba(180, 200, 240, 0.3);
+    color: rgba(220, 230, 255, 0.9);
+  }
+
+  .filter-toggle.active {
+    background-color: rgba(249, 115, 22, 0.1);
+    border-color: rgba(249, 115, 22, 0.3);
+  }
+
+  .filter-badge {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--color-primary);
+  }
+
+  .panel-filters {
+    padding: 0 1rem 0.75rem;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .filter-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    position: relative;
+    flex-wrap: wrap;
+  }
+
+  .filter-label {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    flex-shrink: 0;
+  }
+
+  .search-input {
+    flex: 1;
+    padding: 6px 10px;
+    border-radius: 8px;
+    border: 1px solid;
+    font-size: 13px;
+    outline: none;
+    min-width: 0;
+  }
+
+  .search-input:focus {
+    border-color: var(--color-primary);
+  }
+
+  .clear-search {
+    position: absolute;
+    right: 6px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background: var(--color-input-border);
+    color: var(--color-text-primary);
+    cursor: pointer;
+    font-size: 14px;
+    line-height: 1;
+  }
+
+  .layer-pills {
+    display: flex;
+    gap: 4px;
+  }
+
+  .layer-pill {
+    padding: 4px 12px;
+    border-radius: 999px;
+    border: 1px solid var(--color-input-border);
+    background: transparent;
+    color: var(--color-caption);
+    font-size: 12px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.15s;
+  }
+
+  .layer-pill.active {
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+    color: white;
+  }
+
+  .layer-pill.constellation.active {
+    background: rgba(180, 200, 240, 0.2);
+    border-color: rgba(180, 200, 240, 0.4);
+    color: rgba(220, 230, 255, 0.9);
+  }
+
+  .filter-chips {
+    display: flex;
+    gap: 4px;
+    flex-wrap: wrap;
+    overflow: hidden;
+    max-height: 60px;
+  }
+
+  .filter-chip {
+    padding: 3px 10px;
+    border-radius: 999px;
+    border: 1px solid var(--color-input-border);
+    background: transparent;
+    color: var(--color-text-primary);
+    font-size: 11px;
+    cursor: pointer;
+    transition: all 0.15s;
+    white-space: nowrap;
+  }
+
+  .filter-chip.active {
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+    color: white;
+  }
+
+  .filter-chip.constellation.active {
+    background: rgba(180, 200, 240, 0.2);
+    border-color: rgba(180, 200, 240, 0.4);
+    color: rgba(220, 230, 255, 0.9);
+  }
+
+  .clear-all {
+    font-size: 12px;
+    color: var(--color-primary);
+    cursor: pointer;
+    background: none;
+    border: none;
+    padding: 0;
+  }
+
+  .clear-all:hover {
+    text-decoration: underline;
+  }
+
+  .constellation .mesh-control-panel .theme-toggle,
+  .constellation .filter-toggle {
+    border-color: rgba(180, 200, 240, 0.2);
+    color: rgba(220, 230, 255, 0.7);
+  }
+</style>
diff --git a/src/components/mesh/MeshDetailDrawer.svelte b/src/components/mesh/MeshDetailDrawer.svelte
new file mode 100644
index 0000000..9ada699
--- /dev/null
+++ b/src/components/mesh/MeshDetailDrawer.svelte
@@ -0,0 +1,259 @@
+<script lang="ts">
+  import { fly } from 'svelte/transition';
+  import { createEventDispatcher, onDestroy } from 'svelte';
+  import { browser } from '$app/environment';
+  import type { MeshNode, RecipeNode, TagNode, ChefNode } from '$lib/mesh/meshTypes';
+  import Avatar from '../Avatar.svelte';
+
+  export let node: MeshNode;
+
+  const dispatch = createEventDispatcher<{ close: void }>();
+
+  // Touch handling for swipe-to-close
+  let touchStartX = 0;
+  let isSwiping = false;
+
+  function close() {
+    dispatch('close');
+  }
+
+  function handleBackdropClick(e: MouseEvent) {
+    if (e.target === e.currentTarget) {
+      close();
+    }
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') {
+      close();
+    }
+  }
+
+  function handleTouchStart(e: TouchEvent) {
+    touchStartX = e.touches[0].clientX;
+    isSwiping = true;
+  }
+
+  function handleTouchEnd(e: TouchEvent) {
+    if (!isSwiping) return;
+    const touchEndX = e.changedTouches[0].clientX;
+    if (touchEndX - touchStartX > 100) {
+      close();
+    }
+    isSwiping = false;
+  }
+
+  // Prevent body scroll when drawer is open
+  $: if (browser) {
+    document.body.style.overflow = 'hidden';
+  }
+
+  onDestroy(() => {
+    if (browser) {
+      document.body.style.overflow = '';
+    }
+  });
+</script>
+
+<svelte:window on:keydown={handleKeydown} />
+
+<!-- Backdrop -->
+<div
+  class="drawer-backdrop"
+  on:click={handleBackdropClick}
+  role="presentation"
+  transition:fly={{ duration: 200, opacity: 0 }}
+/>
+
+<!-- Drawer -->
+<aside
+  class="drawer-panel"
+  transition:fly={{ x: 400, duration: 300, easing: (t) => (t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2) }}
+  on:touchstart={handleTouchStart}
+  on:touchend={handleTouchEnd}
+  role="dialog"
+  aria-modal="true"
+  aria-label="Node details"
+>
+  <!-- Close button -->
+  <div class="drawer-header">
+    <button
+      class="close-btn"
+      on:click={close}
+      aria-label="Close details"
+    >
+      <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
+        <path d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"/>
+      </svg>
+    </button>
+  </div>
+
+  <div class="drawer-content">
+    {#if node.type === 'recipe'}
+      {@const recipe = node}
+      <div class="recipe-detail">
+        <img
+          src={recipe.image}
+          alt={recipe.title}
+          class="recipe-image"
+          loading="lazy"
+        />
+        <h2 class="text-lg font-bold mt-3" style="color: var(--color-text-primary);">
+          {recipe.title}
+        </h2>
+        <div class="flex items-center gap-2 mt-2">
+          <Avatar pubkey={recipe.pubkey} size={28} showRing={true} />
+          <span class="text-sm" style="color: var(--color-caption);">Author</span>
+        </div>
+        <div class="flex gap-3 mt-3 text-sm" style="color: var(--color-caption);">
+          {#if recipe.zaps > 0}
+            <span>&#9889; {recipe.zaps} zaps</span>
+          {/if}
+          {#if recipe.likes > 0}
+            <span>&#10084; {recipe.likes} likes</span>
+          {/if}
+        </div>
+        {#if recipe.tags.length > 0}
+          <div class="flex flex-wrap gap-1.5 mt-3">
+            {#each recipe.tags as tag}
+              <a href="/tag/{tag}" class="tag-chip">{tag}</a>
+            {/each}
+          </div>
+        {/if}
+        <a
+          href={recipe.link}
+          class="view-btn mt-4"
+        >
+          View Recipe
+        </a>
+      </div>
+    {:else if node.type === 'tag'}
+      {@const tag = node}
+      <div class="tag-detail">
+        <div class="text-4xl text-center">{tag.emoji}</div>
+        <h2 class="text-lg font-bold mt-2 text-center" style="color: var(--color-text-primary);">
+          {tag.name}
+        </h2>
+        <p class="text-sm text-center mt-1" style="color: var(--color-caption);">
+          {tag.count} recipe{tag.count !== 1 ? 's' : ''} &middot; {tag.sectionTitle}
+        </p>
+        <a
+          href="/tag/{tag.name}"
+          class="view-btn mt-4"
+        >
+          View All Recipes
+        </a>
+      </div>
+    {:else if node.type === 'chef'}
+      {@const chef = node}
+      <div class="chef-detail">
+        <div class="flex justify-center">
+          <Avatar pubkey={chef.pubkey} size={64} showRing={true} />
+        </div>
+        <h2 class="text-lg font-bold mt-3 text-center" style="color: var(--color-text-primary);">
+          {chef.displayName || 'Chef'}
+        </h2>
+        <p class="text-sm text-center mt-1" style="color: var(--color-caption);">
+          {chef.recipeCount} recipe{chef.recipeCount !== 1 ? 's' : ''} in the mesh
+        </p>
+      </div>
+    {/if}
+  </div>
+</aside>
+
+<style>
+  .drawer-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 50;
+    background-color: rgba(0, 0, 0, 0.4);
+    backdrop-filter: blur(2px);
+  }
+
+  .drawer-panel {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 51;
+    width: 100%;
+    max-width: 360px;
+    background-color: var(--color-bg-secondary);
+    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.2);
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+  }
+
+  .drawer-header {
+    display: flex;
+    justify-content: flex-end;
+    padding: 12px;
+    flex-shrink: 0;
+  }
+
+  .close-btn {
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 8px;
+    cursor: pointer;
+    color: var(--color-text-primary);
+    transition: background-color 0.15s;
+  }
+
+  .close-btn:hover {
+    background-color: var(--color-input-bg);
+  }
+
+  .drawer-content {
+    padding: 0 1.25rem 1.5rem;
+    flex: 1;
+  }
+
+  .recipe-image {
+    width: 100%;
+    aspect-ratio: 4 / 3;
+    object-fit: cover;
+    border-radius: 12px;
+  }
+
+  .tag-chip {
+    padding: 2px 10px;
+    border-radius: 999px;
+    border: 1px solid var(--color-input-border);
+    font-size: 12px;
+    color: var(--color-text-primary);
+    text-decoration: none;
+    transition: background-color 0.15s;
+  }
+
+  .tag-chip:hover {
+    background-color: var(--color-input-bg);
+  }
+
+  .view-btn {
+    display: block;
+    text-align: center;
+    padding: 10px 20px;
+    border-radius: 10px;
+    background-color: var(--color-primary);
+    color: white;
+    font-weight: 600;
+    font-size: 14px;
+    text-decoration: none;
+    transition: opacity 0.15s;
+  }
+
+  .view-btn:hover {
+    opacity: 0.9;
+  }
+
+  @media (max-width: 400px) {
+    .drawer-panel {
+      max-width: 100%;
+    }
+  }
+</style>
diff --git a/src/components/mesh/MeshHeroOverlay.svelte b/src/components/mesh/MeshHeroOverlay.svelte
new file mode 100644
index 0000000..b343b87
--- /dev/null
+++ b/src/components/mesh/MeshHeroOverlay.svelte
@@ -0,0 +1,427 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import type { MeshNode, MeshEdge, RecipeNode } from '$lib/mesh/meshTypes';
+  import { theme } from '$lib/themeStore';
+
+  export let nodes: MeshNode[] = [];
+  export let edges: MeshEdge[] = [];
+  export let ready: boolean = false;
+
+  let canvasEl: HTMLCanvasElement;
+  let containerEl: HTMLDivElement;
+  let nodesContainerEl: HTMLDivElement;
+  let width = 0;
+  let height = 0;
+  let rafId: number | null = null;
+  let driftTime = 0;
+  let resizeObserver: ResizeObserver | null = null;
+
+  $: resolvedTheme = $theme === 'system' ? theme.getResolvedTheme() : $theme;
+  $: isDarkMode = resolvedTheme === 'dark';
+
+  // Stable phase data — only regenerate when node IDs actually change
+  type NodePhaseData = { _phase: number; _driftAmplitudeX: number; _driftAmplitudeY: number };
+  let phaseMap = new Map<string, NodePhaseData>();
+  let stableNodes: (MeshNode & NodePhaseData)[] = [];
+
+  // Pre-built node lookup map for O(1) edge resolution
+  let nodeMap = new Map<string, MeshNode & NodePhaseData>();
+
+  // Cached DOM element references — rebuilt once when nodes change
+  let cachedNodeEls: HTMLElement[] | null = null;
+
+  $: {
+    // Only rebuild phases for nodes we haven't seen before
+    let changed = false;
+    for (const n of nodes) {
+      if (!phaseMap.has(n.id)) {
+        phaseMap.set(n.id, {
+          _phase: Math.random() * Math.PI * 2,
+          _driftAmplitudeX: 2 + Math.random() * 3,
+          _driftAmplitudeY: 1.5 + Math.random() * 2.5
+        });
+        changed = true;
+      }
+    }
+    // Always rebuild stableNodes when nodes array changes (identity check by Svelte)
+    stableNodes = nodes.map((n) => ({ ...n, ...phaseMap.get(n.id)! }));
+
+    // Rebuild the lookup map
+    nodeMap = new Map();
+    for (const n of stableNodes) {
+      nodeMap.set(n.id, n);
+    }
+
+    // Invalidate cached DOM refs when nodes change structurally
+    cachedNodeEls = null;
+  }
+
+  function nodeSize(node: MeshNode): number {
+    if (node.type === 'tag') return 44;
+    if (node.type === 'chef') return 36;
+    switch ((node as RecipeNode).tier) {
+      case 1: return 56;
+      case 2: return 38;
+      case 3: return 26;
+      default: return 26;
+    }
+  }
+
+  // Pre-compute half sizes to avoid recalculating every frame
+  let halfSizes: number[] = [];
+  $: halfSizes = stableNodes.map((n) => nodeSize(n) / 2);
+
+  // Compute offset to center the node cluster within the actual container.
+  // The simulation positions nodes around a fixed center (300, 250),
+  // so we find the bounding-box midpoint and shift everything to the container center.
+  let offsetX = 0;
+  let offsetY = 0;
+
+  $: if (stableNodes.length > 0 && width > 0 && height > 0) {
+    let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+    for (const n of stableNodes) {
+      if (n.x == null || n.y == null) continue;
+      if (n.x < minX) minX = n.x;
+      if (n.x > maxX) maxX = n.x;
+      if (n.y < minY) minY = n.y;
+      if (n.y > maxY) maxY = n.y;
+    }
+    if (minX !== Infinity) {
+      offsetX = width / 2 - (minX + maxX) / 2;
+      offsetY = height / 2 - (minY + maxY) / 2;
+    }
+  }
+
+  function animationLoop() {
+    if (!canvasEl || !ready) {
+      rafId = requestAnimationFrame(animationLoop);
+      return;
+    }
+
+    driftTime += 0.0005;
+
+    const ox = offsetX;
+    const oy = offsetY;
+
+    // Draw edges on canvas
+    const ctx = canvasEl.getContext('2d');
+    if (ctx) {
+      const dpr = window.devicePixelRatio || 1;
+      const cw = width * dpr;
+      const ch = height * dpr;
+
+      if (canvasEl.width !== cw || canvasEl.height !== ch) {
+        canvasEl.width = cw;
+        canvasEl.height = ch;
+      }
+
+      ctx.clearRect(0, 0, cw, ch);
+      ctx.save();
+      ctx.scale(dpr, dpr);
+
+      ctx.lineWidth = 0.5;
+      ctx.strokeStyle = isDarkMode ? 'rgba(255, 122, 61, 0.06)' : 'rgba(236, 71, 0, 0.04)';
+
+      // Batch all edges into a single path for one stroke call
+      ctx.beginPath();
+      for (const edge of edges) {
+        const srcId = typeof edge.source === 'string' ? edge.source : (edge.source as MeshNode).id;
+        const tgtId = typeof edge.target === 'string' ? edge.target : (edge.target as MeshNode).id;
+        const source = nodeMap.get(srcId);
+        const target = nodeMap.get(tgtId);
+
+        if (!source || !target || source.x == null || source.y == null || target.x == null || target.y == null) continue;
+
+        const sx = source.x + ox + Math.sin(driftTime + source._phase) * source._driftAmplitudeX;
+        const sy = source.y + oy + Math.cos(driftTime * 0.7 + source._phase) * source._driftAmplitudeY;
+        const tx = target.x + ox + Math.sin(driftTime + target._phase) * target._driftAmplitudeX;
+        const ty = target.y + oy + Math.cos(driftTime * 0.7 + target._phase) * target._driftAmplitudeY;
+
+        ctx.moveTo(sx, sy);
+        ctx.lineTo(tx, ty);
+      }
+      ctx.stroke();
+
+      ctx.restore();
+    }
+
+    // Update node positions via direct DOM manipulation
+    // Cache DOM refs — only query once after mount / node change
+    if (!cachedNodeEls && nodesContainerEl) {
+      cachedNodeEls = Array.from(nodesContainerEl.querySelectorAll('.hero-node'));
+    }
+    if (cachedNodeEls) {
+      for (let i = 0; i < stableNodes.length && i < cachedNodeEls.length; i++) {
+        const n = stableNodes[i];
+        if (n.x == null || n.y == null) continue;
+        const dx = Math.sin(driftTime + n._phase) * n._driftAmplitudeX;
+        const dy = Math.cos(driftTime * 0.7 + n._phase) * n._driftAmplitudeY;
+        cachedNodeEls[i].style.transform = `translate(${n.x + ox + dx - halfSizes[i]}px, ${n.y + oy + dy - halfSizes[i]}px)`;
+      }
+    }
+
+    rafId = requestAnimationFrame(animationLoop);
+  }
+
+  function scrollToRecipes() {
+    const section = document.querySelector('[data-section="fresh-kitchen"]');
+    if (section) {
+      section.scrollIntoView({ behavior: 'smooth' });
+    }
+  }
+
+  onMount(() => {
+    resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        width = entry.contentRect.width;
+        height = entry.contentRect.height;
+      }
+    });
+
+    if (containerEl) {
+      resizeObserver.observe(containerEl);
+      width = containerEl.clientWidth;
+      height = containerEl.clientHeight;
+    }
+
+    rafId = requestAnimationFrame(animationLoop);
+  });
+
+  onDestroy(() => {
+    if (rafId !== null) cancelAnimationFrame(rafId);
+    if (resizeObserver) resizeObserver.disconnect();
+  });
+</script>
+
+<div
+  class="mesh-hero"
+  class:dark={isDarkMode}
+  class:ready
+  bind:this={containerEl}
+>
+  <!-- Canvas for edges -->
+  <canvas
+    bind:this={canvasEl}
+    class="hero-canvas"
+  />
+
+  <!-- Nodes overlay -->
+  <div class="hero-nodes" bind:this={nodesContainerEl}>
+    {#each stableNodes as node, i (node.id)}
+      {@const size = nodeSize(node)}
+      {#if node.type === 'recipe'}
+        <div
+          class="hero-node hero-recipe-node"
+          class:tier-1={node.tier === 1}
+          class:tier-2={node.tier === 2}
+          class:tier-3={node.tier === 3}
+          style="
+            width: {size}px;
+            height: {size}px;
+            left: 0;
+            top: 0;
+            transform: translate({(node.x || 0) + offsetX - size / 2}px, {(node.y || 0) + offsetY - size / 2}px);
+          "
+        >
+          <img
+            src={node.image}
+            alt=""
+            class="rounded-full object-cover"
+            style="width: 100%; height: 100%;"
+            loading="lazy"
+            draggable="false"
+          />
+        </div>
+      {:else if node.type === 'tag'}
+        <div
+          class="hero-node hero-tag-node"
+          style="
+            left: 0;
+            top: 0;
+            transform: translate({(node.x || 0) + offsetX - 22}px, {(node.y || 0) + offsetY - 22}px);
+          "
+        >
+          <div class="hero-tag-circle" class:dark={isDarkMode}>
+            {#if node.emoji}<span class="text-lg">{node.emoji}</span>{/if}
+          </div>
+        </div>
+      {/if}
+    {/each}
+  </div>
+
+  <!-- Centered overlay content -->
+  <div class="hero-overlay">
+    <h1 class="hero-title" style="color: {isDarkMode ? 'rgba(255,255,255,0.95)' : 'rgba(0,0,0,0.9)'};">
+      Culinary Mesh
+    </h1>
+    <div class="hero-ctas">
+      <a href="/mesh" class="hero-cta-primary">
+        Explore the Mesh
+      </a>
+      <button class="hero-cta-secondary" on:click={scrollToRecipes}>
+        I'm Hungry
+      </button>
+    </div>
+  </div>
+
+</div>
+
+<style>
+  .mesh-hero {
+    position: relative;
+    height: 30vh;
+    min-height: 200px;
+    max-height: 280px;
+    overflow: hidden;
+    border-radius: 16px;
+    background: radial-gradient(ellipse at center, rgba(255,252,248,1) 0%, rgba(245,240,235,1) 100%);
+    opacity: 0;
+    transition: opacity 0.8s ease-out;
+  }
+
+  .mesh-hero.dark {
+    background: radial-gradient(ellipse at center, rgba(20,15,12,1) 0%, rgba(10,8,6,1) 100%);
+  }
+
+  .mesh-hero.ready {
+    opacity: 1;
+  }
+
+  .hero-canvas {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
+
+  .hero-nodes {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  .hero-node {
+    position: absolute;
+    border-radius: 9999px;
+    pointer-events: none;
+  }
+
+  .hero-recipe-node {
+    border: 1px solid var(--color-input-border);
+    opacity: 0.7;
+  }
+
+  .hero-recipe-node.tier-1 {
+    border: 2px solid rgb(249, 115, 22);
+    box-shadow: 0 0 8px 2px rgba(249, 115, 22, 0.3);
+    opacity: 0.9;
+  }
+
+  .hero-recipe-node.tier-2 {
+    border: 1.5px solid rgba(249, 115, 22, 0.4);
+    opacity: 0.8;
+  }
+
+  .hero-recipe-node.tier-3 {
+    opacity: 0.5;
+  }
+
+  .hero-tag-node {
+    opacity: 0.6;
+  }
+
+  .hero-tag-circle {
+    width: 44px;
+    height: 44px;
+    border-radius: 9999px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(249, 115, 22, 0.06);
+    border: 1px solid rgba(249, 115, 22, 0.15);
+  }
+
+  .hero-tag-circle.dark {
+    background-color: rgba(249, 115, 22, 0.1);
+    border-color: rgba(249, 115, 22, 0.2);
+  }
+
+  /* Overlay */
+  .hero-overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    z-index: 5;
+    pointer-events: none;
+    text-align: center;
+    padding: 1rem;
+  }
+
+  .hero-title {
+    font-size: 2rem;
+    font-weight: 800;
+    letter-spacing: -0.02em;
+    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
+  }
+
+  .hero-ctas {
+    display: flex;
+    gap: 12px;
+    margin-top: 1.25rem;
+    pointer-events: auto;
+  }
+
+  .hero-cta-primary {
+    padding: 10px 24px;
+    border-radius: 999px;
+    background-color: var(--color-primary);
+    color: white;
+    font-weight: 600;
+    font-size: 14px;
+    text-decoration: none;
+    transition: opacity 0.15s;
+    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
+  }
+
+  .hero-cta-primary:hover {
+    opacity: 0.9;
+  }
+
+  .hero-cta-secondary {
+    padding: 10px 24px;
+    border-radius: 999px;
+    border: 1px solid var(--color-input-border);
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(8px);
+    color: var(--color-text-primary);
+    font-weight: 600;
+    font-size: 14px;
+    cursor: pointer;
+    transition: background-color 0.15s;
+  }
+
+  .hero-cta-secondary:hover {
+    background: rgba(255, 255, 255, 0.2);
+  }
+
+  @media (max-width: 640px) {
+    .mesh-hero {
+      height: 25vh;
+      min-height: 160px;
+      border-radius: 12px;
+    }
+
+    .hero-title {
+      font-size: 1.5rem;
+    }
+
+    .hero-ctas {
+      flex-direction: column;
+      gap: 8px;
+    }
+  }
+</style>
diff --git a/src/components/mesh/MeshLegend.svelte b/src/components/mesh/MeshLegend.svelte
new file mode 100644
index 0000000..e34728d
--- /dev/null
+++ b/src/components/mesh/MeshLegend.svelte
@@ -0,0 +1,121 @@
+<script lang="ts">
+  import type { MeshVisualTheme } from '$lib/mesh/meshTypes';
+
+  export let isDarkMode: boolean = false;
+  export let visualTheme: MeshVisualTheme = 'default';
+
+  $: isConstellation = visualTheme === 'constellation';
+</script>
+
+<div class="mesh-legend" class:dark={isDarkMode || isConstellation} class:constellation={isConstellation}>
+  <div class="mesh-legend-item">
+    <span class="mesh-legend-dot mesh-legend-hero" class:constellation={isConstellation}></span>
+    <span>{isConstellation ? 'Brightest stars' : 'Most loved'}</span>
+  </div>
+  <div class="mesh-legend-item">
+    <span class="mesh-legend-dot mesh-legend-notable" class:constellation={isConstellation}></span>
+    <span>{isConstellation ? 'Notable stars' : 'Notable'}</span>
+  </div>
+  <div class="mesh-legend-item">
+    <span class="mesh-legend-dot mesh-legend-community" class:constellation={isConstellation}></span>
+    <span>{isConstellation ? 'Stars' : 'Community'}</span>
+  </div>
+  <div class="mesh-legend-item">
+    <svg width="24" height="8" viewBox="0 0 24 8" class="mesh-legend-curve" class:constellation={isConstellation}>
+      <path d="M 0 6 Q 12 0 24 6" stroke="currentColor" stroke-width="1.5" fill="none" />
+    </svg>
+    <span>{isConstellation ? 'Constellations' : 'Shared culture'}</span>
+  </div>
+</div>
+
+<style>
+  .mesh-legend {
+    position: absolute;
+    bottom: 16px;
+    left: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    padding: 10px 14px;
+    border-radius: 10px;
+    font-size: 11px;
+    z-index: 20;
+    background-color: rgba(255, 255, 255, 0.7);
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    color: rgba(0, 0, 0, 0.6);
+    backdrop-filter: blur(8px);
+  }
+
+  .mesh-legend.dark {
+    background-color: rgba(20, 15, 12, 0.7);
+    border-color: rgba(255, 255, 255, 0.08);
+    color: rgba(255, 255, 255, 0.5);
+  }
+
+  .mesh-legend.constellation {
+    background-color: rgba(10, 12, 25, 0.7);
+    border-color: rgba(180, 200, 240, 0.1);
+    color: rgba(180, 200, 240, 0.5);
+  }
+
+  .mesh-legend-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .mesh-legend-dot {
+    display: inline-block;
+    border-radius: 9999px;
+    flex-shrink: 0;
+  }
+
+  .mesh-legend-hero {
+    width: 14px;
+    height: 14px;
+    background: rgb(249, 115, 22);
+    box-shadow: 0 0 6px 2px rgba(249, 115, 22, 0.5);
+  }
+
+  .mesh-legend-hero.constellation {
+    background: rgba(220, 230, 255, 0.9);
+    box-shadow: 0 0 6px 2px rgba(200, 220, 255, 0.5);
+  }
+
+  .mesh-legend-notable {
+    width: 10px;
+    height: 10px;
+    background: rgb(249, 115, 22);
+    opacity: 0.7;
+  }
+
+  .mesh-legend-notable.constellation {
+    background: rgba(180, 200, 240, 0.7);
+    opacity: 1;
+  }
+
+  .mesh-legend-community {
+    width: 7px;
+    height: 7px;
+    background: rgb(160, 160, 160);
+    opacity: 0.5;
+  }
+
+  .mesh-legend-community.constellation {
+    background: rgba(140, 160, 200, 0.5);
+    opacity: 1;
+  }
+
+  .mesh-legend-curve {
+    color: rgba(251, 191, 36, 0.6);
+    flex-shrink: 0;
+  }
+
+  .mesh-legend.dark .mesh-legend-curve {
+    color: rgba(251, 191, 36, 0.5);
+  }
+
+  .mesh-legend-curve.constellation {
+    color: rgba(180, 200, 240, 0.5);
+  }
+</style>
diff --git a/src/components/mesh/MeshNodes.svelte b/src/components/mesh/MeshNodes.svelte
new file mode 100644
index 0000000..a6776ee
--- /dev/null
+++ b/src/components/mesh/MeshNodes.svelte
@@ -0,0 +1,437 @@
+<script lang="ts">
+  import type { MeshNode, RecipeNode, TagNode, ChefNode, MeshVisualTheme, SimMeshNode } from '$lib/mesh/meshTypes';
+  import type { SimulationNodeDatum } from 'd3-force';
+  import { getViewportBounds, isInViewport } from '$lib/mesh/meshViewport';
+  import { membershipStatusMap, queueMembershipLookup } from '$lib/stores/membershipStatus';
+  import Avatar from '../Avatar.svelte';
+
+  export let nodes: (MeshNode & SimulationNodeDatum)[] = [];
+  export let nodeVersion: number = 0;
+  export let panX: number;
+  export let panY: number;
+  export let zoom: number;
+  export let width: number;
+  export let height: number;
+  export let highlightedNodeId: string | null = null;
+  export let highlightedNeighborIds: Set<string> = new Set();
+  export let draggedNode: (MeshNode & SimulationNodeDatum) | null = null;
+  export let isDarkMode: boolean = false;
+  export let visualTheme: MeshVisualTheme = 'default';
+
+  // Event handlers are passed as callbacks
+  export let onNodeMouseDown: (node: MeshNode & SimulationNodeDatum, e: MouseEvent) => void = () => {};
+  export let onNodeClick: (e: MouseEvent) => void = () => {};
+  export let onNodeEnter: (node: MeshNode & SimulationNodeDatum, e: MouseEvent) => void = () => {};
+  export let onNodeMove: (e: MouseEvent) => void = () => {};
+  export let onNodeLeave: () => void = () => {};
+
+  $: membershipMap = $membershipStatusMap;
+
+  // Compute visible nodes — depends on nodeVersion to pick up position changes
+  // Using void to register nodeVersion as a dependency without triggering unused-expression errors
+  $: bounds = (void nodeVersion, getViewportBounds(panX, panY, zoom, width, height));
+  $: visibleNodes = (void nodeVersion, nodes.filter((node) => isInViewport(node, bounds)));
+
+  // Queue membership lookups only when nodes structurally change, not on every pan
+  let membershipQueued = new Set<string>();
+  $: {
+    // Only react to node array identity changes, not viewport changes
+    void nodes;
+    for (const node of nodes) {
+      if (node.type === 'recipe' && node.pubkey && !membershipQueued.has(node.pubkey)) {
+        membershipQueued.add(node.pubkey);
+        queueMembershipLookup(node.pubkey);
+      }
+    }
+  }
+
+  function nodeSize(node: MeshNode): number {
+    if (node.type === 'tag') return 56;
+    if (node.type === 'chef') return 48;
+    switch (node.tier) {
+      case 1: return 72;
+      case 2: return 48;
+      case 3: return 32;
+      default: return 32;
+    }
+  }
+
+  function nodeHalf(node: MeshNode): number {
+    return nodeSize(node) / 2;
+  }
+
+  function nodeHref(node: MeshNode): string {
+    if (node.type === 'recipe') return node.link;
+    if (node.type === 'tag') return `/tag/${node.name}`;
+    return '#';
+  }
+
+  function nodeOpacity(node: MeshNode): number {
+    if (!highlightedNodeId) {
+      if (node.type === 'tag' || node.type === 'chef') return 1;
+      return node.tier === 3 ? 0.65 : 1;
+    }
+    return highlightedNeighborIds.has(node.id) ? 1 : 0.12;
+  }
+
+  function nodeScreenX(n: MeshNode & SimulationNodeDatum): number {
+    return (n.x || 0) * zoom + panX;
+  }
+
+  function nodeScreenY(n: MeshNode & SimulationNodeDatum): number {
+    return (n.y || 0) * zoom + panY;
+  }
+
+  // LOD: determine if node should show image based on zoom + tier
+  function shouldShowImage(node: MeshNode): boolean {
+    if (node.type !== 'recipe') return false;
+    if (zoom < 0.6) return false;
+    if (zoom < 0.8) return node.tier <= 2;
+    return true;
+  }
+
+  function getMembershipGlow(node: MeshNode): string {
+    if (node.type !== 'recipe' || !node.pubkey) return '';
+    const status = membershipMap[node.pubkey];
+    if (!status?.active) return '';
+    switch (status.tier) {
+      case 'founders':
+        return '0 0 0 2px rgba(255,215,0,0.85), 0 0 8px 3px rgba(255,215,0,0.4)';
+      case 'pro_kitchen':
+        return '0 0 0 2px rgba(139,92,246,0.8), 0 0 8px 3px rgba(139,92,246,0.4)';
+      case 'cook_plus':
+        return '0 0 0 2px rgba(249,115,22,0.8), 0 0 8px 3px rgba(249,115,22,0.4)';
+      default:
+        return '';
+    }
+  }
+
+  function hasMembershipPulse(node: MeshNode): boolean {
+    if (node.type !== 'recipe' || !node.pubkey) return false;
+    const status = membershipMap[node.pubkey];
+    if (!status?.active) return false;
+    return status.tier === 'founders' || status.tier === 'pro_kitchen';
+  }
+
+  $: isConstellation = visualTheme === 'constellation';
+</script>
+
+<div class="absolute inset-0 overflow-hidden" style="pointer-events: none;">
+  {#each visibleNodes as node (node.id)}
+    {#if node.type === 'recipe'}
+      {@const size = nodeSize(node)}
+      {@const half = nodeHalf(node)}
+      {@const memberGlow = getMembershipGlow(node)}
+      <a
+        href={nodeHref(node)}
+        class="mesh-recipe-node"
+        class:mesh-hero={node.tier === 1}
+        class:mesh-notable={node.tier === 2}
+        class:mesh-community={node.tier === 3}
+        class:mesh-dragging={draggedNode === node}
+        class:mesh-constellation={isConstellation}
+        class:mesh-membership-pulse={hasMembershipPulse(node)}
+        style="
+          left: 0;
+          top: 0;
+          width: {size}px;
+          height: {size}px;
+          transform: translate({nodeScreenX(node) - half}px, {nodeScreenY(node) - half}px);
+          opacity: {nodeOpacity(node)};
+          pointer-events: auto;
+          {memberGlow ? `box-shadow: ${memberGlow};` : ''}
+        "
+        on:mousedown={(e) => onNodeMouseDown(node, e)}
+        on:click={onNodeClick}
+        on:mouseenter={(e) => onNodeEnter(node, e)}
+        on:mousemove={onNodeMove}
+        on:mouseleave={onNodeLeave}
+        draggable="false"
+        aria-label="{node.title} recipe"
+      >
+        {#if shouldShowImage(node)}
+          <img
+            src={node.image}
+            alt={node.title}
+            class="rounded-full object-cover"
+            style="width: 100%; height: 100%; pointer-events: none;"
+            loading="lazy"
+            draggable="false"
+          />
+        {:else}
+          <div
+            class="rounded-full"
+            style="
+              width: 100%;
+              height: 100%;
+              background: {isConstellation ? 'rgba(180, 200, 240, 0.3)' : 'rgba(249, 115, 22, 0.3)'};
+            "
+          />
+        {/if}
+        {#if node.isGated}
+          <span class="mesh-gated-badge" aria-label="Lightning-gated recipe">&#9889;</span>
+        {/if}
+      </a>
+    {:else if node.type === 'tag'}
+      <a
+        href={nodeHref(node)}
+        class="mesh-tag-node"
+        class:mesh-dragging={draggedNode === node}
+        class:mesh-constellation={isConstellation}
+        style="
+          left: 0;
+          top: 0;
+          transform: translate({nodeScreenX(node) - 28}px, {nodeScreenY(node) - 28}px);
+          opacity: {nodeOpacity(node)};
+          pointer-events: auto;
+        "
+        on:mousedown={(e) => onNodeMouseDown(node, e)}
+        on:click={onNodeClick}
+        on:mouseenter={(e) => onNodeEnter(node, e)}
+        on:mousemove={onNodeMove}
+        on:mouseleave={onNodeLeave}
+        draggable="false"
+        aria-label="{node.name} tag"
+      >
+        <div class="mesh-tag-circle" class:dark={isDarkMode} class:constellation={isConstellation}>
+          {#if node.emoji}<span class="mesh-tag-emoji">{node.emoji}</span>{/if}
+        </div>
+        <span class="mesh-tag-label" style="color: {isConstellation ? 'rgba(180, 200, 240, 0.7)' : 'var(--color-text-primary)'};">{node.name}</span>
+      </a>
+    {:else if node.type === 'chef'}
+      <div
+        class="mesh-chef-node"
+        class:mesh-dragging={draggedNode === node}
+        style="
+          left: 0;
+          top: 0;
+          transform: translate({nodeScreenX(node) - 24}px, {nodeScreenY(node) - 24}px);
+          opacity: {nodeOpacity(node)};
+          pointer-events: auto;
+        "
+        on:mousedown={(e) => onNodeMouseDown(node, e)}
+        on:mouseenter={(e) => onNodeEnter(node, e)}
+        on:mousemove={onNodeMove}
+        on:mouseleave={onNodeLeave}
+        role="button"
+        tabindex="0"
+        aria-label="{node.displayName || 'Chef'}"
+      >
+        <Avatar pubkey={node.pubkey} size={48} showRing={true} />
+      </div>
+    {/if}
+  {/each}
+</div>
+
+<style>
+  /* ── Recipe nodes ─────────────────────────────────────────── */
+
+  .mesh-recipe-node {
+    position: absolute;
+    display: block;
+    border-radius: 9999px;
+    cursor: pointer;
+    transition: opacity 0.2s ease, filter 0.15s ease;
+    text-decoration: none;
+  }
+
+  .mesh-recipe-node:hover {
+    z-index: 10 !important;
+    filter: brightness(1.1);
+  }
+
+  .mesh-recipe-node.mesh-dragging {
+    cursor: grabbing;
+    z-index: 20 !important;
+    filter: brightness(1.15);
+  }
+
+  /* Hero (Tier 1) */
+  .mesh-hero {
+    z-index: 5;
+    border: 3px solid rgb(249, 115, 22);
+    box-shadow:
+      0 0 0 2px rgba(249, 115, 22, 0.8),
+      0 0 12px 4px rgba(249, 115, 22, 0.5),
+      0 0 24px 8px rgba(249, 115, 22, 0.25);
+    animation: hero-pulse 4s ease-in-out infinite;
+  }
+
+  .mesh-hero.mesh-constellation {
+    border-color: rgba(220, 230, 255, 0.9);
+    box-shadow:
+      0 0 0 2px rgba(200, 220, 255, 0.7),
+      0 0 12px 4px rgba(200, 220, 255, 0.4),
+      0 0 24px 8px rgba(200, 220, 255, 0.2);
+    animation: hero-pulse-constellation 4s ease-in-out infinite;
+  }
+
+  /* Notable (Tier 2) */
+  .mesh-notable {
+    z-index: 3;
+    border: 2px solid rgba(249, 115, 22, 0.5);
+    box-shadow: 0 0 8px 2px rgba(249, 115, 22, 0.15);
+  }
+
+  .mesh-notable.mesh-constellation {
+    border-color: rgba(180, 200, 240, 0.5);
+    box-shadow: 0 0 8px 2px rgba(180, 200, 240, 0.2);
+  }
+
+  /* Community (Tier 3) */
+  .mesh-community {
+    z-index: 1;
+    border: 1px solid var(--color-input-border);
+  }
+
+  .mesh-community.mesh-constellation {
+    border-color: rgba(140, 160, 200, 0.3);
+  }
+
+  /* Membership pulse for Pro/Founders recipe nodes */
+  .mesh-membership-pulse {
+    animation: membership-glow-pulse 3s ease-in-out infinite;
+  }
+
+  @keyframes hero-pulse {
+    0%, 100% {
+      box-shadow:
+        0 0 0 2px rgba(249, 115, 22, 0.8),
+        0 0 12px 4px rgba(249, 115, 22, 0.5),
+        0 0 24px 8px rgba(249, 115, 22, 0.25);
+    }
+    50% {
+      box-shadow:
+        0 0 0 3px rgba(249, 115, 22, 0.9),
+        0 0 18px 6px rgba(249, 115, 22, 0.6),
+        0 0 32px 12px rgba(249, 115, 22, 0.3);
+    }
+  }
+
+  @keyframes hero-pulse-constellation {
+    0%, 100% {
+      box-shadow:
+        0 0 0 2px rgba(200, 220, 255, 0.7),
+        0 0 12px 4px rgba(200, 220, 255, 0.4),
+        0 0 24px 8px rgba(200, 220, 255, 0.2);
+    }
+    50% {
+      box-shadow:
+        0 0 0 3px rgba(200, 220, 255, 0.8),
+        0 0 18px 6px rgba(200, 220, 255, 0.5),
+        0 0 32px 12px rgba(200, 220, 255, 0.25);
+    }
+  }
+
+  @keyframes membership-glow-pulse {
+    0%, 100% { filter: brightness(1); }
+    50% { filter: brightness(1.08); }
+  }
+
+  /* ── Lightning-gated badge ─────────────────────────────────── */
+
+  .mesh-gated-badge {
+    position: absolute;
+    bottom: -2px;
+    right: -2px;
+    font-size: 12px;
+    line-height: 1;
+    filter: drop-shadow(0 0 3px rgba(251, 191, 36, 0.6));
+    animation: gated-pulse 3s ease-in-out infinite;
+  }
+
+  @keyframes gated-pulse {
+    0%, 100% { opacity: 0.8; }
+    50% { opacity: 1; }
+  }
+
+  /* ── Tag nodes ────────────────────────────────────────────── */
+
+  .mesh-tag-node {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2px;
+    z-index: 2;
+    cursor: pointer;
+    transition: opacity 0.2s ease, filter 0.15s ease;
+    text-decoration: none;
+  }
+
+  .mesh-tag-node:hover {
+    z-index: 10 !important;
+    filter: brightness(1.1);
+  }
+
+  .mesh-tag-node:hover .mesh-tag-circle {
+    border-color: rgba(249, 115, 22, 0.6);
+    background-color: rgba(249, 115, 22, 0.15);
+  }
+
+  .mesh-tag-node.mesh-constellation:hover .mesh-tag-circle {
+    border-color: rgba(180, 200, 240, 0.5);
+    background-color: rgba(180, 200, 240, 0.15);
+  }
+
+  .mesh-tag-node.mesh-dragging {
+    cursor: grabbing;
+    z-index: 20 !important;
+  }
+
+  .mesh-tag-circle {
+    width: 56px;
+    height: 56px;
+    border-radius: 9999px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(249, 115, 22, 0.08);
+    border: 1px solid rgba(249, 115, 22, 0.2);
+    transition: background-color 0.15s ease, border-color 0.15s ease;
+  }
+
+  .mesh-tag-circle.dark {
+    background-color: rgba(249, 115, 22, 0.12);
+    border-color: rgba(249, 115, 22, 0.25);
+  }
+
+  .mesh-tag-circle.constellation {
+    background-color: rgba(180, 200, 240, 0.08);
+    border-color: rgba(180, 200, 240, 0.25);
+  }
+
+  .mesh-tag-emoji {
+    font-size: 22px;
+    line-height: 1;
+  }
+
+  .mesh-tag-label {
+    font-size: 10px;
+    font-weight: 500;
+    white-space: nowrap;
+    max-width: 80px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: center;
+  }
+
+  /* ── Chef nodes ───────────────────────────────────────────── */
+
+  .mesh-chef-node {
+    position: absolute;
+    z-index: 4;
+    cursor: pointer;
+    transition: opacity 0.2s ease, filter 0.15s ease;
+  }
+
+  .mesh-chef-node:hover {
+    z-index: 10 !important;
+    filter: brightness(1.1);
+  }
+
+  .mesh-chef-node.mesh-dragging {
+    cursor: grabbing;
+    z-index: 20 !important;
+  }
+</style>
diff --git a/src/components/mesh/MeshStarfield.svelte b/src/components/mesh/MeshStarfield.svelte
new file mode 100644
index 0000000..c92d0ba
--- /dev/null
+++ b/src/components/mesh/MeshStarfield.svelte
@@ -0,0 +1,84 @@
+<script lang="ts">
+  // CSS-only starfield — no JS, no canvas particles.
+  // 3 layers of radial-gradient dots at different sizes.
+  // Pure CSS transform animation for slow drift (120s/180s/240s cycles).
+  // GPU-composited, effectively zero CPU cost.
+</script>
+
+<div class="starfield" aria-hidden="true">
+  <div class="star-layer star-layer-1"></div>
+  <div class="star-layer star-layer-2"></div>
+  <div class="star-layer star-layer-3"></div>
+</div>
+
+<style>
+  .starfield {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    overflow: hidden;
+    pointer-events: none;
+  }
+
+  .star-layer {
+    position: absolute;
+    inset: -50%;
+    width: 200%;
+    height: 200%;
+    will-change: transform;
+  }
+
+  /* Small stars (1px) */
+  .star-layer-1 {
+    background-image:
+      radial-gradient(1px 1px at 10% 20%, rgba(220, 230, 255, 0.6), transparent),
+      radial-gradient(1px 1px at 30% 65%, rgba(220, 230, 255, 0.5), transparent),
+      radial-gradient(1px 1px at 55% 15%, rgba(220, 230, 255, 0.4), transparent),
+      radial-gradient(1px 1px at 70% 45%, rgba(220, 230, 255, 0.55), transparent),
+      radial-gradient(1px 1px at 85% 80%, rgba(220, 230, 255, 0.45), transparent),
+      radial-gradient(1px 1px at 45% 90%, rgba(220, 230, 255, 0.5), transparent),
+      radial-gradient(1px 1px at 15% 50%, rgba(220, 230, 255, 0.35), transparent),
+      radial-gradient(1px 1px at 90% 25%, rgba(220, 230, 255, 0.4), transparent);
+    background-size: 200px 200px;
+    animation: drift-1 120s linear infinite;
+  }
+
+  /* Medium stars (1.5px) */
+  .star-layer-2 {
+    background-image:
+      radial-gradient(1.5px 1.5px at 25% 35%, rgba(200, 220, 255, 0.5), transparent),
+      radial-gradient(1.5px 1.5px at 60% 70%, rgba(200, 220, 255, 0.4), transparent),
+      radial-gradient(1.5px 1.5px at 80% 20%, rgba(200, 220, 255, 0.45), transparent),
+      radial-gradient(1.5px 1.5px at 40% 55%, rgba(200, 220, 255, 0.35), transparent),
+      radial-gradient(1.5px 1.5px at 10% 85%, rgba(200, 220, 255, 0.5), transparent),
+      radial-gradient(1.5px 1.5px at 95% 60%, rgba(200, 220, 255, 0.4), transparent);
+    background-size: 300px 300px;
+    animation: drift-2 180s linear infinite;
+  }
+
+  /* Large stars (2px) */
+  .star-layer-3 {
+    background-image:
+      radial-gradient(2px 2px at 20% 50%, rgba(220, 230, 255, 0.6), transparent),
+      radial-gradient(2px 2px at 50% 30%, rgba(220, 230, 255, 0.5), transparent),
+      radial-gradient(2px 2px at 75% 75%, rgba(220, 230, 255, 0.55), transparent),
+      radial-gradient(2px 2px at 35% 10%, rgba(220, 230, 255, 0.4), transparent);
+    background-size: 400px 400px;
+    animation: drift-3 240s linear infinite;
+  }
+
+  @keyframes drift-1 {
+    from { transform: translate(0, 0); }
+    to { transform: translate(-200px, -200px); }
+  }
+
+  @keyframes drift-2 {
+    from { transform: translate(0, 0); }
+    to { transform: translate(150px, -150px); }
+  }
+
+  @keyframes drift-3 {
+    from { transform: translate(0, 0); }
+    to { transform: translate(-100px, 100px); }
+  }
+</style>
diff --git a/src/components/mesh/MeshTooltip.svelte b/src/components/mesh/MeshTooltip.svelte
new file mode 100644
index 0000000..40ea6d0
--- /dev/null
+++ b/src/components/mesh/MeshTooltip.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+  import type { RecipeNode } from '$lib/mesh/meshTypes';
+  import type { SimulationNodeDatum } from 'd3-force';
+
+  export let tooltipNode: (RecipeNode & SimulationNodeDatum) | null = null;
+  export let tooltipX: number = 0;
+  export let tooltipY: number = 0;
+  export let nodeDragDidMove: boolean = false;
+</script>
+
+{#if tooltipNode && !nodeDragDidMove}
+  <div
+    class="mesh-tooltip"
+    style="
+      left: {tooltipX + 12}px;
+      top: {tooltipY - 30}px;
+      background-color: var(--color-bg-secondary);
+      color: var(--color-text-primary);
+      border: 1px solid var(--color-input-border);
+    "
+    role="tooltip"
+  >
+    {#if tooltipNode.tier === 1}<span class="mr-1">&#128293;</span>{/if}
+    {tooltipNode.title}
+  </div>
+{/if}
+
+<style>
+  .mesh-tooltip {
+    position: fixed;
+    z-index: 100;
+    padding: 4px 10px;
+    border-radius: 6px;
+    font-size: 13px;
+    white-space: nowrap;
+    pointer-events: none;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  }
+</style>
diff --git a/src/components/mesh/MeshZoomControls.svelte b/src/components/mesh/MeshZoomControls.svelte
new file mode 100644
index 0000000..e372e07
--- /dev/null
+++ b/src/components/mesh/MeshZoomControls.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+  export let onZoomIn: () => void;
+  export let onZoomOut: () => void;
+  export let onResetZoom: () => void;
+</script>
+
+<div class="mesh-zoom-controls" style="background-color: var(--color-bg-secondary); border: 1px solid var(--color-input-border);">
+  <button
+    on:click={onZoomIn}
+    class="mesh-zoom-btn"
+    style="color: var(--color-text-primary);"
+    aria-label="Zoom in"
+  >+</button>
+  <div style="border-top: 1px solid var(--color-input-border);" />
+  <button
+    on:click={onZoomOut}
+    class="mesh-zoom-btn"
+    style="color: var(--color-text-primary);"
+    aria-label="Zoom out"
+  >&minus;</button>
+  <div style="border-top: 1px solid var(--color-input-border);" />
+  <button
+    on:click={onResetZoom}
+    class="mesh-zoom-btn text-xs"
+    style="color: var(--color-caption);"
+    aria-label="Reset zoom"
+  >Reset</button>
+</div>
+
+<style>
+  .mesh-zoom-controls {
+    position: absolute;
+    bottom: 16px;
+    right: 16px;
+    display: flex;
+    flex-direction: column;
+    border-radius: 10px;
+    overflow: hidden;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    z-index: 20;
+  }
+
+  .mesh-zoom-btn {
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: opacity 0.15s;
+  }
+
+  .mesh-zoom-btn:hover {
+    opacity: 0.7;
+  }
+</style>
diff --git a/src/lib/mesh/meshData.ts b/src/lib/mesh/meshData.ts
new file mode 100644
index 0000000..2200e83
--- /dev/null
+++ b/src/lib/mesh/meshData.ts
@@ -0,0 +1,456 @@
+import { ndk } from '$lib/nostr';
+import { get } from 'svelte/store';
+import type { NDKEvent, NDKFilter } from '@nostr-dev-kit/ndk';
+import { validateMarkdownTemplate } from '$lib/parser';
+import {
+  RECIPE_TAGS,
+  RECIPE_TAG_PREFIX_NEW,
+  RECIPE_TAG_PREFIX_LEGACY,
+  CURATED_TAG_SECTIONS,
+  TAG_ALIASES,
+  recipeTags,
+  GATED_RECIPE_KIND
+} from '$lib/consts';
+import { getImageOrPlaceholder } from '$lib/placeholderImages';
+import { nip19 } from 'nostr-tools';
+import type {
+  RecipeNode,
+  TagNode,
+  ChefNode,
+  MeshNode,
+  MeshEdge,
+  EngagementMap,
+  MeshLayers,
+  MeshFilters
+} from './meshTypes';
+
+// ── Build a flat set of all curated tag names ──────────────────
+
+const CURATED_TAG_SET = new Set<string>(
+  CURATED_TAG_SECTIONS.flatMap((s) => s.tags)
+);
+
+// ── Build emoji lookup from recipeTags ─────────────────────────
+
+const TAG_EMOJI_MAP = new Map<string, string>();
+for (const t of recipeTags) {
+  if (t.emoji) TAG_EMOJI_MAP.set(t.title, t.emoji);
+}
+
+// ── Fetch recipes ──────────────────────────────────────────────
+
+export async function fetchMeshRecipes(): Promise<NDKEvent[]> {
+  const ndkInstance = get(ndk);
+  if (!ndkInstance) return [];
+
+  const filter: NDKFilter = {
+    limit: 500,
+    kinds: [30023 as number],
+    '#t': RECIPE_TAGS
+  };
+
+  const recipes: NDKEvent[] = [];
+  const subscription = ndkInstance.subscribe(filter, { closeOnEose: true });
+
+  return new Promise((resolve) => {
+    let resolved = false;
+
+    const finalize = () => {
+      if (resolved) return;
+      resolved = true;
+      subscription.stop();
+      resolve(recipes);
+    };
+
+    const timeout = setTimeout(finalize, 8000);
+
+    subscription.on('event', (event: NDKEvent) => {
+      if (typeof validateMarkdownTemplate(event.content) !== 'string' && event.author?.pubkey) {
+        recipes.push(event);
+      }
+      if (recipes.length >= 150) {
+        clearTimeout(timeout);
+        finalize();
+      }
+    });
+
+    subscription.on('eose', () => {
+      clearTimeout(timeout);
+      finalize();
+    });
+  });
+}
+
+// ── Fetch engagement (likes + zaps) in batches ─────────────────
+
+export async function fetchMeshEngagement(recipes: NDKEvent[]): Promise<EngagementMap> {
+  const ndkInstance = get(ndk);
+  if (!ndkInstance) return new Map();
+
+  const aTagToEventId = new Map<string, string>();
+  const allATags: string[] = [];
+
+  for (const recipe of recipes) {
+    const dTag = recipe.tags.find((t) => t[0] === 'd')?.[1];
+    if (!dTag || !recipe.author?.pubkey) continue;
+
+    const aTag = `30023:${recipe.author.pubkey}:${dTag}`;
+    aTagToEventId.set(aTag, recipe.id);
+    allATags.push(aTag);
+  }
+
+  const counters = new Map<string, { likes: number; zaps: number }>();
+  for (const eventId of aTagToEventId.values()) {
+    counters.set(eventId, { likes: 0, zaps: 0 });
+  }
+
+  const chunks: string[][] = [];
+  for (let i = 0; i < allATags.length; i += 40) {
+    chunks.push(allATags.slice(i, i + 40));
+  }
+
+  await Promise.all(
+    chunks.map(
+      (chunk) =>
+        new Promise<void>((resolve) => {
+          const subscription = ndkInstance.subscribe(
+            { kinds: [7, 9735], '#a': chunk } as NDKFilter,
+            { closeOnEose: true }
+          );
+
+          const timeout = setTimeout(() => {
+            subscription.stop();
+            resolve();
+          }, 4000);
+
+          subscription.on('event', (event: NDKEvent) => {
+            const aTags = event.tags.filter((t) => t[0] === 'a').map((t) => t[1]);
+            for (const aTag of aTags) {
+              const eventId = aTagToEventId.get(aTag);
+              if (!eventId) continue;
+              const c = counters.get(eventId);
+              if (!c) continue;
+
+              if (event.kind === 7) {
+                c.likes++;
+              } else if (event.kind === 9735) {
+                c.zaps++;
+              }
+            }
+          });
+
+          subscription.on('eose', () => {
+            clearTimeout(timeout);
+            subscription.stop();
+            resolve();
+          });
+        })
+    )
+  );
+
+  const result: EngagementMap = new Map();
+  for (const [eventId, { likes, zaps }] of counters) {
+    const score = zaps * 3 + likes;
+    result.set(eventId, { likes, zaps, score });
+  }
+
+  return result;
+}
+
+// ── Extract normalized curated tags from an event ──────────────
+
+export function extractRecipeTags(event: NDKEvent): string[] {
+  const prefixNew = RECIPE_TAG_PREFIX_NEW + '-';
+  const prefixLegacy = RECIPE_TAG_PREFIX_LEGACY + '-';
+
+  const raw = event.tags
+    .filter((t) => t[0] === 't')
+    .map((t) => t[1] || '')
+    .filter(Boolean);
+
+  const seen = new Set<string>();
+  const result: string[] = [];
+
+  for (const tag of raw) {
+    let stripped = tag;
+
+    const lower = stripped.toLowerCase();
+    if (lower.startsWith(prefixNew.toLowerCase())) {
+      stripped = stripped.slice(prefixNew.length);
+    } else if (lower.startsWith(prefixLegacy.toLowerCase())) {
+      stripped = stripped.slice(prefixLegacy.length);
+    }
+
+    stripped = stripped
+      .split('-')
+      .map((w) => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase())
+      .join('-');
+
+    if (TAG_ALIASES[stripped]) {
+      stripped = TAG_ALIASES[stripped];
+    }
+
+    if (CURATED_TAG_SET.has(stripped) && !seen.has(stripped)) {
+      seen.add(stripped);
+      result.push(stripped);
+    }
+  }
+
+  return result;
+}
+
+// ── Check if a recipe is gated ─────────────────────────────────
+
+function isRecipeGated(event: NDKEvent): boolean {
+  return event.kind === GATED_RECIPE_KIND ||
+    event.tags.some((t) => t[0] === 't' && t[1] === 'zapcooking-premium');
+}
+
+// ── Apply filters to a recipe node ─────────────────────────────
+
+function matchesFilters(node: RecipeNode, filters?: MeshFilters): boolean {
+  if (!filters) return true;
+
+  if (filters.search) {
+    const search = filters.search.toLowerCase();
+    const titleMatch = node.title.toLowerCase().includes(search);
+    const tagMatch = node.tags.some((t) => t.toLowerCase().includes(search));
+    if (!titleMatch && !tagMatch) return false;
+  }
+
+  if (filters.cuisine.length > 0) {
+    if (!filters.cuisine.some((c) => node.tags.includes(c))) return false;
+  }
+
+  if (filters.ingredient.length > 0) {
+    if (!filters.ingredient.some((i) => node.tags.includes(i))) return false;
+  }
+
+  if (filters.dietary.length > 0) {
+    if (!filters.dietary.some((d) => node.tags.includes(d))) return false;
+  }
+
+  if (filters.lightningGated === true && !node.isGated) return false;
+  if (filters.lightningGated === false && node.isGated) return false;
+
+  if (filters.creator && node.pubkey !== filters.creator) return false;
+
+  return true;
+}
+
+// ── Build the mesh graph ───────────────────────────────────────
+
+export function buildMeshGraph(
+  recipes: NDKEvent[],
+  engagement?: EngagementMap,
+  layers?: MeshLayers,
+  filters?: MeshFilters
+): { nodes: MeshNode[]; edges: MeshEdge[] } {
+  const activeLayers: MeshLayers = layers || { recipes: true, tags: true, chefs: false };
+  const nodes: MeshNode[] = [];
+  const edges: MeshEdge[] = [];
+  const tagCounts = new Map<string, number>();
+
+  // First pass: create recipe nodes and count tags
+  const recipeNodes: RecipeNode[] = [];
+
+  for (const event of recipes) {
+    const tags = extractRecipeTags(event);
+    if (tags.length === 0) continue;
+
+    const imageUrl = event.tags.find((t) => t[0] === 'image')?.[1];
+    const image = getImageOrPlaceholder(imageUrl, event.id);
+    const title =
+      event.tags.find((t) => t[0] === 'title')?.[1] ||
+      event.tags.find((t) => t[0] === 'd')?.[1] ||
+      'Untitled';
+
+    const d = event.tags.find((t) => t[0] === 'd')?.[1] || '';
+    const pubkey = event.author?.pubkey || '';
+    let link = '#';
+    try {
+      const naddr = nip19.naddrEncode({ identifier: d, kind: 30023, pubkey });
+      link = `/recipe/${naddr}`;
+    } catch {
+      // skip encoding errors
+    }
+
+    const eng = engagement?.get(event.id);
+    const likes = eng?.likes ?? 0;
+    const zaps = eng?.zaps ?? 0;
+    const score = eng?.score ?? 0;
+
+    const node: RecipeNode = {
+      id: `recipe-${event.id}`,
+      type: 'recipe',
+      event,
+      image,
+      title,
+      link,
+      tags,
+      score,
+      tier: 3,
+      zaps,
+      likes,
+      pubkey,
+      isGated: isRecipeGated(event)
+    };
+
+    // Apply filters before adding
+    if (!matchesFilters(node, filters)) continue;
+
+    recipeNodes.push(node);
+
+    for (const tag of tags) {
+      tagCounts.set(tag, (tagCounts.get(tag) || 0) + 1);
+    }
+  }
+
+  // ── Tiering ────────────────────────────────────────────────────
+  const sorted = [...recipeNodes].sort((a, b) => b.score - a.score);
+  for (let i = 0; i < sorted.length; i++) {
+    if (i < 8) {
+      sorted[i].tier = 1;
+    } else if (i < 33) {
+      sorted[i].tier = 2;
+    } else {
+      sorted[i].tier = 3;
+    }
+  }
+
+  // Second pass: create tag nodes
+  const tagNodeMap = new Map<string, TagNode>();
+
+  if (activeLayers.tags) {
+    for (const [sectionIndex, section] of CURATED_TAG_SECTIONS.entries()) {
+      for (const tagName of section.tags) {
+        const count = tagCounts.get(tagName) || 0;
+        if (count === 0) continue;
+        if (tagNodeMap.has(tagName)) continue;
+
+        const emoji = TAG_EMOJI_MAP.get(tagName) || '';
+        const tagNode: TagNode = {
+          id: `tag-${tagName}`,
+          type: 'tag',
+          name: tagName,
+          emoji,
+          sectionTitle: section.title,
+          sectionIndex,
+          count
+        };
+
+        tagNodeMap.set(tagName, tagNode);
+      }
+    }
+  }
+
+  // Assemble nodes
+  if (activeLayers.tags) {
+    nodes.push(...tagNodeMap.values());
+  }
+  if (activeLayers.recipes) {
+    nodes.push(...recipeNodes);
+  }
+
+  // ── Recipe-tag edges ───────────────────────────────────────────
+  if (activeLayers.recipes && activeLayers.tags) {
+    for (const recipe of recipeNodes) {
+      for (const tag of recipe.tags) {
+        const tagNode = tagNodeMap.get(tag);
+        if (tagNode) {
+          edges.push({
+            source: recipe.id,
+            target: tagNode.id,
+            edgeType: 'recipe-tag',
+            weight: 1
+          });
+        }
+      }
+    }
+  }
+
+  // ── Recipe-recipe edges (shared tags) ──────────────────────────
+  if (activeLayers.recipes) {
+    const tagToRecipeIndices = new Map<string, number[]>();
+    for (let i = 0; i < recipeNodes.length; i++) {
+      for (const tag of recipeNodes[i].tags) {
+        let list = tagToRecipeIndices.get(tag);
+        if (!list) {
+          list = [];
+          tagToRecipeIndices.set(tag, list);
+        }
+        list.push(i);
+      }
+    }
+
+    const sharedCounts = new Map<string, number>();
+    for (const indices of tagToRecipeIndices.values()) {
+      for (let a = 0; a < indices.length; a++) {
+        for (let b = a + 1; b < indices.length; b++) {
+          const key = `${Math.min(indices[a], indices[b])}-${Math.max(indices[a], indices[b])}`;
+          sharedCounts.set(key, (sharedCounts.get(key) || 0) + 1);
+        }
+      }
+    }
+
+    const candidatePairs: { key: string; idxA: number; idxB: number; shared: number; pairScore: number }[] = [];
+    for (const [key, shared] of sharedCounts) {
+      if (shared < 2) continue;
+      const [a, b] = key.split('-').map(Number);
+      const pairScore = shared * (recipeNodes[a].score + recipeNodes[b].score);
+      candidatePairs.push({ key, idxA: a, idxB: b, shared, pairScore });
+    }
+
+    candidatePairs.sort((a, b) => b.pairScore - a.pairScore);
+    const topPairs = candidatePairs.slice(0, 250);
+
+    for (const pair of topPairs) {
+      edges.push({
+        source: recipeNodes[pair.idxA].id,
+        target: recipeNodes[pair.idxB].id,
+        edgeType: 'recipe-recipe',
+        weight: pair.shared
+      });
+    }
+  }
+
+  // ── Chef layer ─────────────────────────────────────────────────
+  if (activeLayers.chefs && activeLayers.recipes) {
+    const chefMap = new Map<string, { count: number; recipes: RecipeNode[] }>();
+
+    for (const recipe of recipeNodes) {
+      if (!recipe.pubkey) continue;
+      const existing = chefMap.get(recipe.pubkey);
+      if (existing) {
+        existing.count++;
+        existing.recipes.push(recipe);
+      } else {
+        chefMap.set(recipe.pubkey, { count: 1, recipes: [recipe] });
+      }
+    }
+
+    for (const [pubkey, { count, recipes: chefRecipes }] of chefMap) {
+      const chefNode: ChefNode = {
+        id: `chef-${pubkey}`,
+        type: 'chef',
+        pubkey,
+        displayName: '',
+        image: null,
+        recipeCount: count
+      };
+
+      nodes.push(chefNode);
+
+      for (const recipe of chefRecipes) {
+        edges.push({
+          source: recipe.id,
+          target: chefNode.id,
+          edgeType: 'recipe-chef',
+          weight: 1
+        });
+      }
+    }
+  }
+
+  return { nodes, edges };
+}
diff --git a/src/lib/mesh/meshLayout.ts b/src/lib/mesh/meshLayout.ts
new file mode 100644
index 0000000..a58fa47
--- /dev/null
+++ b/src/lib/mesh/meshLayout.ts
@@ -0,0 +1,109 @@
+import { browser } from '$app/environment';
+import type { PrecomputedLayout, MeshNode } from './meshTypes';
+
+const LAYOUT_CACHE_KEY = 'zc_mesh_layout_v1';
+const LAYOUT_TTL = 30 * 60 * 1000; // 30 minutes
+
+/**
+ * Generate a cache fingerprint from node IDs and edge count.
+ * Used to invalidate cache when graph data changes.
+ */
+function computeFingerprint(nodeIds: string[], edgeCount: number): string {
+  const sorted = [...nodeIds].sort();
+  // Simple hash: join sorted IDs and edge count
+  let hash = 0;
+  const str = sorted.join(',') + ':' + edgeCount;
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i);
+    hash = ((hash << 5) - hash) + char;
+    hash = hash & hash; // Convert to 32-bit integer
+  }
+  return String(hash);
+}
+
+/**
+ * Store a computed layout in localStorage.
+ */
+export function setCachedLayout(
+  nodes: MeshNode[],
+  edgeCount: number
+): void {
+  if (!browser) return;
+
+  const positions: Record<string, { x: number; y: number }> = {};
+  for (const node of nodes) {
+    if (node.x != null && node.y != null) {
+      positions[node.id] = { x: node.x, y: node.y };
+    }
+  }
+
+  const nodeIds = nodes.map((n) => n.id);
+  const fingerprint = computeFingerprint(nodeIds, edgeCount);
+
+  const layout: PrecomputedLayout & { fingerprint: string } = {
+    positions,
+    version: 1,
+    timestamp: Date.now(),
+    nodeCount: nodes.length,
+    edgeCount,
+    fingerprint
+  };
+
+  try {
+    localStorage.setItem(LAYOUT_CACHE_KEY, JSON.stringify(layout));
+  } catch {
+    // localStorage full or unavailable
+  }
+}
+
+/**
+ * Retrieve a cached layout if it exists and matches the current data fingerprint.
+ * Returns null if cache is stale, expired, or doesn't match.
+ */
+export function getCachedLayout(
+  nodeIds: string[],
+  edgeCount: number
+): Record<string, { x: number; y: number }> | null {
+  if (!browser) return null;
+
+  try {
+    const raw = localStorage.getItem(LAYOUT_CACHE_KEY);
+    if (!raw) return null;
+
+    const layout: PrecomputedLayout & { fingerprint: string } = JSON.parse(raw);
+
+    // Check TTL
+    if (Date.now() - layout.timestamp > LAYOUT_TTL) {
+      localStorage.removeItem(LAYOUT_CACHE_KEY);
+      return null;
+    }
+
+    // Check fingerprint match
+    const fingerprint = computeFingerprint(nodeIds, edgeCount);
+    if (layout.fingerprint !== fingerprint) return null;
+
+    return layout.positions;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Apply cached positions to nodes. Returns true if all positions were applied.
+ */
+export function applyCachedLayout(
+  nodes: MeshNode[],
+  positions: Record<string, { x: number; y: number }>
+): boolean {
+  let allApplied = true;
+  for (const node of nodes) {
+    const pos = positions[node.id];
+    if (pos) {
+      node.x = pos.x;
+      node.y = pos.y;
+    } else {
+      allApplied = false;
+    }
+  }
+  return allApplied;
+}
diff --git a/src/lib/mesh/meshStore.ts b/src/lib/mesh/meshStore.ts
new file mode 100644
index 0000000..40b2cd7
--- /dev/null
+++ b/src/lib/mesh/meshStore.ts
@@ -0,0 +1,24 @@
+import { writable } from 'svelte/store';
+import type { MeshFilters, MeshLayers, MeshVisualTheme } from './meshTypes';
+
+export const meshFilters = writable<MeshFilters>({
+  search: '',
+  cuisine: [],
+  ingredient: [],
+  difficulty: [],
+  time: [],
+  dietary: [],
+  lightningGated: null,
+  membershipTier: null,
+  creator: null
+});
+
+export const meshLayers = writable<MeshLayers>({
+  recipes: true,
+  tags: true,
+  chefs: false
+});
+
+export const meshVisualTheme = writable<MeshVisualTheme>('default');
+
+export const meshSelectedNodeId = writable<string | null>(null);
diff --git a/src/lib/mesh/meshTheme.ts b/src/lib/mesh/meshTheme.ts
new file mode 100644
index 0000000..0b055b6
--- /dev/null
+++ b/src/lib/mesh/meshTheme.ts
@@ -0,0 +1,156 @@
+import type { MeshVisualTheme } from './meshTypes';
+
+export interface MeshColorScheme {
+  // Edge colors
+  edgeRecipeTag: { base: string; highlighted: string; dim: string };
+  edgeRecipeRecipe: { base: string; highlighted: string; dim: string; glow: string };
+  edgeRecipeChef: { base: string; highlighted: string; dim: string };
+
+  // Node colors
+  nodeHeroBorder: string;
+  nodeHeroGlow: string;
+  nodeNotableBorder: string;
+  nodeNotableGlow: string;
+  nodeCommunityBorder: string;
+  nodeTagBg: string;
+  nodeTagBorder: string;
+  nodeTagBgHover: string;
+  nodeChefGlow: string;
+
+  // Container
+  containerBgDark: string;
+  containerBgLight: string;
+
+  // Legend
+  legendBgDark: string;
+  legendBgLight: string;
+  legendBorderDark: string;
+  legendBorderLight: string;
+  legendTextDark: string;
+  legendTextLight: string;
+}
+
+export const DEFAULT_COLORS: MeshColorScheme = {
+  edgeRecipeTag: {
+    base: 'rgba(255, 122, 61, 0.08)',
+    highlighted: 'rgba(255, 122, 61, 0.25)',
+    dim: 'rgba(255, 122, 61, 0.02)'
+  },
+  edgeRecipeRecipe: {
+    base: 'rgba(251, 191, 36, 0.15)',
+    highlighted: 'rgba(251, 191, 36, 0.5)',
+    dim: 'rgba(251, 191, 36, 0.03)',
+    glow: 'rgba(251, 191, 36, 0.2)'
+  },
+  edgeRecipeChef: {
+    base: 'rgba(139, 92, 246, 0.12)',
+    highlighted: 'rgba(139, 92, 246, 0.35)',
+    dim: 'rgba(139, 92, 246, 0.02)'
+  },
+
+  nodeHeroBorder: 'rgb(249, 115, 22)',
+  nodeHeroGlow: 'rgba(249, 115, 22, 0.5)',
+  nodeNotableBorder: 'rgba(249, 115, 22, 0.5)',
+  nodeNotableGlow: 'rgba(249, 115, 22, 0.15)',
+  nodeCommunityBorder: 'var(--color-input-border)',
+  nodeTagBg: 'rgba(249, 115, 22, 0.08)',
+  nodeTagBorder: 'rgba(249, 115, 22, 0.2)',
+  nodeTagBgHover: 'rgba(249, 115, 22, 0.15)',
+  nodeChefGlow: 'rgba(139, 92, 246, 0.3)',
+
+  containerBgDark: 'radial-gradient(ellipse at center, rgba(20,15,12,1) 0%, rgba(10,8,6,1) 100%)',
+  containerBgLight: 'radial-gradient(ellipse at center, rgba(255,252,248,1) 0%, rgba(245,240,235,1) 100%)',
+
+  legendBgDark: 'rgba(20, 15, 12, 0.7)',
+  legendBgLight: 'rgba(255, 255, 255, 0.7)',
+  legendBorderDark: 'rgba(255, 255, 255, 0.08)',
+  legendBorderLight: 'rgba(0, 0, 0, 0.08)',
+  legendTextDark: 'rgba(255, 255, 255, 0.5)',
+  legendTextLight: 'rgba(0, 0, 0, 0.6)'
+};
+
+export const CONSTELLATION_COLORS: MeshColorScheme = {
+  edgeRecipeTag: {
+    base: 'rgba(180, 200, 240, 0.06)',
+    highlighted: 'rgba(180, 200, 240, 0.25)',
+    dim: 'rgba(180, 200, 240, 0.015)'
+  },
+  edgeRecipeRecipe: {
+    base: 'rgba(180, 200, 240, 0.1)',
+    highlighted: 'rgba(180, 200, 240, 0.4)',
+    dim: 'rgba(180, 200, 240, 0.02)',
+    glow: 'rgba(180, 200, 240, 0.15)'
+  },
+  edgeRecipeChef: {
+    base: 'rgba(180, 200, 240, 0.08)',
+    highlighted: 'rgba(180, 200, 240, 0.3)',
+    dim: 'rgba(180, 200, 240, 0.015)'
+  },
+
+  nodeHeroBorder: 'rgba(220, 230, 255, 0.9)',
+  nodeHeroGlow: 'rgba(200, 220, 255, 0.5)',
+  nodeNotableBorder: 'rgba(180, 200, 240, 0.5)',
+  nodeNotableGlow: 'rgba(180, 200, 240, 0.2)',
+  nodeCommunityBorder: 'rgba(140, 160, 200, 0.3)',
+  nodeTagBg: 'rgba(180, 200, 240, 0.08)',
+  nodeTagBorder: 'rgba(180, 200, 240, 0.25)',
+  nodeTagBgHover: 'rgba(180, 200, 240, 0.15)',
+  nodeChefGlow: 'rgba(180, 200, 240, 0.3)',
+
+  containerBgDark: 'radial-gradient(ellipse at center, rgba(10,12,25,1) 0%, rgba(3,5,15,1) 100%)',
+  containerBgLight: 'radial-gradient(ellipse at center, rgba(15,18,35,1) 0%, rgba(5,8,20,1) 100%)',
+
+  legendBgDark: 'rgba(10, 12, 25, 0.7)',
+  legendBgLight: 'rgba(10, 12, 25, 0.7)',
+  legendBorderDark: 'rgba(180, 200, 240, 0.1)',
+  legendBorderLight: 'rgba(180, 200, 240, 0.1)',
+  legendTextDark: 'rgba(180, 200, 240, 0.5)',
+  legendTextLight: 'rgba(180, 200, 240, 0.5)'
+};
+
+/**
+ * Get the color scheme for the given visual theme.
+ * In constellation mode, dark/light distinction doesn't apply — always uses dark space palette.
+ */
+export function getThemeColors(visualTheme: MeshVisualTheme): MeshColorScheme {
+  return visualTheme === 'constellation' ? CONSTELLATION_COLORS : DEFAULT_COLORS;
+}
+
+/**
+ * Get edge color for dark mode, factoring in visual theme.
+ */
+export function getEdgeColors(
+  visualTheme: MeshVisualTheme,
+  isDarkMode: boolean
+): {
+  recipeTagBase: string;
+  recipeTagHighlight: string;
+  recipeTagDim: string;
+  recipeRecipeGlow: string;
+} {
+  const colors = getThemeColors(visualTheme);
+  // Constellation always uses its own palette
+  if (visualTheme === 'constellation') {
+    return {
+      recipeTagBase: colors.edgeRecipeTag.base,
+      recipeTagHighlight: colors.edgeRecipeTag.highlighted,
+      recipeTagDim: colors.edgeRecipeTag.dim,
+      recipeRecipeGlow: colors.edgeRecipeRecipe.glow
+    };
+  }
+  // Default theme adapts to light/dark
+  if (isDarkMode) {
+    return {
+      recipeTagBase: 'rgba(255, 122, 61, 0.08)',
+      recipeTagHighlight: 'rgba(255, 122, 61, 0.25)',
+      recipeTagDim: 'rgba(255, 122, 61, 0.02)',
+      recipeRecipeGlow: 'rgba(251, 191, 36, 0.2)'
+    };
+  }
+  return {
+    recipeTagBase: 'rgba(236, 71, 0, 0.05)',
+    recipeTagHighlight: 'rgba(236, 71, 0, 0.18)',
+    recipeTagDim: 'rgba(236, 71, 0, 0.01)',
+    recipeRecipeGlow: 'rgba(234, 88, 12, 0.15)'
+  };
+}
diff --git a/src/lib/mesh/meshTypes.ts b/src/lib/mesh/meshTypes.ts
new file mode 100644
index 0000000..9c271f3
--- /dev/null
+++ b/src/lib/mesh/meshTypes.ts
@@ -0,0 +1,97 @@
+import type { NDKEvent } from '@nostr-dev-kit/ndk';
+import type { SimulationNodeDatum, SimulationLinkDatum } from 'd3-force';
+import type { MembershipTier } from '$lib/stores/membershipStatus';
+
+// ── Node Types ──────────────────────────────────────────────────
+
+export type RecipeNode = {
+  id: string;
+  type: 'recipe';
+  event: NDKEvent;
+  image: string;
+  title: string;
+  link: string;
+  tags: string[];
+  score: number;
+  tier: 1 | 2 | 3;
+  zaps: number;
+  likes: number;
+  pubkey: string;
+  isGated?: boolean;
+  x?: number;
+  y?: number;
+};
+
+export type TagNode = {
+  id: string;
+  type: 'tag';
+  name: string;
+  emoji: string;
+  sectionTitle: string;
+  sectionIndex: number;
+  count: number;
+  x?: number;
+  y?: number;
+};
+
+export type ChefNode = {
+  id: string;
+  type: 'chef';
+  pubkey: string;
+  displayName: string;
+  image: string | null;
+  recipeCount: number;
+  membershipTier?: MembershipTier;
+  x?: number;
+  y?: number;
+};
+
+export type MeshNode = RecipeNode | TagNode | ChefNode;
+
+// ── Edge Types ──────────────────────────────────────────────────
+
+export type MeshEdge = {
+  source: string | MeshNode;
+  target: string | MeshNode;
+  edgeType: 'recipe-tag' | 'recipe-recipe' | 'recipe-chef';
+  weight: number;
+};
+
+// ── Engagement ──────────────────────────────────────────────────
+
+export type EngagementMap = Map<string, { likes: number; zaps: number; score: number }>;
+
+// ── State Types ─────────────────────────────────────────────────
+
+export type MeshLayers = {
+  recipes: boolean;
+  tags: boolean;
+  chefs: boolean;
+};
+
+export type MeshFilters = {
+  search: string;
+  cuisine: string[];
+  ingredient: string[];
+  difficulty: string[];
+  time: string[];
+  dietary: string[];
+  lightningGated: boolean | null;
+  membershipTier: MembershipTier | null;
+  creator: string | null;
+};
+
+export type MeshVisualTheme = 'default' | 'constellation';
+
+export type PrecomputedLayout = {
+  positions: Record<string, { x: number; y: number }>;
+  version: number;
+  timestamp: number;
+  nodeCount: number;
+  edgeCount: number;
+};
+
+// ── Simulation augmented types ──────────────────────────────────
+
+export type SimMeshNode = MeshNode & SimulationNodeDatum;
+export type SimMeshEdge = MeshEdge & SimulationLinkDatum<SimMeshNode>;
diff --git a/src/lib/mesh/meshViewport.ts b/src/lib/mesh/meshViewport.ts
new file mode 100644
index 0000000..9e8cd25
--- /dev/null
+++ b/src/lib/mesh/meshViewport.ts
@@ -0,0 +1,67 @@
+import type { MeshNode, MeshEdge, SimMeshNode } from './meshTypes';
+
+export interface ViewportBounds {
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+}
+
+const MARGIN = 100; // px margin outside viewport for pre-rendering
+
+/**
+ * Compute the viewport bounds in graph coordinates given pan/zoom/container size.
+ */
+export function getViewportBounds(
+  panX: number,
+  panY: number,
+  zoom: number,
+  containerWidth: number,
+  containerHeight: number
+): ViewportBounds {
+  return {
+    left: (-panX / zoom) - (MARGIN / zoom),
+    top: (-panY / zoom) - (MARGIN / zoom),
+    right: ((containerWidth - panX) / zoom) + (MARGIN / zoom),
+    bottom: ((containerHeight - panY) / zoom) + (MARGIN / zoom)
+  };
+}
+
+/**
+ * Check if a node is within the given viewport bounds.
+ */
+export function isInViewport(node: MeshNode, bounds: ViewportBounds): boolean {
+  const x = node.x ?? 0;
+  const y = node.y ?? 0;
+  return x >= bounds.left && x <= bounds.right && y >= bounds.top && y <= bounds.bottom;
+}
+
+/**
+ * Filter nodes to only those within the viewport bounds.
+ */
+export function getVisibleNodes<T extends MeshNode>(nodes: T[], bounds: ViewportBounds): T[] {
+  return nodes.filter((node) => isInViewport(node, bounds));
+}
+
+/**
+ * Check if an edge has at least one endpoint within viewport bounds.
+ * Used for canvas edge culling.
+ */
+export function isEdgeVisible(
+  edge: MeshEdge,
+  bounds: ViewportBounds
+): boolean {
+  const source = edge.source as SimMeshNode;
+  const target = edge.target as SimMeshNode;
+
+  if (source.x == null || source.y == null || target.x == null || target.y == null) {
+    return false;
+  }
+
+  const srcIn = source.x >= bounds.left && source.x <= bounds.right &&
+                source.y >= bounds.top && source.y <= bounds.bottom;
+  const tgtIn = target.x >= bounds.left && target.x <= bounds.right &&
+                target.y >= bounds.top && target.y <= bounds.bottom;
+
+  return srcIn || tgtIn;
+}
diff --git a/src/lib/meshUtils.ts b/src/lib/meshUtils.ts
new file mode 100644
index 0000000..fab4fc0
--- /dev/null
+++ b/src/lib/meshUtils.ts
@@ -0,0 +1,5 @@
+// Re-export shim — all mesh logic now lives in src/lib/mesh/*
+// This file exists for backward compatibility with existing imports.
+
+export { fetchMeshRecipes, fetchMeshEngagement, extractRecipeTags, buildMeshGraph } from './mesh/meshData';
+export type { RecipeNode, TagNode, ChefNode, MeshNode, MeshEdge, EngagementMap } from './mesh/meshTypes';
diff --git a/src/routes/explore/+page.svelte b/src/routes/explore/+page.svelte
index 4ee2068..29a39ac 100644
--- a/src/routes/explore/+page.svelte
+++ b/src/routes/explore/+page.svelte
@@ -17,10 +17,24 @@
   import TrendingRecipeCard from '../../components/TrendingRecipeCard.svelte';
   import PullToRefresh from '../../components/PullToRefresh.svelte';
   import LongformFoodFeed from '../../components/LongformFoodFeed.svelte';
+  import MeshHeroOverlay from '../../components/mesh/MeshHeroOverlay.svelte';
   import type { NDKEvent } from '@nostr-dev-kit/ndk';
   import { nip19 } from 'nostr-tools';
   import { init, markOnce } from '$lib/perf/explorePerf';
   import { userPublickey } from '$lib/nostr';
+  import { fetchMeshRecipes, fetchMeshEngagement, buildMeshGraph, type EngagementMap } from '$lib/meshUtils';
+  import type { MeshNode, MeshEdge } from '$lib/mesh/meshTypes';
+  import { getCachedLayout, applyCachedLayout } from '$lib/mesh/meshLayout';
+  import {
+    forceSimulation,
+    forceLink,
+    forceManyBody,
+    forceCenter,
+    forceCollide,
+    forceX,
+    forceY
+  } from 'd3-force';
+  import type { SimulationNodeDatum, SimulationLinkDatum } from 'd3-force';
   import { cookingToolsOpen, cookingToolsStore } from '$lib/stores/cookingToolsWidget';
   import { browser } from '$app/environment';
   import type { PageData } from './$types';
@@ -114,6 +128,11 @@
   let loadingDiscover = true;
   let cultureExpanded = false;
 
+  // Mesh hero state
+  let heroNodes: MeshNode[] = [];
+  let heroEdges: MeshEdge[] = [];
+  let heroReady = false;
+
   // Compute section references reactively
   $: intentSection = CURATED_TAG_SECTIONS.find((s) => s.title === 'Why are you cooking?');
   $: cultureSection = CURATED_TAG_SECTIONS.find((s) => s.title === 'Explore by culture');
@@ -166,6 +185,67 @@
       });
       loadingPopular = false;
     });
+
+    // Load mesh hero data (non-blocking, in parallel)
+    loadMeshHero();
+  }
+
+  async function loadMeshHero() {
+    try {
+      const meshRecipes = await fetchMeshRecipes();
+      if (meshRecipes.length === 0) return;
+
+      const meshEngagement = await fetchMeshEngagement(meshRecipes);
+
+      // Use a reduced set for the hero (top 40 recipes)
+      const topRecipes = meshRecipes.slice(0, 40);
+      const graph = buildMeshGraph(topRecipes, meshEngagement);
+
+      // Check for cached layout
+      const nodeIds = graph.nodes.map((n) => n.id);
+      const cached = getCachedLayout(nodeIds, graph.edges.length);
+      if (cached) {
+        applyCachedLayout(graph.nodes, cached);
+        heroNodes = graph.nodes;
+        heroEdges = graph.edges;
+        heroReady = true;
+        return;
+      }
+
+      // Quick simulation for hero positions — non-blocking
+      const simNodes = graph.nodes as (MeshNode & SimulationNodeDatum)[];
+      const sim = forceSimulation(simNodes)
+        .force('link', forceLink(graph.edges as any[]).id((d: any) => d.id).distance(70).strength(0.3))
+        .force('charge', forceManyBody().strength(-30))
+        .force('center', forceCenter(300, 250))
+        .force('collide', forceCollide().radius(25))
+        .stop();
+
+      // Settle in batches to avoid blocking the main thread
+      const BATCH = 50;
+      await new Promise<void>((resolve) => {
+        function tickBatch() {
+          let ticked = 0;
+          while (sim.alpha() > 0.001 && ticked < BATCH) {
+            sim.tick();
+            ticked++;
+          }
+          if (sim.alpha() > 0.001) {
+            setTimeout(tickBatch, 0);
+          } else {
+            resolve();
+          }
+        }
+        tickBatch();
+      });
+
+      heroNodes = simNodes;
+      heroEdges = graph.edges;
+      heroReady = true;
+    } catch (err) {
+      // Mesh hero is non-critical — if it fails, just don't show it
+      console.warn('[MeshHero] Failed to load:', err);
+    }
   }
 
   async function handleRefresh() {
@@ -285,8 +365,19 @@
 
     <!-- Explore Content -->
     <div class="flex flex-col gap-8">
+      <!-- Mesh Hero -->
+      {#if heroReady || heroNodes.length > 0}
+        <section>
+          <MeshHeroOverlay
+            nodes={heroNodes}
+            edges={heroEdges}
+            ready={heroReady}
+          />
+        </section>
+      {/if}
+
       <!-- Fresh from the Kitchen -->
-      <section class="flex flex-col gap-4">
+      <section class="flex flex-col gap-4" data-section="fresh-kitchen">
         <h2 class="text-2xl font-bold flex items-center gap-2">
           <span>🍳</span>
           <span>Fresh from the Kitchen</span>
diff --git a/src/routes/mesh/+page.svelte b/src/routes/mesh/+page.svelte
new file mode 100644
index 0000000..70195d1
--- /dev/null
+++ b/src/routes/mesh/+page.svelte
@@ -0,0 +1,188 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import type { NDKEvent } from '@nostr-dev-kit/ndk';
+  import { fetchMeshRecipes, fetchMeshEngagement, buildMeshGraph, type EngagementMap } from '$lib/meshUtils';
+  import type { MeshVisualTheme, MeshLayers, MeshFilters, MeshNode } from '$lib/mesh/meshTypes';
+  import { meshVisualTheme, meshLayers, meshFilters, meshSelectedNodeId } from '$lib/mesh/meshStore';
+  import CulinaryMesh from '../../components/CulinaryMesh.svelte';
+  import MeshZoomControls from '../../components/mesh/MeshZoomControls.svelte';
+  import MeshDetailDrawer from '../../components/mesh/MeshDetailDrawer.svelte';
+  import MeshStarfield from '../../components/mesh/MeshStarfield.svelte';
+  import { theme } from '$lib/themeStore';
+
+  let recipes: NDKEvent[] = [];
+  let engagement: EngagementMap = new Map();
+  let loading = true;
+  let settling = false;
+  let loadingPhase: 'recipes' | 'engagement' | 'settling' | '' = '';
+  let error = '';
+  let meshComponent: CulinaryMesh;
+  let dataReady = false;
+
+  // Stats
+  let recipeCount = 0;
+  let tagCount = 0;
+  let connectionCount = 0;
+
+  // Selected node for drawer
+  let selectedNode: MeshNode | null = null;
+
+  $: resolvedTheme = $theme === 'system' ? theme.getResolvedTheme() : $theme;
+  $: isDarkMode = resolvedTheme === 'dark';
+  $: visualTheme = $meshVisualTheme;
+  $: layers = $meshLayers;
+  $: filters = $meshFilters;
+  $: isConstellation = visualTheme === 'constellation';
+
+  async function loadData() {
+    loading = true;
+    error = '';
+    try {
+      loadingPhase = 'recipes';
+      recipes = await fetchMeshRecipes();
+      if (recipes.length === 0) {
+        error = 'No recipes found. The network may be slow — please try again.';
+        return;
+      }
+
+      loadingPhase = 'engagement';
+      engagement = await fetchMeshEngagement(recipes);
+
+      const graph = buildMeshGraph(recipes, engagement);
+      recipeCount = graph.nodes.filter((n) => n.type === 'recipe').length;
+      tagCount = graph.nodes.filter((n) => n.type === 'tag').length;
+      connectionCount = graph.edges.filter((e) => e.edgeType === 'recipe-recipe').length;
+
+      dataReady = true;
+      settling = true;
+      loadingPhase = 'settling';
+    } catch (e) {
+      error = 'Failed to load recipes. Please try again.';
+      loading = false;
+      loadingPhase = '';
+    }
+  }
+
+  function handleSettled() {
+    settling = false;
+    loading = false;
+    loadingPhase = '';
+  }
+
+  function handleCloseDrawer() {
+    selectedNode = null;
+    meshSelectedNodeId.set(null);
+  }
+
+  onMount(loadData);
+</script>
+
+<svelte:head>
+  <title>Culinary Mesh - zap.cooking</title>
+  <meta name="description" content="Explore the culinary mesh — an interactive network visualization of all recipes on zap.cooking, clustered by cuisine, ingredient, and style." />
+  <meta property="og:title" content="Culinary Mesh - zap.cooking" />
+  <meta property="og:description" content="Interactive network visualization of all recipes on zap.cooking" />
+</svelte:head>
+
+<div class="mesh-page">
+  <!-- Content -->
+  <div class="mesh-body">
+    {#if error}
+      <div class="flex flex-col items-center justify-center h-full gap-3">
+        <p style="color: var(--color-caption);">{error}</p>
+        <button
+          class="px-4 py-2 rounded-lg text-sm font-medium"
+          style="background-color: var(--color-primary); color: white;"
+          on:click={loadData}
+        >
+          Retry
+        </button>
+      </div>
+    {:else}
+      {#if isConstellation}
+        <MeshStarfield />
+      {/if}
+
+      {#if dataReady}
+        <CulinaryMesh
+          {recipes}
+          {engagement}
+          {layers}
+          {filters}
+          {visualTheme}
+          bind:this={meshComponent}
+          on:settled={handleSettled}
+        />
+      {/if}
+
+      {#if loading}
+        <div class="mesh-loading-overlay">
+          <div class="flex flex-col items-center justify-center h-full gap-3">
+            <div class="mesh-spinner" />
+            <p style="color: var(--color-caption);">
+              {#if loadingPhase === 'recipes'}
+                Discovering recipes...
+              {:else if loadingPhase === 'engagement'}
+                Mapping community engagement...
+              {:else if loadingPhase === 'settling'}
+                Arranging the mesh...
+              {:else}
+                Loading the culinary mesh...
+              {/if}
+            </p>
+          </div>
+        </div>
+      {/if}
+
+      {#if !loading && !error}
+        <MeshZoomControls
+          onZoomIn={() => meshComponent?.zoomIn()}
+          onZoomOut={() => meshComponent?.zoomOut()}
+          onResetZoom={() => meshComponent?.resetZoom()}
+        />
+      {/if}
+
+      {#if selectedNode}
+        <MeshDetailDrawer
+          node={selectedNode}
+          on:close={handleCloseDrawer}
+        />
+      {/if}
+    {/if}
+  </div>
+</div>
+
+<style>
+  .mesh-page {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    height: 100dvh;
+  }
+
+  .mesh-body {
+    flex: 1;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .mesh-loading-overlay {
+    position: absolute;
+    inset: 0;
+    z-index: 30;
+    background-color: var(--color-bg-primary);
+  }
+
+  .mesh-spinner {
+    width: 32px;
+    height: 32px;
+    border: 3px solid var(--color-input-border);
+    border-top-color: var(--color-primary);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+  }
+
+  @keyframes spin {
+    to { transform: rotate(360deg); }
+  }
+</style>
diff --git a/src/routes/mesh/+page.ts b/src/routes/mesh/+page.ts
new file mode 100644
index 0000000..a3d1578
--- /dev/null
+++ b/src/routes/mesh/+page.ts
@@ -0,0 +1 @@
+export const ssr = false;
diff --git a/src/routes/user/[slug]/+page.svelte b/src/routes/user/[slug]/+page.svelte
index f1c212b..14c1bd0 100644
--- a/src/routes/user/[slug]/+page.svelte
+++ b/src/routes/user/[slug]/+page.svelte
@@ -37,6 +37,7 @@
   import { profileCacheManager } from '$lib/profileCache';
   import { RECIPE_TAGS } from '$lib/consts';
   import ArticleFeed from '../../../components/ArticleFeed.svelte';
+  import MembershipBeltBadge from '../../../components/MembershipBeltBadge.svelte';
 
   export const data: PageData = {} as PageData;
 
@@ -1322,7 +1323,10 @@
       <div class="flex items-start justify-between gap-3">
         <div class="flex items-center gap-3 min-w-0">
           <button class="hover:opacity-80 transition-opacity" on:click={() => (qrModal = true)}>
-            <h1 class="text-xl font-bold truncate"><CustomName pubkey={hexpubkey || ''} /></h1>
+            <h1 class="text-xl font-bold truncate flex items-center gap-1.5">
+              <CustomName pubkey={hexpubkey || ''} />
+              <MembershipBeltBadge pubkey={hexpubkey || ''} size={20} />
+            </h1>
           </button>
           {#if user?.npub}
             <button