diff --git a/packages/ui/registry.json b/packages/ui/registry.json
index 10a6e147..c812ff0f 100644
--- a/packages/ui/registry.json
+++ b/packages/ui/registry.json
@@ -3110,10 +3110,22 @@
           "path": "registry/constructive/blocks/org-chart/org-chart-states.tsx",
           "type": "registry:component"
         },
+        {
+          "path": "registry/constructive/blocks/org-chart/org-chart-wires.tsx",
+          "type": "registry:component"
+        },
         {
           "path": "registry/constructive/blocks/org-chart/layout.ts",
           "type": "registry:lib"
         },
+        {
+          "path": "registry/constructive/blocks/org-chart/org-chart-scene.ts",
+          "type": "registry:lib"
+        },
+        {
+          "path": "registry/constructive/blocks/org-chart/org-chart-spring.ts",
+          "type": "registry:lib"
+        },
         {
           "path": "registry/constructive/blocks/org-chart/org-chart-utils.ts",
           "type": "registry:lib"
diff --git a/packages/ui/src/components/org-chart/org-chart-node.tsx b/packages/ui/src/components/org-chart/org-chart-node.tsx
index 3acc1094..e6ed4b35 100644
--- a/packages/ui/src/components/org-chart/org-chart-node.tsx
+++ b/packages/ui/src/components/org-chart/org-chart-node.tsx
@@ -9,13 +9,12 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSepara
 import { CANVAS_NODE_ATTRIBUTE, NodeShell } from '../workspace-kit/canvas';
 import { focusRingClass, pressClass } from '../workspace-kit/primitives';
 import type { PlacedPerson } from './layout';
+import { springTransition } from './org-chart-spring';
 import { getInitials, personName, reportsLabel } from './org-chart-utils';
 
 export type NodeHandlers = {
+	/** Starts a press; the chart follows the pointer from there until it is released anywhere. */
 	pointerDown: (id: string, event: React.PointerEvent<HTMLDivElement>) => void;
-	pointerMove: (id: string, event: React.PointerEvent<HTMLDivElement>) => void;
-	pointerUp: (id: string, event: React.PointerEvent<HTMLDivElement>) => void;
-	pointerCancel: () => void;
 	keyDown: (id: string, event: React.KeyboardEvent<HTMLDivElement>) => void;
 	focus: (id: string, event: React.FocusEvent<HTMLDivElement>) => void;
 	toggle: (id: string) => void;
@@ -35,80 +34,80 @@ export function PersonAvatar({ person, className }: { person: { displayName: str
 	);
 }
 
-type OrgChartNodeProps = {
+/**
+ * The card's actions menu. Until its first click it is a plain button that
+ * looks the same, because a menu per card is a third of the cost of
+ * unfolding a large team; the first click mounts the real menu, already open.
+ */
+function CardMenu({ id, name, selected, handlers }: { id: string; name: string; selected: boolean; handlers: NodeHandlers }) {
+	const [mounted, setMounted] = React.useState(false);
+	const trigger = {
+		tabIndex: -1,
+		'aria-label': `Actions for ${name}`,
+		className: cn(
+			'grid size-6 shrink-0 cursor-pointer place-items-center rounded-md text-muted-foreground opacity-0 hover:bg-overlay-hover hover:text-foreground',
+			'group-hover/node:opacity-100 group-focus-within/node:opacity-100 data-[popup-open]:opacity-100 pointer-coarse:opacity-100',
+			selected && 'opacity-100',
+			'transition-opacity duration-(--duration-fast) motion-reduce:transition-none',
+			pressClass,
+			focusRingClass,
+		),
+		children: <Ellipsis aria-hidden="true" className="size-3.5" />,
+	};
+	if (!mounted) return <button type="button" aria-haspopup="menu" {...trigger} onClick={() => setMounted(true)} />;
+	return (
+		<DropdownMenu defaultOpen>
+			<DropdownMenuTrigger {...trigger} />
+			<DropdownMenuContent align="start" side="right" className="w-48">
+				<DropdownMenuItem className={MENU_ITEM} onClick={() => handlers.openMove(id)}>
+					<GitBranch aria-hidden="true" />
+					Change manager…
+				</DropdownMenuItem>
+				{handlers.edit ? (
+					<DropdownMenuItem className={MENU_ITEM} onClick={() => handlers.edit?.(id)}>
+						<Pencil aria-hidden="true" />
+						Edit position
+					</DropdownMenuItem>
+				) : null}
+				{handlers.remove ? (
+					<>
+						<DropdownMenuSeparator />
+						<DropdownMenuItem
+							className={cn(MENU_ITEM, 'text-destructive data-[highlighted]:bg-destructive/10 data-[highlighted]:text-destructive [&_svg]:text-destructive')}
+							onClick={() => handlers.remove?.(id)}
+						>
+							<Trash2 aria-hidden="true" />
+							Remove from chart
+						</DropdownMenuItem>
+					</>
+				) : null}
+			</DropdownMenuContent>
+		</DropdownMenu>
+	);
+}
+
+type CardProps = {
 	person: PlacedPerson;
 	selected: boolean;
-	/** The one node in the tab order (roving tabindex). */
-	tabStop: boolean;
 	editable: boolean;
-	/** Offset in canvas units while this node is being dragged, and whether it is over a valid manager. */
-	dragOffset: { dx: number; dy: number; targetId: string | null } | null;
-	/** A valid manager under the dragged node. */
+	dragging: boolean;
 	dropTarget: boolean;
-	/** Can't take the dragged node: it is the node itself or one of its reports. */
-	blocked: boolean;
-	/** Shown under the dragged card while it is over a valid manager, e.g. "Reports to Maya Chen". */
-	dropHint?: string;
 	handlers: NodeHandlers;
 };
 
 /**
- * One person: a double-framed card with their avatar, name, and title, a
- * menu for edits, and a footer that folds their reports away. The whole card
- * is the drag handle; menu and footer buttons keep their own presses.
+ * What a card draws: a double-framed card with the avatar, name, and title,
+ * a menu for edits, and a footer that folds the person's reports away.
+ * Memoised apart from the card's position, so a card that only moves never re-renders.
  */
-function OrgChartNodeView({ person, selected, tabStop, editable, dragOffset, dropTarget, blocked, dropHint, handlers }: OrgChartNodeProps) {
+const OrgCard = React.memo(function OrgCard({ person, selected, editable, dragging, dropTarget, handlers }: CardProps) {
 	const { data, collapsed, hiddenCount } = person;
 	const id = data.id;
 	const name = personName(data);
 	const compact = data.isCompact;
 	const hasReports = data.childCount > 0;
-	const dragging = dragOffset !== null;
-
 	return (
-		<div
-			role="treeitem"
-			aria-level={person.depth + 1}
-			aria-posinset={person.position}
-			aria-setsize={person.siblings}
-			aria-selected={selected}
-			aria-expanded={hasReports ? !collapsed : undefined}
-			aria-label={[name, data.positionTitle, hasReports ? reportsLabel(data.childCount) : null].filter(Boolean).join(', ')}
-			tabIndex={tabStop ? 0 : -1}
-			data-node-id={id}
-			{...{ [CANVAS_NODE_ATTRIBUTE]: '' }}
-			onPointerDown={(event) => handlers.pointerDown(id, event)}
-			onPointerMove={(event) => handlers.pointerMove(id, event)}
-			onPointerUp={(event) => handlers.pointerUp(id, event)}
-			onPointerCancel={handlers.pointerCancel}
-			onKeyDown={(event) => handlers.keyDown(id, event)}
-			onFocus={(event) => handlers.focus(id, event)}
-			style={{
-				left: person.x,
-				top: person.y,
-				width: person.width,
-				height: person.height,
-				// Over a manager, the card shrinks and fades a touch so the target's highlight shows through.
-				transform: dragging ? `translate(${dragOffset.dx}px, ${dragOffset.dy}px) scale(${dragOffset.targetId ? 0.9 : 1})` : undefined,
-			}}
-			className={cn(
-				'group/node absolute isolate rounded-[14px]',
-				focusRingClass,
-				editable ? 'cursor-grab' : 'cursor-pointer',
-				dragging
-					? cn('z-20 cursor-grabbing', dragOffset.targetId && 'opacity-85')
-					: 'transition-[left,top,transform,opacity] duration-(--duration-slow) ease-(--ease-out) motion-reduce:transition-none',
-				blocked && !dragging && 'opacity-40',
-			)}
-		>
-			{dropHint ? (
-				<span
-					aria-hidden="true"
-					className="absolute top-full left-1/2 mt-2 -translate-x-1/2 animate-[ai-fade-up_var(--duration-moderate)_var(--ease-out)_both] rounded-md bg-foreground px-2 py-1 text-xs whitespace-nowrap text-background shadow-card-lg motion-reduce:animate-none"
-				>
-					{dropHint}
-				</span>
-			) : null}
+		<>
 			{collapsed ? (
 				<>
 					<span aria-hidden="true" className="absolute inset-x-2.5 -bottom-1.5 -z-10 h-4 rounded-b-[12px] border border-t-0 border-foreground/10 bg-muted" />
@@ -134,48 +133,7 @@ function OrgChartNodeView({ person, selected, tabStop, editable, dragOffset, dro
 							</p>
 						) : null}
 					</div>
-					{editable ? (
-						<DropdownMenu>
-							<DropdownMenuTrigger
-								tabIndex={-1}
-								aria-label={`Actions for ${name}`}
-								className={cn(
-									'grid size-6 shrink-0 cursor-pointer place-items-center rounded-md text-muted-foreground opacity-0 hover:bg-overlay-hover hover:text-foreground',
-									'group-hover/node:opacity-100 group-focus-within/node:opacity-100 data-[popup-open]:opacity-100 pointer-coarse:opacity-100',
-									selected && 'opacity-100',
-									'transition-opacity duration-(--duration-fast) motion-reduce:transition-none',
-									pressClass,
-									focusRingClass,
-								)}
-							>
-								<Ellipsis aria-hidden="true" className="size-3.5" />
-							</DropdownMenuTrigger>
-							<DropdownMenuContent align="start" side="right" className="w-48">
-								<DropdownMenuItem className={MENU_ITEM} onClick={() => handlers.openMove(id)}>
-									<GitBranch aria-hidden="true" />
-									Change manager…
-								</DropdownMenuItem>
-								{handlers.edit ? (
-									<DropdownMenuItem className={MENU_ITEM} onClick={() => handlers.edit?.(id)}>
-										<Pencil aria-hidden="true" />
-										Edit position
-									</DropdownMenuItem>
-								) : null}
-								{handlers.remove ? (
-									<>
-										<DropdownMenuSeparator />
-										<DropdownMenuItem
-											className={cn(MENU_ITEM, 'text-destructive data-[highlighted]:bg-destructive/10 data-[highlighted]:text-destructive [&_svg]:text-destructive')}
-											onClick={() => handlers.remove?.(id)}
-										>
-											<Trash2 aria-hidden="true" />
-											Remove from chart
-										</DropdownMenuItem>
-									</>
-								) : null}
-							</DropdownMenuContent>
-						</DropdownMenu>
-					) : null}
+					{editable ? <CardMenu id={id} name={name} selected={selected} handlers={handlers} /> : null}
 				</div>
 				{hasReports ? (
 					<button
@@ -196,16 +154,135 @@ function OrgChartNodeView({ person, selected, tabStop, editable, dragOffset, dro
 						) : null}
 						<ChevronDown
 							aria-hidden="true"
-							className={cn(
-								'ml-auto size-3 shrink-0 transition-transform duration-(--duration-moderate) ease-out motion-reduce:transition-none',
-								collapsed && '-rotate-90',
-							)}
+							className={cn('ml-auto size-3 shrink-0 transition-transform duration-(--duration-moderate) ease-out motion-reduce:transition-none', collapsed && '-rotate-90')}
 						/>
 					</button>
 				) : null}
 			</NodeShell>
+		</>
+	);
+}, sameBy<CardProps>({ person: sameCard }));
+
+type OrgChartNodeProps = {
+	person: PlacedPerson;
+	/** Where the card is heading: its slot, or under a remaining manager while it is folded away. */
+	x: number;
+	y: number;
+	/** Where a newly shown card starts: its manager's spot, so it slides out from under them. */
+	enterFrom?: { x: number; y: number };
+	/** Folded away or removed: sliding under a manager and about to unmount, no longer part of the tree. */
+	leaving: boolean;
+	selected: boolean;
+	/** The one node in the tab order (roving tabindex). */
+	tabStop: boolean;
+	editable: boolean;
+	/** Offset in canvas units while this card follows the pointer, and whether it is over a valid manager. */
+	drag: { dx: number; dy: number; overTarget: boolean } | null;
+	/** A valid manager under the dragged node. */
+	dropTarget: boolean;
+	/** Can't take the dragged node: it is the node itself or one of its reports. */
+	blocked: boolean;
+	/** Shown under the dragged card while it is over a valid manager, e.g. "Reports to Maya Chen". */
+	dropHint?: string;
+	handlers: NodeHandlers;
+};
+
+/**
+ * One person on the canvas. Position changes spring through CSS transitions
+ * on `left`/`top`; the whole card is the drag handle, while menu and footer
+ * buttons keep their own presses.
+ */
+function OrgChartNodeView({ person, x, y, enterFrom, leaving, selected, tabStop, editable, drag, dropTarget, blocked, dropHint, handlers }: OrgChartNodeProps) {
+	const { data, collapsed } = person;
+	const id = data.id;
+	const name = personName(data);
+	const hasReports = data.childCount > 0;
+	const dragging = drag !== null;
+	const style: React.CSSProperties & Record<`--${string}`, string> = {
+		left: x,
+		top: y,
+		width: person.width,
+		height: person.height,
+		// Managers sit above their reports, so teams slide out from under them and fold back beneath.
+		zIndex: dragging ? 1000 : Math.max(1, 500 - person.depth),
+		// Over a manager, the card shrinks a touch so the target's highlight shows through.
+		transform: drag ? `translate(${drag.dx}px, ${drag.dy}px) scale(${drag.overTarget ? 0.9 : 1})` : undefined,
+	};
+	if (enterFrom) {
+		style['--enter-left'] = `${enterFrom.x}px`;
+		style['--enter-top'] = `${enterFrom.y}px`;
+	}
+
+	return (
+		<div
+			role="treeitem"
+			aria-level={person.depth + 1}
+			aria-posinset={person.position}
+			aria-setsize={person.siblings}
+			aria-selected={selected}
+			aria-expanded={hasReports ? !collapsed : undefined}
+			aria-label={[name, data.positionTitle, hasReports ? reportsLabel(data.childCount) : null].filter(Boolean).join(', ')}
+			aria-hidden={leaving || undefined}
+			tabIndex={tabStop && !leaving ? 0 : -1}
+			data-node-id={leaving ? undefined : id}
+			{...{ [CANVAS_NODE_ATTRIBUTE]: '' }}
+			onPointerDown={leaving ? undefined : (event) => handlers.pointerDown(id, event)}
+			onKeyDown={(event) => handlers.keyDown(id, event)}
+			onFocus={(event) => handlers.focus(id, event)}
+			style={style}
+			className={cn(
+				'group/node absolute isolate rounded-[14px]',
+				focusRingClass,
+				editable ? 'cursor-grab' : 'cursor-pointer',
+				// Opacity stays out of the transition: fading many cards at once would give each its own layer.
+				dragging ? cn('cursor-grabbing', drag.overTarget && 'opacity-85') : cn('transition-[left,top,transform]', springTransition),
+				enterFrom && 'starting:left-(--enter-left) starting:top-(--enter-top)',
+				blocked && !dragging && 'opacity-40',
+				leaving && 'pointer-events-none',
+			)}
+		>
+			{dropHint ? (
+				<span
+					aria-hidden="true"
+					className="absolute top-full left-1/2 mt-2 -translate-x-1/2 animate-[ai-fade-up_var(--duration-moderate)_var(--ease-out)_both] rounded-md bg-foreground px-2 py-1 text-xs whitespace-nowrap text-background shadow-card-lg motion-reduce:animate-none"
+				>
+					{dropHint}
+				</span>
+			) : null}
+			<OrgCard person={person} selected={selected} editable={editable} dragging={dragging} dropTarget={dropTarget} handlers={handlers} />
 		</div>
 	);
 }
 
-export const OrgChartNode = React.memo(OrgChartNodeView);
+/** Everything a card draws. Its coordinates are left out: moving is the wrapper's job. */
+function sameCard(a: PlacedPerson, b: PlacedPerson) {
+	return (
+		a.data.id === b.data.id &&
+		a.data.displayName === b.data.displayName &&
+		a.data.positionTitle === b.data.positionTitle &&
+		a.data.avatarUrl === b.data.avatarUrl &&
+		a.data.childCount === b.data.childCount &&
+		a.data.isCompact === b.data.isCompact &&
+		a.width === b.width &&
+		a.height === b.height &&
+		a.depth === b.depth &&
+		a.collapsed === b.collapsed &&
+		a.hiddenCount === b.hiddenCount &&
+		a.position === b.position &&
+		a.siblings === b.siblings
+	);
+}
+
+/** Shallow props comparison, with a custom check for the listed props. */
+function sameBy<P extends object>(checks: { [K in keyof P]?: (a: P[K], b: P[K]) => boolean }) {
+	return (previous: P, next: P) => (Object.keys(next) as (keyof P)[]).every((key) => (checks[key] ?? Object.is)(previous[key], next[key]));
+}
+
+type Drag = OrgChartNodeProps['drag'];
+const sameDrag = (a: Drag, b: Drag) => a === b || (a !== null && b !== null && a.dx === b.dx && a.dy === b.dy && a.overTarget === b.overTarget);
+
+export const OrgChartNode = React.memo(
+	OrgChartNodeView,
+	// `enterFrom` only matters on the first render, when the card starts from it.
+	sameBy<OrgChartNodeProps>({ person: sameCard, drag: sameDrag, enterFrom: (a, b) => Boolean(a) === Boolean(b) }),
+);
diff --git a/packages/ui/src/components/org-chart/org-chart-scene.ts b/packages/ui/src/components/org-chart/org-chart-scene.ts
new file mode 100644
index 00000000..c8782e8f
--- /dev/null
+++ b/packages/ui/src/components/org-chart/org-chart-scene.ts
@@ -0,0 +1,160 @@
+'use client';
+
+import * as React from 'react';
+
+import type { WirePoint } from '../workspace-kit/canvas';
+import type { OrgLayout, PlacedPerson } from './layout';
+import { CHART_SPRING } from './org-chart-spring';
+import type { AnchorSpec, WireSpec } from './org-chart-wires';
+
+/** A card being dragged: its offset in canvas units and the manager it would report to if dropped now. */
+export type DragState = { id: string; dx: number; dy: number; targetId: string | null; blocked: ReadonlySet<string> };
+
+/** A card on the canvas: where it is heading, where a new one grows from, and whether it is folding away. */
+export type SceneCard = { person: PlacedPerson; x: number; y: number; enterFrom?: { x: number; y: number }; leaving: boolean };
+
+type Point = { x: number; y: number };
+type Spot = Point & { width: number; height: number };
+type Leaving = { person: PlacedPerson; anchorId: string };
+/**
+ * `shift` moves the whole layout on the canvas so the anchor person stays
+ * put across layout changes; `beforeShift` is the shift `before` was drawn with.
+ */
+type Scene = { layout: OrgLayout; before: OrgLayout | null; leaving: ReadonlyMap<string, Leaving>; shift: Point; beforeShift: Point };
+
+const EMPTY: ReadonlyMap<string, Leaving> = new Map();
+const ORIGIN: Point = { x: 0, y: 0 };
+const top = (spot: Spot): WirePoint => [spot.x + spot.width / 2, spot.y];
+const bottom = (spot: Spot): WirePoint => [spot.x + spot.width / 2, spot.y + spot.height];
+
+/** The closest manager above `id` (in `before`) who is still on the chart `after`. */
+function nearestShown(before: OrgLayout, after: OrgLayout, id: string) {
+	let current = before.byId.get(id)?.parentId ?? null;
+	while (current && !after.byId.has(current)) current = before.byId.get(current)?.parentId ?? null;
+	return current ? after.byId.get(current) : undefined;
+}
+
+/**
+ * People who just left the chart keep sliding under the nearest manager still
+ * on it; everyone else is laid out afresh, shifted so the anchor stays put.
+ */
+function nextScene(scene: Scene, layout: OrgLayout, anchorId: string | null, animate: boolean): Scene {
+	const was = anchorId ? scene.layout.byId.get(anchorId) : undefined;
+	const now = anchorId ? layout.byId.get(anchorId) : undefined;
+	const shift = was && now ? { x: scene.shift.x + was.x - now.x, y: scene.shift.y + was.y - now.y } : scene.shift;
+	const base = { layout, before: scene.layout, shift, beforeShift: scene.shift };
+	if (!animate) return { ...base, leaving: EMPTY };
+	const leaving = new Map<string, Leaving>();
+	for (const [id, item] of scene.leaving) if (!layout.byId.has(id) && layout.byId.has(item.anchorId)) leaving.set(id, item);
+	for (const person of scene.layout.people) {
+		const id = person.data.id;
+		if (layout.byId.has(id)) continue;
+		const anchor = nearestShown(scene.layout, layout, id);
+		if (anchor) leaving.set(id, { person, anchorId: anchor.data.id });
+	}
+	return { ...base, leaving };
+}
+
+/**
+ * Turns each new layout into what the canvas draws, so every change springs:
+ * new reports slide out from under their manager, folded-away reports slide
+ * back beneath the nearest manager still shown and unmount once hidden, and
+ * everyone else springs to their new slot. The anchor (the person whose team
+ * was just folded, say) keeps its spot on screen, so the pointer stays on it.
+ * Cards and wires keep a stable DOM order, because moving an element in the
+ * DOM cancels its running transition (and would lose a pointer capture mid-drag).
+ */
+export function useScene(layout: OrgLayout, anchorId: string | null, drag: DragState | null, highlighted: ReadonlySet<string>, animate: boolean) {
+	const [scene, setScene] = React.useState<Scene>({ layout, before: null, leaving: EMPTY, shift: ORIGIN, beforeShift: ORIGIN });
+	let current = scene;
+	if (scene.layout !== layout) {
+		current = nextScene(scene, layout, anchorId, animate);
+		setScene(current);
+	}
+	const { before, leaving, shift, beforeShift } = current;
+
+	// Once the last slide has settled, the cards that folded away can go.
+	React.useEffect(() => {
+		if (leaving.size === 0) return;
+		const timer = window.setTimeout(() => setScene((latest) => (latest.leaving.size ? { ...latest, leaving: EMPTY } : latest)), CHART_SPRING.duration + 60);
+		return () => window.clearTimeout(timer);
+	}, [leaving]);
+
+	const order = React.useRef<string[]>([]);
+
+	return React.useMemo(() => {
+		// Append-only order: survivors keep their place, newcomers join the end.
+		const shown = new Set([...layout.byId.keys(), ...leaving.keys()]);
+		const ids = order.current.filter((id) => shown.has(id));
+		const placed = new Set(ids);
+		for (const person of layout.people) if (!placed.has(person.data.id)) ids.push(person.data.id);
+		order.current = ids;
+
+		/** Where a card is heading: its slot, or its anchor's slot while it folds away. */
+		const slotOf = (id: string): Spot | undefined => {
+			const person = layout.byId.get(id);
+			if (person) return { x: person.x + shift.x, y: person.y + shift.y, width: person.width, height: person.height };
+			const item = leaving.get(id);
+			const anchor = item ? layout.byId.get(item.anchorId) : undefined;
+			return item && anchor ? { x: anchor.x + shift.x, y: anchor.y + shift.y, width: item.person.width, height: item.person.height } : undefined;
+		};
+		/** Where someone was drawn before this change. */
+		const beforeOf = (id: string): Spot | undefined => {
+			const person = before?.byId.get(id);
+			return person && { x: person.x + beforeShift.x, y: person.y + beforeShift.y, width: person.width, height: person.height };
+		};
+		/** The slot plus the drag offset, while the card follows the pointer. */
+		const spotOf = (id: string): Spot | undefined => {
+			const slot = slotOf(id);
+			return slot && drag?.id === id ? { ...slot, x: slot.x + drag.dx, y: slot.y + drag.dy } : slot;
+		};
+		/** Where a newly shown card grows from: the closest manager who was already on the chart, as they were. */
+		const enterSpot = (person: PlacedPerson): Spot | undefined => {
+			if (!before || before.byId.has(person.data.id)) return undefined;
+			let source = person.parentId;
+			while (source && !before.byId.has(source)) source = layout.byId.get(source)?.parentId ?? null;
+			const from = source ? beforeOf(source) : undefined;
+			return from ? { ...from, width: person.width, height: person.height } : undefined;
+		};
+
+		const cards: SceneCard[] = [];
+		const wires: WireSpec[] = [];
+		const anchors = new Map<string, AnchorSpec>();
+		const addAnchor = (anchor: AnchorSpec) => {
+			const existing = anchors.get(anchor.id);
+			anchors.set(anchor.id, { ...anchor, live: anchor.live || Boolean(existing?.live), instant: anchor.instant || Boolean(existing?.instant) });
+		};
+		for (const id of ids) {
+			const shown = layout.byId.get(id);
+			const person = shown ?? leaving.get(id)!.person;
+			const slot = slotOf(id)!;
+			const enter = shown ? enterSpot(shown) : undefined;
+			cards.push({ person, x: slot.x, y: slot.y, enterFrom: enter && { x: enter.x, y: enter.y }, leaving: !shown });
+
+			const parentId = person.parentId;
+			const parent = parentId ? spotOf(parentId) : undefined;
+			// Over a new manager, the dragged card's own line gives way to the preview line.
+			if (!parentId || !parent || (drag?.id === id && drag.targetId)) continue;
+			const live = Boolean(shown) && highlighted.has(id);
+			const instant = drag?.id === id || drag?.id === parentId;
+			// A newly shown line grows from its manager's old spot, collapsed behind that card.
+			const from = beforeOf(parentId) ?? (enter && shown?.parentId ? enterSpot(layout.byId.get(parentId)!) : undefined);
+			const growFrom = from && bottom({ ...from, height: parent.height });
+			wires.push({ id, start: bottom(parent), end: top(spotOf(id)!), tone: live ? 'live' : 'rest', marching: false, instant, enter: enter && growFrom ? { start: growFrom, end: top(enter) } : undefined });
+			addAnchor({ id: parentId, at: bottom(parent), live, instant, enter: growFrom });
+		}
+		const target = drag?.targetId ? spotOf(drag.targetId) : undefined;
+		const dragged = drag ? spotOf(drag.id) : undefined;
+		if (drag?.targetId && target && dragged) {
+			wires.push({ id: `preview-${drag.id}`, start: bottom(target), end: top(dragged), tone: 'live', marching: animate, instant: true });
+			addAnchor({ id: drag.targetId, at: bottom(target), live: true, instant: false });
+		}
+		// Anchors follow the card order too, so none of them moves in the DOM either.
+		const orderedAnchors: AnchorSpec[] = [];
+		for (const id of ids) {
+			const anchor = anchors.get(id);
+			if (anchor) orderedAnchors.push(anchor);
+		}
+		return { cards, wires, anchors: orderedAnchors, shift };
+	}, [animate, before, beforeShift, drag, highlighted, layout, leaving, shift]);
+}
diff --git a/packages/ui/src/components/org-chart/org-chart-spring.ts b/packages/ui/src/components/org-chart/org-chart-spring.ts
new file mode 100644
index 00000000..0d7b9c80
--- /dev/null
+++ b/packages/ui/src/components/org-chart/org-chart-spring.ts
@@ -0,0 +1,36 @@
+import type * as React from 'react';
+
+/**
+ * A damped spring (mass 1) from 0 to 1, sampled into a CSS `linear()` easing.
+ * CSS transitions keep hundreds of moving cards and wires inside the style
+ * engine, which is far cheaper per frame than writing them from script, and
+ * one shared curve keeps every wire attached to its cards.
+ */
+function springEasing(stiffness: number, damping: number, samples = 48) {
+	const omega = Math.sqrt(stiffness);
+	const zeta = damping / (2 * omega);
+	const decay = zeta * omega;
+	const damped = omega * Math.sqrt(Math.max(0, 1 - zeta * zeta));
+	const at = (t: number) =>
+		zeta < 1 ? 1 - Math.exp(-decay * t) * (Math.cos(damped * t) + (decay / damped) * Math.sin(damped * t)) : 1 - Math.exp(-omega * t) * (1 + omega * t);
+	// Settled once the swing stays within 0.2% of the distance travelled.
+	const envelope = zeta < 1 ? Math.sqrt(1 + (decay / damped) ** 2) : 1;
+	const seconds = Math.log(envelope / 0.002) / decay;
+	const points = Array.from({ length: samples + 1 }, (_, index) => (index === samples ? 1 : Math.round(at((index / samples) * seconds) * 1000) / 1000));
+	return { easing: `linear(${points.join(', ')})`, duration: Math.round(seconds * 1000) };
+}
+
+/**
+ * The chart's one spring: quick, with a whisper of overshoot (about 1.5%),
+ * so a whole division unfolding feels physical without wobbling.
+ */
+export const CHART_SPRING = springEasing(420, 33);
+
+/** Exposes the spring to every card, wire, and dot in the chart as CSS custom properties. */
+export const CHART_SPRING_STYLE = {
+	'--org-spring': CHART_SPRING.easing,
+	'--org-spring-duration': `${CHART_SPRING.duration}ms`,
+} as React.CSSProperties;
+
+/** Tailwind classes for a spring transition on the given properties. */
+export const springTransition = 'duration-(--org-spring-duration) ease-(--org-spring) motion-reduce:transition-none';
diff --git a/packages/ui/src/components/org-chart/org-chart-wires.tsx b/packages/ui/src/components/org-chart/org-chart-wires.tsx
new file mode 100644
index 00000000..b451fc04
--- /dev/null
+++ b/packages/ui/src/components/org-chart/org-chart-wires.tsx
@@ -0,0 +1,106 @@
+'use client';
+
+import * as React from 'react';
+
+import { cn } from '../../lib/utils';
+import { WIRE_STROKE, wirePath, type WirePoint, type WireTone } from '../workspace-kit/canvas';
+import { springTransition } from './org-chart-spring';
+
+/** A reporting line from the bottom centre of a manager's card to the top centre of a report's. */
+export type WireSpec = {
+	id: string;
+	start: WirePoint;
+	end: WirePoint;
+	tone: WireTone;
+	/** Marching dashes, for the drag preview. */
+	marching: boolean;
+	/** Follows a dragged card 1:1 instead of springing. */
+	instant: boolean;
+	/** Where a newly shown wire grows from: collapsed under its manager. */
+	enter?: { start: WirePoint; end: WirePoint };
+};
+
+/** The dot under a manager where their reporting lines leave. */
+export type AnchorSpec = { id: string; at: WirePoint; live: boolean; instant: boolean; enter?: WirePoint };
+
+const samePoint = (a: WirePoint | undefined, b: WirePoint | undefined) => a === b || (a !== undefined && b !== undefined && a[0] === b[0] && a[1] === b[1]);
+
+/** Points arrive as fresh arrays on every change, so compare them by value; `enter` only matters on the first render. */
+function sameShape<T extends object>(a: T, b: T) {
+	for (const key of Object.keys(b) as (keyof T)[]) {
+		const [x, y] = [a[key], b[key]];
+		if (key === 'enter' ? Boolean(x) !== Boolean(y) : Array.isArray(x) ? !samePoint(x as WirePoint, y as WirePoint) : x !== y) return false;
+	}
+	return true;
+}
+
+const OrgWire = React.memo(function OrgWire({ start, end, tone, marching, instant, enter, marker }: Omit<WireSpec, 'id'> & { marker: string }) {
+	const d = wirePath(start, end, 'vertical');
+	const style = { d: `path("${d}")`, ...(enter ? { '--enter-d': `path("${wirePath(enter.start, enter.end, 'vertical')}")` } : null) } as React.CSSProperties;
+	return (
+		<path
+			d={d}
+			style={style}
+			fill="none"
+			stroke={WIRE_STROKE[tone]}
+			strokeWidth={1}
+			strokeDasharray={tone === 'rest' ? undefined : '4 4'}
+			strokeLinecap="round"
+			markerEnd={`url(#${marker}-${tone === 'rest' ? 'rest' : 'live'})`}
+			className={cn(instant ? 'transition-[stroke]' : cn('transition-[d,stroke]', springTransition), enter && 'starting:[d:var(--enter-d)]')}
+		>
+			{marching ? <animate attributeName="stroke-dashoffset" from="8" to="0" dur="0.5s" repeatCount="indefinite" /> : null}
+		</path>
+	);
+}, sameShape);
+
+const OrgAnchor = React.memo(function OrgAnchor({ at, live, instant, enter }: Omit<AnchorSpec, 'id'>) {
+	const style = { cx: at[0], cy: at[1], ...(enter ? { '--enter-cx': `${enter[0]}px`, '--enter-cy': `${enter[1]}px` } : null) } as React.CSSProperties;
+	return (
+		<circle
+			cx={at[0]}
+			cy={at[1]}
+			r={3}
+			style={style}
+			fill="var(--card)"
+			stroke={WIRE_STROKE[live ? 'live' : 'rest']}
+			strokeWidth={1}
+			className={cn(
+				instant ? 'transition-[stroke]' : cn('transition-[cx,cy,stroke]', springTransition),
+				enter && 'starting:[cx:var(--enter-cx)] starting:[cy:var(--enter-cy)]',
+			)}
+		/>
+	);
+}, sameShape);
+
+type OrgChartWiresProps = {
+	wires: readonly WireSpec[];
+	anchors: readonly AnchorSpec[];
+	width: number;
+	height: number;
+};
+
+/**
+ * Every reporting line, then every anchor on top. Both lists keep a stable
+ * order: moving an element in the DOM would cancel its running transition.
+ */
+export function OrgChartWires({ wires, anchors, width, height }: OrgChartWiresProps) {
+	const marker = `org-wire-${React.useId().replace(/:/g, '')}`;
+	return (
+		<svg aria-hidden="true" className="pointer-events-none absolute top-0 left-0 overflow-visible" width={Math.max(1, width)} height={Math.max(1, height)}>
+			<defs>
+				{(['rest', 'live'] as const).map((tone) => (
+					<marker key={tone} id={`${marker}-${tone}`} markerUnits="userSpaceOnUse" markerWidth={8} markerHeight={8} refX={4} refY={4} overflow="visible">
+						<circle cx={4} cy={4} r={3} fill="var(--card)" stroke={WIRE_STROKE[tone]} strokeWidth={1} />
+					</marker>
+				))}
+			</defs>
+			{wires.map(({ id, ...wire }) => (
+				<OrgWire key={id} {...wire} marker={marker} />
+			))}
+			{anchors.map(({ id, ...anchor }) => (
+				<OrgAnchor key={id} {...anchor} />
+			))}
+		</svg>
+	);
+}
diff --git a/packages/ui/src/components/org-chart/org-chart.tsx b/packages/ui/src/components/org-chart/org-chart.tsx
index ff9d3406..92a52e37 100644
--- a/packages/ui/src/components/org-chart/org-chart.tsx
+++ b/packages/ui/src/components/org-chart/org-chart.tsx
@@ -4,16 +4,19 @@ import * as React from 'react';
 
 import { cn } from '../../lib/utils';
 import { TooltipProvider } from '../tooltip';
-import { CanvasSurface, CanvasWire, CanvasZoomControls, useCanvasViewport, WIRE_STROKE, WireDot, type WirePoint, type WireTone } from '../workspace-kit/canvas';
+import { CanvasSurface, CanvasZoomControls, useCanvasViewport } from '../workspace-kit/canvas';
 import { useReducedMotion } from '../workspace-kit/reduced-motion';
 import { useLatest } from '../workspace-kit/use-latest';
 import { computeLayout, descendantsOf, effectiveParent, indexEdges, managersOf, nodeDataFor, type OrgLayout, type PlacedPerson } from './layout';
 import { OrgChartDetails } from './org-chart-details';
 import { OrgChartMoveDialog } from './org-chart-move-dialog';
 import { OrgChartNode, type NodeHandlers } from './org-chart-node';
+import { useScene, type DragState } from './org-chart-scene';
+import { CHART_SPRING_STYLE } from './org-chart-spring';
 import { OrgChartEmpty, OrgChartLoading } from './org-chart-states';
 import type { OrgChartEdge, OrgChartNodeData } from './org-chart.types';
 import { personName } from './org-chart-utils';
+import { OrgChartWires } from './org-chart-wires';
 
 /** Container width at or below which cards switch to their compact size. */
 const COMPACT_MAX_WIDTH = 639;
@@ -62,8 +65,17 @@ interface OrgChartUncontrolledProps extends OrgChartPropsBase {
 
 export type OrgChartProps = OrgChartControlledProps | OrgChartUncontrolledProps;
 
-type DragState = { id: string; dx: number; dy: number; targetId: string | null; blocked: ReadonlySet<string> };
-type Press = { id: string; pointerId: number; x: number; y: number; moved: boolean; blocked: ReadonlySet<string> };
+/** A press on a card, from pointer down until it ends; `stopListening` removes its window listeners. */
+type Press = {
+	id: string;
+	pointerId: number;
+	x: number;
+	y: number;
+	moved: boolean;
+	blocked: ReadonlySet<string>;
+	targetId: string | null;
+	stopListening: () => void;
+};
 
 function edgesKey(edges: readonly OrgChartEdge[] | undefined) {
 	return edges?.map((edge) => `${edge.id}:${edge.parentId}:${edge.positionTitle ?? ''}:${edge.displayName ?? ''}:${edge.avatarUrl ?? ''}`).join('|') ?? '';
@@ -81,44 +93,6 @@ function sideNeighbour(layout: OrgLayout, person: PlacedPerson, direction: -1 |
 	return row[row.indexOf(person) + direction];
 }
 
-type Wire = { id: string; start: WirePoint; end: WirePoint; tone: WireTone; animated: boolean };
-
-function useWires(layout: OrgLayout, highlighted: ReadonlySet<string>, drag: DragState | null, animate: boolean) {
-	return React.useMemo(() => {
-		const offset = (id: string) => (drag?.id === id ? drag : { dx: 0, dy: 0 });
-		const top = (person: PlacedPerson): WirePoint => {
-			const { dx, dy } = offset(person.data.id);
-			return [person.x + person.width / 2 + dx, person.y + dy];
-		};
-		const bottom = (person: PlacedPerson): WirePoint => {
-			const { dx, dy } = offset(person.data.id);
-			return [person.x + person.width / 2 + dx, person.y + person.height + dy];
-		};
-		const wires: Wire[] = [];
-		const anchors = new Map<string, { point: WirePoint; live: boolean }>();
-		for (const person of layout.people) {
-			if (!person.parentId) continue;
-			const parent = layout.byId.get(person.parentId);
-			if (!parent) continue;
-			const id = person.data.id;
-			if (drag?.id === id && drag.targetId) continue;
-			const live = highlighted.has(id);
-			wires.push({ id, start: bottom(parent), end: top(person), tone: live ? 'live' : 'rest', animated: false });
-			const anchor = anchors.get(parent.data.id);
-			anchors.set(parent.data.id, { point: bottom(parent), live: live || Boolean(anchor?.live) });
-		}
-		const target = drag?.targetId ? layout.byId.get(drag.targetId) : undefined;
-		const dragged = drag ? layout.byId.get(drag.id) : undefined;
-		if (target && dragged) {
-			wires.push({ id: `preview-${dragged.data.id}`, start: bottom(target), end: top(dragged), tone: 'live', animated: animate });
-			anchors.set(target.data.id, { point: bottom(target), live: true });
-		}
-		// Live wires paint last so they sit above the rest.
-		wires.sort((a, b) => Number(a.tone === 'live') - Number(b.tone === 'live'));
-		return { wires, anchors: [...anchors.entries()] };
-	}, [animate, drag, highlighted, layout]);
-}
-
 function OrgChartInner(props: OrgChartProps) {
 	const {
 		className,
@@ -151,6 +125,8 @@ function OrgChartInner(props: OrgChartProps) {
 	const [moveId, setMoveId] = React.useState<string | null>(null);
 	const [drag, setDrag] = React.useState<DragState | null>(null);
 	const [revealRequest, setRevealRequest] = React.useState<{ id: string } | null>(null);
+	/** The person the chart was last changed through (a fold, a drop); their card holds still as the layout reflows. */
+	const [anchorId, setAnchorId] = React.useState<string | null>(null);
 	const [announcement, setAnnouncement] = React.useState('');
 	const press = React.useRef<Press | null>(null);
 	const animate = !useReducedMotion();
@@ -160,9 +136,18 @@ function OrgChartInner(props: OrgChartProps) {
 	const selected = selectedId ? layout.byId.get(selectedId) : undefined;
 	const tabStopId = activeId && layout.byId.has(activeId) ? activeId : (layout.people[0]?.data.id ?? null);
 
+	const highlighted = React.useMemo<ReadonlySet<string>>(() => {
+		if (!selected) return EMPTY_SET;
+		const id = selected.data.id;
+		return new Set([id, ...managersOf(index, id).slice(0, -1), ...selected.childIds]);
+	}, [index, selected]);
+	const scene = useScene(layout, anchorId, drag, highlighted, animate);
+	const { shift } = scene;
+
 	const viewport = useCanvasViewport(layout.width, {
 		fit: 'contain',
 		contentHeight: layout.height,
+		contentOrigin: shift,
 		minZoom: 0.3,
 		maxZoom: 1.5,
 		// Past this the names are unreadable; frame the top of the tree instead of all of it.
@@ -170,13 +155,6 @@ function OrgChartInner(props: OrgChartProps) {
 		inset: CANVAS_INSET,
 	});
 
-	const highlighted = React.useMemo<ReadonlySet<string>>(() => {
-		if (!selected) return EMPTY_SET;
-		const id = selected.data.id;
-		return new Set([id, ...managersOf(index, id).slice(0, -1), ...selected.childIds]);
-	}, [index, selected]);
-	const { wires, anchors } = useWires(layout, highlighted, drag, animate);
-
 	React.useEffect(() => {
 		const container = containerRef.current;
 		if (!container || typeof ResizeObserver === 'undefined') return;
@@ -187,15 +165,18 @@ function OrgChartInner(props: OrgChartProps) {
 		return () => observer.disconnect();
 	}, []);
 
-	// Ease a person into view once they are laid out (after unfolding their managers).
-	const { reveal, viewportRef } = viewport;
+	// Ease a person into view once they are laid out (after unfolding their managers), framing
+	// where their card will settle rather than where it is mid-spring.
+	const { reveal, viewportRef, hold } = viewport;
 	React.useEffect(() => {
-		if (!revealRequest) return;
-		const node = findNode(layerRef.current, revealRequest.id);
-		if (node) reveal(node);
-	}, [layout, reveal, revealRequest]);
+		const person = revealRequest ? layout.byId.get(revealRequest.id) : undefined;
+		if (person) reveal({ ...person, x: person.x + shift.x, y: person.y + shift.y });
+	}, [layout, reveal, revealRequest, shift]);
+
+	const latest = useLatest({ props, index, layout, shift, compact, view: viewport.view, isControlled });
 
-	const latest = useLatest({ props, index, layout, compact, view: viewport.view, drag, isControlled });
+	// A press still running when the chart unmounts must not leave window listeners behind.
+	React.useEffect(() => () => press.current?.stopListening(), []);
 
 	const select = React.useCallback(
 		(id: string | null, andReveal = false) => {
@@ -212,14 +193,21 @@ function OrgChartInner(props: OrgChartProps) {
 		[latest],
 	);
 
-	const toggle = React.useCallback((id: string) => {
-		setCollapsed((current) => {
-			const next = new Set(current);
-			if (next.has(id)) next.delete(id);
-			else next.add(id);
-			return next;
-		});
-	}, []);
+	// Folding a team keeps the person's card (and the pointer on its footer) where it is, and the view
+	// stops auto-fitting: the chart reflows around the card instead of the camera jumping.
+	const toggle = React.useCallback(
+		(id: string) => {
+			hold();
+			setAnchorId(id);
+			setCollapsed((current) => {
+				const next = new Set(current);
+				if (next.has(id)) next.delete(id);
+				else next.add(id);
+				return next;
+			});
+		},
+		[hold],
+	);
 
 	const reparent = React.useCallback(
 		async (childId: string, parentId: string) => {
@@ -234,6 +222,9 @@ function OrgChartInner(props: OrgChartProps) {
 			}
 			const preserve = { positionTitle: child.positionTitle };
 			const previousParentId = child.parentId;
+			// The new manager holds still while their team makes room.
+			hold();
+			setAnchorId(parentId);
 			setCollapsed((current) => (current.has(parentId) ? new Set([...current].filter((id) => id !== parentId)) : current));
 			if (!isControlled) setInternalEdges((current) => current.map((edge) => (edge.id === childId ? { ...edge, parentId } : edge)));
 			try {
@@ -249,7 +240,17 @@ function OrgChartInner(props: OrgChartProps) {
 				setAnnouncement(`${personName(child)}'s reporting line could not be changed.`);
 			}
 		},
-		[latest],
+		[hold, latest],
+	);
+
+	/** Brings a person's settled slot into view, even while their card is still springing there. */
+	const revealPerson = React.useCallback(
+		(id: string) => {
+			const { layout, shift } = latest.current;
+			const person = layout.byId.get(id);
+			if (person) reveal({ ...person, x: person.x + shift.x, y: person.y + shift.y });
+		},
+		[latest, reveal],
 	);
 
 	const focusPerson = React.useCallback(
@@ -258,9 +259,61 @@ function OrgChartInner(props: OrgChartProps) {
 			const node = findNode(layerRef.current, id);
 			if (!node) return;
 			node.focus({ preventScroll: true });
-			reveal(node);
+			revealPerson(id);
+		},
+		[revealPerson],
+	);
+
+	/** Ends a press: a click selects, a drop on a manager reparents, and a dragged card springs back to its slot. */
+	const endPress = React.useCallback(
+		(drop: boolean) => {
+			const current = press.current;
+			if (!current) return;
+			press.current = null;
+			current.stopListening();
+			if (!current.moved) {
+				if (drop) select(current.id);
+				return;
+			}
+			setDrag(null);
+			if (drop && current.targetId) void reparent(current.id, current.targetId);
+		},
+		[reparent, select],
+	);
+
+	/** Past the drag threshold the pressed card follows the pointer, and the manager under it becomes the target. */
+	const dragTo = React.useCallback(
+		(event: PointerEvent) => {
+			const current = press.current;
+			if (!current) return;
+			// No button held: the release happened somewhere we never heard about (a context menu, another
+			// window). End the drag instead of letting the card follow the cursor.
+			if ((event.buttons & 1) === 0) return endPress(false);
+			const { props, layout, shift, view, index } = latest.current;
+			if (props.editable === false) return;
+			if (!current.moved) {
+				if (Math.hypot(event.clientX - current.x, event.clientY - current.y) < DRAG_THRESHOLD) return;
+				current.moved = true;
+				current.blocked = new Set([current.id, ...descendantsOf(index, current.id)]);
+			}
+			const frame = viewportRef.current?.getBoundingClientRect();
+			if (!frame) return;
+			// Pointer in layout coordinates: canvas units, minus the shift that keeps the anchor still.
+			const x = (event.clientX - frame.left - view.x) / view.zoom - shift.x;
+			const y = (event.clientY - frame.top - view.y) / view.zoom - shift.y;
+			const hit = layout.people.find(
+				(person) => !current.blocked.has(person.data.id) && x >= person.x && x <= person.x + person.width && y >= person.y && y <= person.y + person.height,
+			);
+			current.targetId = hit && hit.data.id !== layout.byId.get(current.id)?.parentId ? hit.data.id : null;
+			setDrag({
+				id: current.id,
+				dx: (event.clientX - current.x) / view.zoom,
+				dy: (event.clientY - current.y) / view.zoom,
+				targetId: current.targetId,
+				blocked: current.blocked,
+			});
 		},
-		[reveal],
+		[endPress, latest, viewportRef],
 	);
 
 	const canEdit = Boolean(onEditNode);
@@ -289,44 +342,44 @@ function OrgChartInner(props: OrgChartProps) {
 	const handlers = React.useMemo<NodeHandlers>(
 		() => ({
 			pointerDown(id, event) {
-				if (event.button !== 0 || (event.target as Element).closest('button, a, [role="menuitem"], [role="menu"]')) return;
-				event.currentTarget.setPointerCapture(event.pointerId);
-				press.current = { id, pointerId: event.pointerId, x: event.clientX, y: event.clientY, moved: false, blocked: EMPTY_SET };
-			},
-			pointerMove(id, event) {
-				const current = press.current;
-				if (!current || current.pointerId !== event.pointerId) return;
-				const { props, layout, view, index } = latest.current;
-				if (props.editable === false) return;
-				const dx = event.clientX - current.x;
-				const dy = event.clientY - current.y;
-				if (!current.moved) {
-					if (Math.hypot(dx, dy) < DRAG_THRESHOLD) return;
-					current.moved = true;
-					current.blocked = new Set([id, ...descendantsOf(index, id)]);
+				// One press at a time: a second finger or button never steals the card from the first.
+				if (press.current || event.button !== 0 || (event.target as Element).closest('button, a, [role="menuitem"], [role="menu"]')) return;
+				const { pointerId } = event;
+				try {
+					event.currentTarget.setPointerCapture(pointerId);
+				} catch {
+					// Capture is only a nicety here; the window listeners below see the whole press.
 				}
-				const frame = viewportRef.current?.getBoundingClientRect();
-				if (!frame) return;
-				const x = (event.clientX - frame.left - view.x) / view.zoom;
-				const y = (event.clientY - frame.top - view.y) / view.zoom;
-				const hit = layout.people.find(
-					(person) => !current.blocked.has(person.data.id) && x >= person.x && x <= person.x + person.width && y >= person.y && y <= person.y + person.height,
+				// Listen on the window, not the card: capture is lost if the card is re-inserted into
+				// the DOM mid-drag (a host saving an earlier move), and the release must still end the press.
+				const listeners = new AbortController();
+				const options = { signal: listeners.signal };
+				const own = (handler: (event: PointerEvent) => void) => (event: PointerEvent) => {
+					if (event.pointerId === pointerId) handler(event);
+				};
+				window.addEventListener('pointermove', own(dragTo), options);
+				window.addEventListener('pointerup', own(() => endPress(true)), options);
+				window.addEventListener('pointercancel', own(() => endPress(false)), options);
+				window.addEventListener('blur', () => endPress(false), options);
+				window.addEventListener(
+					'keydown',
+					(keyEvent) => {
+						if (keyEvent.key !== 'Escape') return;
+						keyEvent.preventDefault();
+						endPress(false);
+					},
+					options,
 				);
-				const targetId = hit && hit.data.id !== layout.byId.get(id)?.parentId ? hit.data.id : null;
-				setDrag({ id, dx: dx / view.zoom, dy: dy / view.zoom, targetId, blocked: current.blocked });
-			},
-			pointerUp(id, event) {
-				const current = press.current;
-				if (!current || current.pointerId !== event.pointerId) return;
-				press.current = null;
-				const targetId = latest.current.drag?.targetId;
-				setDrag(null);
-				if (!current.moved) select(id);
-				else if (targetId) void reparent(id, targetId);
-			},
-			pointerCancel() {
-				press.current = null;
-				setDrag(null);
+				press.current = {
+					id,
+					pointerId,
+					x: event.clientX,
+					y: event.clientY,
+					moved: false,
+					blocked: EMPTY_SET,
+					targetId: null,
+					stopListening: () => listeners.abort(),
+				};
 			},
 			keyDown(id, event) {
 				if (event.target !== event.currentTarget) return;
@@ -357,10 +410,8 @@ function OrgChartInner(props: OrgChartProps) {
 						event.preventDefault();
 						return select(id);
 					case 'Escape':
-						if (latest.current.drag) {
-							press.current = null;
-							setDrag(null);
-						} else select(null);
+						// During a press, Escape cancels the drag (the window listener); otherwise it clears the selection.
+						if (!press.current) select(null);
 						return;
 				}
 			},
@@ -368,14 +419,14 @@ function OrgChartInner(props: OrgChartProps) {
 				if (event.target !== event.currentTarget) return;
 				setActiveId(id);
 				// Keyboard focus (Tab into the tree) brings the card into view; a press on it does not.
-				if (!press.current) reveal(event.currentTarget);
+				if (!press.current) revealPerson(id);
 			},
 			toggle,
 			openMove: setMoveId,
 			edit,
 			remove,
 		}),
-		[edit, focusPerson, latest, remove, reparent, reveal, select, toggle, viewportRef],
+		[dragTo, edit, endPress, focusPerson, latest, remove, revealPerson, select, toggle],
 	);
 
 	const manager = selected?.parentId ? index.edges.get(selected.parentId) : undefined;
@@ -386,9 +437,45 @@ function OrgChartInner(props: OrgChartProps) {
 			})
 		: [];
 
+	// Built once per change to the chart itself, so a pan (which re-renders this component every
+	// frame) never walks hundreds of cards.
+	const content = React.useMemo(
+		() => (
+			<>
+				<OrgChartWires wires={scene.wires} anchors={scene.anchors} width={layout.width} height={layout.height} />
+				<div role="tree" aria-label="Reporting lines">
+					{scene.cards.map(({ person, x, y, enterFrom, leaving }) => {
+						const id = person.data.id;
+						const dragged = drag?.id === id ? drag : undefined;
+						const target = dragged?.targetId ? layout.byId.get(dragged.targetId) : undefined;
+						return (
+							<OrgChartNode
+								key={id}
+								person={person}
+								x={x}
+								y={y}
+								enterFrom={enterFrom}
+								leaving={leaving}
+								selected={id === selectedId}
+								tabStop={id === tabStopId}
+								editable={editable}
+								drag={dragged ? { dx: dragged.dx, dy: dragged.dy, overTarget: Boolean(target) } : null}
+								dropTarget={drag?.targetId === id}
+								blocked={Boolean(drag?.blocked.has(id))}
+								dropHint={target ? `Reports to ${personName(target.data)}` : undefined}
+								handlers={handlers}
+							/>
+						);
+					})}
+				</div>
+			</>
+		),
+		[drag, editable, handlers, layout, scene, selectedId, tabStopId],
+	);
+
 	// One container for every state, so the width observer keeps watching it when data arrives.
 	return (
-		<div ref={containerRef} className={cn('@container/chart relative h-[600px]', className)}>
+		<div ref={containerRef} style={CHART_SPRING_STYLE} className={cn('@container/chart relative h-[600px]', className)}>
 			{isLoading ? (
 				<OrgChartLoading />
 			) : edges.length === 0 ? (
@@ -425,43 +512,7 @@ function OrgChartInner(props: OrgChartProps) {
 							</>
 						}
 					>
-						<svg aria-hidden="true" className="pointer-events-none absolute top-0 left-0 overflow-visible" width={Math.max(1, layout.width)} height={Math.max(1, layout.height)}>
-							{wires.map((wire) => (
-								<CanvasWire
-									key={wire.id}
-									start={wire.start}
-									end={wire.end}
-									tone={wire.tone}
-									axis="vertical"
-									animated={wire.animated}
-									startDot={false}
-									glide={animate && !drag}
-								/>
-							))}
-							{anchors.map(([id, anchor]) => (
-								<WireDot key={id} at={anchor.point} glide={animate && !drag} stroke={WIRE_STROKE[anchor.live ? 'live' : 'rest']} />
-							))}
-						</svg>
-						<div role="tree" aria-label="Reporting lines">
-							{layout.people.map((person) => {
-								const id = person.data.id;
-								const target = drag?.id === id && drag.targetId ? layout.byId.get(drag.targetId) : undefined;
-								return (
-									<OrgChartNode
-										key={id}
-										person={person}
-										selected={id === selectedId}
-										tabStop={id === tabStopId}
-										editable={editable}
-										dragOffset={drag?.id === id ? drag : null}
-										dropTarget={drag?.targetId === id}
-										blocked={Boolean(drag?.blocked.has(id))}
-										dropHint={target ? `Reports to ${personName(target.data)}` : undefined}
-										handlers={handlers}
-									/>
-								);
-							})}
-						</div>
+						{content}
 					</CanvasSurface>
 					<p role="status" aria-live="polite" className="sr-only">
 						{announcement}
diff --git a/packages/ui/src/components/workspace-kit/canvas.tsx b/packages/ui/src/components/workspace-kit/canvas.tsx
index 4a25eba8..fed004c3 100644
--- a/packages/ui/src/components/workspace-kit/canvas.tsx
+++ b/packages/ui/src/components/workspace-kit/canvas.tsx
@@ -8,6 +8,8 @@ import { focusRingClass, pressClass, SurfaceBody, surfaceInsetClass, TooltipIcon
 import { prefersReducedMotion } from './reduced-motion';
 
 export type Viewport = { x: number; y: number; zoom: number };
+/** A rectangle in canvas units, e.g. where a node will settle. */
+export type CanvasBox = { x: number; y: number; width: number; height: number };
 
 type CanvasInset = { side: number; top: number; bottom: number };
 
@@ -19,6 +21,8 @@ export type CanvasViewportOptions = {
 	fit?: 'width' | 'contain';
 	/** Content height in canvas units; `contain` needs it. */
 	contentHeight?: number;
+	/** Top-left corner of the content in canvas units, when it doesn't start at the origin. */
+	contentOrigin?: { x: number; y: number };
 	minZoom?: number;
 	maxZoom?: number;
 	/**
@@ -59,6 +63,8 @@ function zoomAround(view: Viewport, zoom: number, cx: number, cy: number): Viewp
 export function useCanvasViewport(contentWidth: number, options: CanvasViewportOptions = {}) {
 	const { fit: fitMode = 'width', contentHeight = 0, minZoom = 0.5, maxZoom = 2 } = options;
 	const minFitZoom = options.minFitZoom ?? minZoom;
+	const originX = options.contentOrigin?.x ?? 0;
+	const originY = options.contentOrigin?.y ?? 0;
 	const inset = options.inset ?? DEFAULT_INSET;
 	const { side, top, bottom } = inset;
 	const viewportRef = React.useRef<HTMLDivElement | null>(null);
@@ -106,32 +112,53 @@ export function useCanvasViewport(contentWidth: number, options: CanvasViewportO
 		const availableWidth = width - side * 2;
 		if (fitMode === 'width') {
 			const zoom = Math.max(minZoom, Math.min(1, Math.floor((availableWidth / contentWidth) * 20) / 20));
-			return { x: Math.max(side, Math.round((width - contentWidth * zoom) / 2)), y: top, zoom };
+			return { x: Math.max(side, Math.round((width - contentWidth * zoom) / 2)) - originX * zoom, y: top - originY * zoom, zoom };
 		}
 		const availableHeight = viewport.clientHeight - top - bottom;
 		const fitZoom = Math.min(1, availableWidth / contentWidth, contentHeight ? availableHeight / contentHeight : 1);
 		const zoom = Math.max(minFitZoom, Math.floor(fitZoom * 20) / 20);
 		return {
-			x: Math.round((width - contentWidth * zoom) / 2),
-			y: Math.round(top + Math.max(0, (availableHeight - contentHeight * zoom) / 2)),
+			x: Math.round((width - contentWidth * zoom) / 2 - originX * zoom),
+			y: Math.round(top + Math.max(0, (availableHeight - contentHeight * zoom) / 2) - originY * zoom),
 			zoom,
 		};
-	}, [bottom, contentHeight, contentWidth, fitMode, minFitZoom, minZoom, side, top]);
+	}, [bottom, contentHeight, contentWidth, fitMode, minFitZoom, minZoom, originX, originY, side, top]);
 
-	// Keep fitting as the canvas resizes (a panel opening, a mobile tab
-	// revealing it) until the person takes over.
-	React.useLayoutEffect(() => {
-		if (!element) return;
-		const refit = () => {
+	// Keep fitting until the person takes over: at once as the canvas resizes (a panel opening, a
+	// mobile tab revealing it), and eased when the content changes (data arriving, say).
+	const refit = React.useCallback(
+		(ease: keyof typeof EASE | null) => {
 			if (touched.current) return;
 			const next = fitted();
-			if (next) place(() => next, null);
-		};
-		refit();
-		const observer = new ResizeObserver(refit);
+			if (next) place(() => next, ease);
+		},
+		[fitted, place],
+	);
+	const latestRefit = React.useRef(refit);
+	const fittedElement = React.useRef<HTMLDivElement | null>(null);
+	React.useLayoutEffect(() => {
+		latestRefit.current = refit;
+		// A new canvas fits at once; new content eases into its new frame.
+		if (element) refit(fittedElement.current === element ? 'reveal' : null);
+		fittedElement.current = element;
+	}, [element, refit]);
+	React.useLayoutEffect(() => {
+		if (!element) return;
+		let size = [element.clientWidth, element.clientHeight];
+		const observer = new ResizeObserver(() => {
+			// The first callback reports the size we already have; skipping it keeps an eased refit running.
+			if (size[0] === element.clientWidth && size[1] === element.clientHeight) return;
+			size = [element.clientWidth, element.clientHeight];
+			latestRefit.current(null);
+		});
 		observer.observe(element);
 		return () => observer.disconnect();
-	}, [element, fitted, place]);
+	}, [element]);
+
+	/** Keeps the current view and stops fitting, as a pan would; for edits the person makes to the content. */
+	const hold = React.useCallback(() => {
+		touched.current = true;
+	}, []);
 
 	/** Frames the content again and resumes fitting on resize. */
 	const fit = React.useCallback(() => {
@@ -150,13 +177,25 @@ export function useCanvasViewport(contentWidth: number, options: CanvasViewportO
 		[clampZoom, move],
 	);
 
-	/** Eases the view just enough to bring `node` inside the canvas margins. */
+	/**
+	 * Eases the view just enough to bring a node inside the canvas margins.
+	 * Pass a `CanvasBox` for a node that is still moving to where it will settle.
+	 */
 	const reveal = React.useCallback(
-		(node: Element) => {
+		(target: Element | CanvasBox) => {
 			const viewport = viewportRef.current;
 			if (!viewport) return;
 			const frame = viewport.getBoundingClientRect();
-			const rect = node.getBoundingClientRect();
+			const { x, y, zoom } = viewRef.current;
+			const rect =
+				target instanceof Element
+					? target.getBoundingClientRect()
+					: {
+							left: frame.left + x + target.x * zoom,
+							top: frame.top + y + target.y * zoom,
+							right: frame.left + x + (target.x + target.width) * zoom,
+							bottom: frame.top + y + (target.y + target.height) * zoom,
+						};
 			let dx = 0;
 			let dy = 0;
 			if (rect.right > frame.right - side) dx = frame.right - side - rect.right;
@@ -209,6 +248,11 @@ export function useCanvasViewport(contentWidth: number, options: CanvasViewportO
 		onPointerMove(event: React.PointerEvent<HTMLDivElement>) {
 			const start = gesture.current;
 			if (!start || !pointers.current.has(event.pointerId)) return;
+			// No button held: the release happened somewhere we never heard about (a context menu, another window).
+			if ((event.buttons & 1) === 0) {
+				handlers.onPointerUp(event);
+				return;
+			}
 			pointers.current.set(event.pointerId, { x: event.clientX, y: event.clientY });
 			const points = [...pointers.current.values()];
 			const x = points.reduce((sum, point) => sum + point.x, 0) / points.length;
@@ -260,7 +304,7 @@ export function useCanvasViewport(contentWidth: number, options: CanvasViewportO
 		view,
 		transition,
 		dragging,
-		handlers: { ...handlers, onPointerCancel: handlers.onPointerUp },
+		handlers: { ...handlers, onPointerCancel: handlers.onPointerUp, onLostPointerCapture: handlers.onPointerUp },
 		zoomTo,
 		zoomIn: () => zoomTo(view.zoom + ZOOM_STEP),
 		zoomOut: () => zoomTo(view.zoom - ZOOM_STEP),
@@ -268,6 +312,7 @@ export function useCanvasViewport(contentWidth: number, options: CanvasViewportO
 		canZoomOut: view.zoom > minZoom,
 		fit,
 		reveal,
+		hold,
 		/** True when the last press panned; use it to ignore the click that ends a drag. */
 		wasPanned: () => panned.current,
 	};
diff --git a/packages/ui/src/stories/OrgChart.stories.tsx b/packages/ui/src/stories/OrgChart.stories.tsx
index 78ae35dc..f12e02a0 100644
--- a/packages/ui/src/stories/OrgChart.stories.tsx
+++ b/packages/ui/src/stories/OrgChart.stories.tsx
@@ -67,6 +67,29 @@ function largeOrg(): OrgChartEdge[] {
 const LARGE = largeOrg();
 const LARGE_FOLDED = LARGE.filter((edge) => edge.id.split('-').length === 3).map((edge) => edge.id);
 
+/** 391 people with uneven team sizes, all unfolded: the worst case for folding, unfolding, and dragging. */
+function stressOrg(): OrgChartEdge[] {
+	const edges = [person('s', null, 'Rowan Ellis', 'Chief Executive Officer')];
+	const levels = [
+		{ count: 6, title: 'Vice President' },
+		{ count: 4, title: 'Director' },
+		{ count: 3, title: 'Manager' },
+		{ count: 4, title: 'Engineer' },
+	];
+	const grow = (parentId: string, depth: number) => {
+		const level = levels[depth];
+		if (!level) return;
+		for (let index = 0; index < level.count; index += 1) {
+			const id = `${parentId}.${index + 1}`;
+			edges.push(person(id, parentId, `Person ${id.slice(2)}`, level.title));
+			grow(id, depth + 1);
+		}
+	};
+	grow('s', 0);
+	return edges;
+}
+const STRESS = stressOrg();
+
 function Frame({ children, width = 960, height = 620 }: { children: React.ReactNode; width?: number; height?: number }) {
 	return <div style={{ width, height, maxWidth: '100%' }}>{children}</div>;
 }
@@ -187,6 +210,31 @@ export const LargeOrganization: Story = {
 	),
 };
 
+/**
+ * 391 people, all unfolded, with a host that saves each move after 300ms.
+ * Fold and unfold whole divisions, and drag again while a save is in flight.
+ */
+export const StressTest: Story = {
+	render: () => {
+		const [edges, setEdges] = React.useState(STRESS);
+		const { entries, log } = useHostLog();
+		return (
+			<Frame width={1180} height={720}>
+				<OrgChart
+					className="h-full"
+					edges={edges}
+					onReparent={async (child, parent) => {
+						await new Promise((resolve) => setTimeout(resolve, 300));
+						setEdges((current) => current.map((edge) => (edge.id === child ? { ...edge, parentId: parent } : edge)));
+						log(`onReparent(${child} → ${parent})`);
+					}}
+				/>
+				<HostLog entries={entries} />
+			</Frame>
+		);
+	},
+};
+
 /** Below 640px the cards switch to their compact size and the details panel docks to the bottom. */
 export const Compact: Story = {
 	render: () => (