diff --git a/src/components/Scene.svelte b/src/components/Scene.svelte
index 9065cea28..86983ecbb 100644
--- a/src/components/Scene.svelte
+++ b/src/components/Scene.svelte
@@ -72,6 +72,8 @@
 	import { measureMode, measureClick, measureHoverAt } from '$lib/measure';
 	import { pinsGroup, openAnnotation, showNotePins } from '$lib/annotationsHandler';
 	import { setParticleRoot } from '$lib/particleRuntime';
+	import { setBackgroundRoot, tickBackgroundLayer } from '$lib/backgroundLayer'; // 65 M2
+	import { tickFluidLayer } from '$lib/fluidLayer'; // 65 M6: smoke / ink (a look entry; the XR panel)
 	import WaterLayer from './water/WaterLayer.svelte';
 	import { registerEditResumeSources } from '$lib/editResume';
 	import { sendPing } from '$lib/ping';
@@ -426,6 +428,8 @@
 		tickAnimatedMixers(); // imported clips run on the synced clock
 		tickPackBehaviors(); // 33 P2: doors/lids/levers pose from their shared state (rest in Edit)
 		tickSim($objectsGroup, camera.current, renderer, performance.now()); // 36-sim (after mixers: jiggle rides the posed bones)
+		tickBackgroundLayer(camera.current, renderer, performance.now()); // 65 M2: the shader background (inert without one)
+		tickFluidLayer(camera.current, renderer, performance.now()); // 65 M6: steps the XR smoke panel (the screen effect steps itself)
 		tickAnimationPreview(); // Animation window: local transform preview (not synced)
 		tickSequences(); // 48 S2: shots / clips / audio / events of running sequences
 		tickMeshEdit(); // vertex handles follow the object if it moves (119)
@@ -1830,6 +1834,9 @@
 	     sceneObjects — they'd leak into GLTF sync). oncreate passes the ref
 	     DIRECTLY (the { ref } destructure trap, N1). -->
 	<T.Group name="particle-root" oncreate={(ref: any) => setParticleRoot(ref)} />
+	<!-- 65 M2: the shader BACKGROUND layer's meshes (screen / VR sphere / plane overlay) — scene
+	     root, never in sceneObjects, so nothing under it is saved or sent -->
+	<T.Group name="background-root" oncreate={(ref: any) => setBackgroundRoot(ref)} />
 	<!-- 36-water: water surfaces/bodies/bubbles (scene root, local) + the render hooks -->
 	<WaterLayer />
 
diff --git a/src/components/editors/ShaderEditor.svelte b/src/components/editors/ShaderEditor.svelte
index f6199f18f..ccede8631 100644
--- a/src/components/editors/ShaderEditor.svelte
+++ b/src/components/editors/ShaderEditor.svelte
@@ -40,7 +40,11 @@
 		shaderRefusalReason
 	} from '$lib/shaderGraph';
 	import { beginShaderGesture, endShaderGesture } from '$lib/shaderSync';
-	import { shaderNodeDefs, shaderNodeDef, SURFACE_NODE, POST_OUTPUT_NODE } from '$lib/shaderCatalog';
+	import { shaderNodeDefs, shaderNodeDef, SURFACE_NODE, POST_OUTPUT_NODE, BACKGROUND_OUTPUT_NODE, stageForDomain } from '$lib/shaderCatalog';
+	// 65 M2: the BACKGROUND domain — one document per scene, so its scope is fixed
+	import { BACKGROUND_KEY, removeBackground } from '$lib/backgroundLayer';
+	import { backgroundPresets, loadBackgroundPresets, applyBackgroundPreset } from '$lib/backgroundPresets';
+	import { BUILTIN_PRESET_KEY } from '$lib/backgroundPresetsCore';
 	// P4: the POST domain. The editor is one surface for two domains — same cards, same
 	// palette, same pane menu — because a post graph IS a shader graph; what differs is
 	// which nodes mean anything, which terminal node the graph ends at, and (since a post
@@ -100,7 +104,8 @@
 			(def) =>
 				def.key !== SURFACE_NODE &&
 				def.key !== POST_OUTPUT_NODE &&
-				(!def.stages || def.stages.includes(which === 'post' ? 'post' : 'fragment'))
+				def.key !== BACKGROUND_OUTPUT_NODE &&
+				(!def.stages || def.stages.includes(/** @type {any} */ (stageForDomain(which))))
 		);
 	const catalog = $derived(catalogFor($shaderDomain));
 	const groups = $derived([...new Set(catalog.map((def) => def.group))]);
@@ -111,6 +116,10 @@
 	// ---- scope: selection-driven in SURFACE, picked in POST ---------------------
 	const selectedUuid = $derived($selectedObjects?.length === 1 ? $selectedObjects[0] : null);
 	const isPost = $derived($shaderDomain === 'post');
+	const isBg = $derived($shaderDomain === 'background');
+	$effect(() => {
+		if (isBg) void loadBackgroundPresets();
+	});
 	/** every post graph, re-derived off the store so a new one appears at once */
 	/** @param {any} _poke */
 	const graphsOf = (_poke) => postGraphKeys();
@@ -121,17 +130,21 @@
 			? $activePostGraph
 			: (postGraphs[0]?.key ?? '')
 	);
-	const scope = $derived(isPost ? postScope : (selectedUuid ?? SCENE_GRAPH_KEY));
+	const scope = $derived(isBg ? BACKGROUND_KEY : isPost ? postScope : (selectedUuid ?? SCENE_GRAPH_KEY));
 	/** the navigator's list, split by domain (see its markup below) */
 	const treeDocuments = $derived(
 		Object.fromEntries(
-			Object.entries($shaderGraphs).filter(([key]) => key.startsWith('post:') === isPost)
+			Object.entries($shaderGraphs).filter(([key]) =>
+				isBg ? key === BACKGROUND_KEY : key !== BACKGROUND_KEY && key.startsWith('post:') === isPost
+			)
 		)
 	);
 	const doc = $derived(scope ? ($shaderGraphs[scope] ?? null) : null);
 	const errors = $derived(scope ? ($shaderErrors[scope] ?? []) : []);
 	const ownerName = $derived(
-		isPost
+		isBg
+			? 'The background'
+			: isPost
 			? scope
 				? postGraphName(scope)
 				: 'No post effect'
@@ -140,7 +153,9 @@
 				: $objectsGroup?.getObjectByProperty('uuid', scope)?.name || 'This object'
 	);
 	const scopeLabel = $derived(
-		isPost
+		isBg
+			? 'Scene background'
+			: isPost
 			? ownerName + ' — post effect'
 			: scope === SCENE_GRAPH_KEY
 				? 'Scene default material'
@@ -280,6 +295,10 @@
 
 	// ---- actions ---------------------------------------------------------------
 	function createGraph() {
+		if (isBg) {
+			void applyBackgroundPreset(BUILTIN_PRESET_KEY);
+			return;
+		}
 		if (isPost) {
 			// in the post half "create" MINTS a document (there is no object to attach one
 			// to), and the new one becomes the scope so you are looking at what you made
@@ -311,6 +330,10 @@
 	}
 
 	function removeGraph() {
+		if (isBg) {
+			removeBackground();
+			return;
+		}
 		if (isPost) {
 			if (scope) deletePostGraph(scope);
 			activePostGraph.set(null);
@@ -425,7 +448,7 @@
 				{ label: 'Disconnect all', action: () => disconnectNode(id) },
 				// the Surface output is the graph's terminal — there is exactly one, and a
 				// graph without it cannot compile at all
-				...(node.type === SURFACE_NODE
+				...(node.type === SURFACE_NODE || node.type === BACKGROUND_OUTPUT_NODE
 					? []
 					: [{ label: 'Delete node', danger: true, action: () => deleteNode(id) }])
 			]
@@ -653,7 +676,7 @@
 		<button
 			class="tp-seg-btn"
 			id="shader-domain-surface"
-			aria-pressed={!isPost}
+			aria-pressed={!isPost && !isBg}
 			title="Materials: this object's, or the scene's default"
 			onclick={() => shaderDomain.set('surface')}>Surface</button
 		>
@@ -664,6 +687,13 @@
 			title="Post effects: a fragment over the finished frame, added to the scene look"
 			onclick={() => shaderDomain.set('post')}>Post</button
 		>
+		<button
+			class="tp-seg-btn"
+			id="shader-domain-background"
+			aria-pressed={isBg}
+			title="Background: a moving shader behind the scene (Configure Scene ▸ Background)"
+			onclick={() => shaderDomain.set('background')}>Background</button
+		>
 	</div>
 	{#if isPost && postGraphs.length}
 		<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
@@ -712,8 +742,8 @@
 					<GraphTree
 						kind="shader"
 						documents={treeDocuments}
-						sceneKey={SCENE_GRAPH_KEY}
-						label={isPost ? 'Post effects' : 'Shaders'}
+						sceneKey={isBg ? BACKGROUND_KEY : SCENE_GRAPH_KEY}
+						label={isBg ? 'Background' : isPost ? 'Post effects' : 'Shaders'}
 						paneHeight={paneH}
 					/>
 					<div class="shader-side-scroll" use:minimalScroll>
@@ -781,16 +811,29 @@
 					<!-- the `#flow-empty-state` shape: ONE centred call to action -->
 					<div id="shader-empty-state" class="shader-empty">
 						<p class="text-sm text-text-2">
-							{#if isPost}
+							{#if isBg}
+								The scene has no background yet
+							{:else if isPost}
 								No post effect to edit yet
 							{:else}
 								<span class="font-semibold text-text">{ownerName}</span> has no shader yet
 							{/if}
 						</p>
 						<button id="shader-create-btn" class="shader-create" onclick={createGraph}>
-							{isPost ? 'Create post effect' : 'Create shader'}
+							{isBg ? 'Create background' : isPost ? 'Create post effect' : 'Create shader'}
 						</button>
-						{#if isPost}
+						{#if isBg}
+							<div class="shader-preset-row" id="shader-bg-presets">
+								{#each $backgroundPresets.presets as preset (preset.key)}
+									<button class="shader-preset" title={preset.hint} onclick={() => applyBackgroundPreset(preset.key)}
+										>{preset.label}</button
+									>
+								{/each}
+							</div>
+							<p class="text-[11px] text-text-faint">
+								A background draws behind the scene, or on a plane — Configure Scene ▸ Background
+							</p>
+						{:else if isPost}
 							<!-- the presets are the fastest way to see what the domain can do, and each
 							     one is an ordinary graph you can then take apart -->
 							<div class="shader-preset-row">
@@ -1002,6 +1045,8 @@
 									{doc.nodes.length} nodes · {doc.edges.length} wires · {doc.backend}
 								</p>
 								<p class="shader-hint">Replicates to peers · saved with the scene</p>
+							{:else if isBg}
+								<p class="shader-hint">Pick a preset to start a background, then take it apart here.</p>
 							{:else if isPost}
 								<p class="shader-hint">
 									Create a post effect, then add it to a look in Configure Scene ▸
diff --git a/src/components/fx/ParticleMotionRows.svelte b/src/components/fx/ParticleMotionRows.svelte
index 6e002b001..ce8a71e18 100644
--- a/src/components/fx/ParticleMotionRows.svelte
+++ b/src/components/fx/ParticleMotionRows.svelte
@@ -20,7 +20,7 @@
 	];
 </script>
 
-<div class="pm" data-keywords="particles render stretch trail ribbon streak sparks velocity">
+<div class="pm" data-keywords="particles render stretch trail ribbon streak sparks velocity flow field curl noise swirl">
 	<!-- four options do not fit the PropRow middle column (measured: "SpritesStretch" ran
 	     together and "Ribbon" clipped), so the control takes the whole row under its label -->
 	<div class="pm-mode">
@@ -45,6 +45,16 @@
 			In Local space the ribbon rides the object. Set Space to World for a trail behind it.
 		</p>
 	{/if}
+	<!-- 65 M6: the curl-noise flow field (0 = off). Divergence-free, so particles swirl like
+	     smoke or ink without clumping; the same on every peer (a function of the synced clock) -->
+	<PropRow label="Flow field" slider min={0} max={3} step={0.05} id="particles-flow" value={p.flow ?? 0}
+		title="Swirls the particles through a smooth curl-noise field (0 = off)" onchange={(v) => set({ flow: v })} />
+	{#if (p.flow ?? 0) > 0}
+		<PropRow label="Swirl size" slider min={0.1} max={3} step={0.05} id="particles-flow-scale" value={p.flowScale ?? 0.6}
+			title="The field's frequency: higher makes tighter swirls" onchange={(v) => set({ flowScale: v })} />
+		<PropRow label="Field speed" slider min={0} max={2} step={0.05} id="particles-flow-speed" value={p.flowSpeed ?? 0.3}
+			title="How fast the field itself changes (0 = a fixed field)" onchange={(v) => set({ flowSpeed: v })} />
+	{/if}
 	{#if world}
 		<PropRow label="Inherit velocity" slider min={0} max={1} step={0.05} value={p.inherit ?? 0}
 			title="How much of the emitter's own speed a particle keeps when it is born" onchange={(v) => set({ inherit: v })} />
diff --git a/src/components/menu/Inspector.svelte b/src/components/menu/Inspector.svelte
index e37d9de07..46ceda7bc 100644
--- a/src/components/menu/Inspector.svelte
+++ b/src/components/menu/Inspector.svelte
@@ -26,6 +26,7 @@
 	import MenuButton from './inspector/MenuButton.svelte';
 	import InsToggle from './inspector/InsToggle.svelte';
 	import SceneQualitySection from './inspector/SceneQualitySection.svelte'; // 42 I12
+	import BackgroundLayerSection from './inspector/BackgroundLayerSection.svelte'; // 65 M2
 	import ArrangeSection from './inspector/ArrangeSection.svelte'; // 47 M2
 	import TerrainPaintSection from './inspector/TerrainPaintSection.svelte'; // 47 T1/T2
 	import MeasureSection from './inspector/MeasureSection.svelte'; // 48 B2
@@ -2122,6 +2123,7 @@
 					Open the shader editor
 				</button>
 			</Section>
+			<BackgroundLayerSection />
 
 			<!-- 16-P4: everything about the VIEWPORT camera in one place (it used to be a
 			     "Camera lens" sub-label buried in View): lens, clip planes, orbit feel,
diff --git a/src/components/menu/inspector/BackgroundLayerSection.svelte b/src/components/menu/inspector/BackgroundLayerSection.svelte
new file mode 100644
index 000000000..6c6d7a4aa
--- /dev/null
+++ b/src/components/menu/inspector/BackgroundLayerSection.svelte
@@ -0,0 +1,127 @@
+<script>
+	// 65 M2 — Configure Scene ▸ Background: the fluid shader background layer. Scene data like
+	// the look above it (the document is `shaderGraphs['background']`, so it replicates, saves
+	// and undoes with the scene); what stays local is the pointer that moves it and View ▸
+	// Overrides ▸ Scene shaders, which switches it off on this screen only.
+	import Section from '../../ui/Section.svelte';
+	import PropRow from '../../ui/PropRow.svelte';
+	import Segmented from '../../ui/Segmented.svelte';
+	import ThemedSelect from '../../ui/ThemedSelect.svelte';
+	import InsToggle from './InsToggle.svelte';
+	import { onMount } from 'svelte';
+	import { shaderGraphs, shaderErrors, openShaderEditor } from '$lib/shaderGraph';
+	import { shaderDomain } from '$lib/postGraphs';
+	import { selectedObjects, objectsGroup } from '../../../stores/sceneStore';
+	import { backgroundPresets, loadBackgroundPresets, applyBackgroundPreset } from '$lib/backgroundPresets';
+	import { BACKGROUND_KEY, backgroundState, setBackgroundLayer, removeBackground } from '$lib/backgroundLayer';
+	import { normalizeLayer } from '$lib/backgroundLayerCore';
+
+	onMount(() => {
+		void loadBackgroundPresets();
+	});
+
+	const MODES = [
+		{ value: 'screen', label: 'Behind scene', title: 'Full screen behind everything (a big sphere around you in VR)' },
+		{ value: 'plane', label: 'On a plane', title: 'Drawn on the surface of a plane you pick in the scene' },
+		{ value: 'off', label: 'Off', title: 'Kept in the scene but not drawn' }
+	];
+
+	const doc = $derived(/** @type {any} */ ($shaderGraphs[BACKGROUND_KEY] ?? null));
+	const layer = $derived(normalizeLayer(doc?.layer));
+	const errors = $derived($shaderErrors[BACKGROUND_KEY] ?? []);
+	const items = $derived($backgroundPresets.presets.map((p) => ({ value: p.key, name: p.label })));
+	const hint = $derived($backgroundPresets.presets.find((p) => p.key === doc?.preset)?.hint ?? '');
+	/** @param {any} _poke */
+	const targetName = (_poke) =>
+		layer.target ? $objectsGroup?.getObjectByProperty?.('uuid', layer.target)?.name || 'a missing object' : '';
+	const target = $derived(targetName($objectsGroup));
+	const pickable = $derived($selectedObjects?.length === 1);
+	let busy = $state(false);
+	let failure = $state('');
+
+	/** @param {string} key */
+	async function pick(key) {
+		busy = true;
+		failure = '';
+		const result = await applyBackgroundPreset(key);
+		busy = false;
+		if (!result.ok) failure = result.error ?? 'That preset could not be applied.';
+	}
+
+	function edit() {
+		shaderDomain.set('background');
+		void openShaderEditor();
+	}
+</script>
+
+<Section variant="panel" label="Background" badge="Shared" aliases={['Shader background', 'Fluid background']}>
+	<p class="mb-1 text-[length:var(--fs-badge)] text-text-muted">
+		A moving shader drawn behind the scene or on a plane — everyone sees it, and it drifts in
+		step for everyone. Your own pointer moves your own view of it.
+	</p>
+	<PropRow label="Preset" valueBox={false} id="background-preset-row">
+		{#snippet control()}
+			<ThemedSelect
+				id="background-preset"
+				{items}
+				value={doc?.preset ?? undefined}
+				placeholder={doc ? 'Custom graph' : 'Choose a background'}
+				disabled={busy}
+				onchange={(v) => pick(v)}
+			/>
+		{/snippet}
+	</PropRow>
+	{#if hint}
+		<p id="background-preset-hint" class="mb-1 text-[length:var(--fs-badge)] italic text-text-muted">{hint}</p>
+	{/if}
+	{#if $backgroundPresets.status === 'offline'}
+		<p id="background-presets-offline" class="mb-1 text-[length:var(--fs-badge)] text-text-muted">
+			{$backgroundPresets.error} The built-in preset still works.
+			<button class="underline" onclick={() => loadBackgroundPresets({ force: true })}>Retry</button>
+		</p>
+	{/if}
+	{#if failure}
+		<p id="background-failure" class="mb-1 text-[length:var(--fs-badge)] text-warn-text" role="alert">{failure}</p>
+	{/if}
+	{#if doc}
+		<PropRow label="Where" valueBox={false} id="background-mode-row">
+			{#snippet control()}
+				<Segmented id="background-mode" label="Where the background draws" full options={MODES} value={layer.mode} onchange={(v) => setBackgroundLayer({ mode: /** @type {any} */ (v) })} />
+			{/snippet}
+		</PropRow>
+		{#if layer.mode === 'plane'}
+			<p id="background-target" class="mb-1 text-[length:var(--fs-badge)] text-text-muted">
+				{target ? 'Drawn on ' + target + '.' : 'Pick a plane: select it, then press Use selected.'}
+			</p>
+			<button
+				id="background-use-selected"
+				class="ui-chip mb-1 w-full justify-center"
+				disabled={!pickable}
+				title={pickable ? 'Draw the background on the selected object' : 'Select one object first'}
+				onclick={() => setBackgroundLayer({ target: $selectedObjects[0] })}
+			>
+				Use selected
+			</button>
+		{/if}
+		<InsToggle id="background-pointer" checked={layer.pointer} onchange={(e) => setBackgroundLayer({ pointer: e.currentTarget.checked })}>
+			Follow the pointer (or the right controller in VR)
+		</InsToggle>
+		<InsToggle id="background-scroll" checked={layer.scroll} onchange={(e) => setBackgroundLayer({ scroll: e.currentTarget.checked })}>
+			React to scrolling
+		</InsToggle>
+		{#if errors.length}
+			<p id="background-errors" class="mb-1 text-[length:var(--fs-badge)] text-warn-text" role="alert">{errors[0]}</p>
+		{/if}
+		<p id="background-status" class="mb-1 text-[length:var(--fs-badge)] text-text-muted">
+			{$backgroundState.draw === 'none'
+				? 'Not drawn on this screen.'
+				: $backgroundState.tier === 'low'
+					? 'Drawn at the lighter quality this device can afford.'
+					: 'Drawn at full quality.'}
+		</p>
+		<div class="flex gap-1">
+			<button id="background-edit" class="ui-chip flex-1 justify-center" onclick={edit} title="Open the background graph in the shader editor">Edit graph</button>
+			<button id="background-remove" class="ui-chip flex-1 justify-center" onclick={() => removeBackground()} title="Remove the background (undo brings it back)">Remove</button>
+		</div>
+	{/if}
+</Section>
diff --git a/src/lib/backgroundLayer.js b/src/lib/backgroundLayer.js
new file mode 100644
index 000000000..ca26c8557
--- /dev/null
+++ b/src/lib/backgroundLayer.js
@@ -0,0 +1,544 @@
+// 65 M2 — THE BACKGROUND LAYER: a shader graph drawn behind the scene (full screen), on a
+// picked plane, or — in a headset — on a big sphere around you.
+//
+// WHERE THE DOCUMENT LIVES: `shaderGraphs['background']`, domain 'background' (the third
+// domain, beside surface and post). Its `layer` field ({mode, target, pointer, scroll}) rides
+// INSIDE that document, so replication (`shadergraph`), the 'shadergraph' history kind, the
+// four save paths and a late joiner's handshake are all inherited — nothing new on the wire.
+// A packs preset is COPIED into the document when applied (backgroundPresets.js), so a scene
+// never depends on the CDN.
+//
+// WHAT IS LOCAL: the pointer and scroll inputs (each viewer's own pointer moves their own
+// background, nothing is sent — the shared clock alone keeps the drift in step everywhere),
+// the device-budget tier, and View ▸ Overrides ▸ Scene shaders, which switches it off here.
+//
+// HOW IT DRAWS (all three meshes live under the scene-root `background-root` group, never in
+// sceneObjects, so nothing here is serialised or sent — the particle-root rule):
+//   screen  one triangle covering the viewport at the FAR plane (z = w): behind everything,
+//           depth-tested so it never paints over an object whatever order it is drawn in
+//   sphere  in XR a screen background is HEAD-LOCKED (it turns with your head), so it becomes
+//           the inside of a sphere re-centred on each EYE every draw (zero disparity = at
+//           infinity), with mirrored UVs so a pattern that does not tile has no seam behind you
+//   plane   the target object's own geometry and world matrix, drawn over its surface with a
+//           polygon offset — the object keeps its material, collider and shadow untouched
+//
+// THE DEVICE BUDGET (backgroundLayerCore.tierFor): on a headset, a phone, or once the quality
+// governor gives up the scene look, the material is rebuilt with TP_OCTAVE_CAP = 2, so the
+// same graph costs a fraction (fractal noise is where a background's time goes).
+
+import * as THREE from 'three';
+import { writable, get } from 'svelte/store';
+import { objectsGroup, globalCamera, globalRenderer, isVRMode } from '../stores/sceneStore.js';
+import { shaderGraphOf, setShaderGraphFor, registerGraphDomain, shaderErrors, shaderClockNow, scheduleCompile, shaderGraphs } from './shaderGraph.js';
+import { compileBackgroundGraphToIR } from './shaderCompile.js';
+import { shaderTextureFor, resolveShaderTexture, shaderPlaceholderTexture, registerShaderTextureListener } from './shaderTextures.js';
+import { normalizeLayer, drawModeFor, tierFor, octaveCapFor, sphereUv, easePointer, pageScrollProgress } from './backgroundLayerCore.js';
+import { viewportOverrides, renderLayer } from './viewportOverrides.js';
+import { qualityOverrides, phoneQuality } from './qualityGovernor.js';
+import { ndcFromClient } from './canvasRect.js';
+import { pointerHandRay } from './vr/pointer.js';
+
+/** The ONE background document key (a scene has one background). */
+export const BACKGROUND_KEY = 'background';
+
+/** Behind everything else that sorts by renderOrder. */
+const RENDER_ORDER = -1e6;
+/** The XR sphere's radius: far enough that the head's own movement shows no parallax. */
+const SPHERE_RADIUS = 500;
+
+/**
+ * What the layer is doing on THIS device — the Inspector section's status line and the e2e
+ * seam. `draw` is the mode actually drawn ('none' when off, hidden locally, or a plane whose
+ * object is gone); `tier` the budget tier.
+ * @type {import('svelte/store').Writable<{draw: string, tier: 'high'|'low', mode: string, compiled: boolean, octaveCap: number, transparent: boolean}>}
+ */
+export const backgroundState = writable({ draw: 'none', tier: 'high', mode: 'off', compiled: false, octaveCap: 8, transparent: false });
+
+// ---- the shared layer uniforms --------------------------------------------------
+// ONE object shared by every material the layer builds, so a mode switch never re-seeds them.
+const U = {
+	uShaderTime: { value: 0 },
+	uPointer: { value: new THREE.Vector4(0.5, 0.5, 0, 0) },
+	uScroll: { value: new THREE.Vector2(0, 0) },
+	uAspect: { value: 1 },
+	resolution: { value: new THREE.Vector2(1, 1) },
+	texelSize: { value: new THREE.Vector2(1, 1) }
+};
+
+const SCREEN_VERTEX = /* glsl */ `
+	varying vec2 vUv;
+	void main() {
+		vUv = position.xy * 0.5 + 0.5;
+		// z = w: the far plane, so every object in front wins the depth test
+		gl_Position = vec4(position.xy, 1.0, 1.0);
+	}
+`;
+// the direction mapping MUST match backgroundLayerCore.sphereUv (the pointer reads it back)
+const SPHERE_VERTEX = /* glsl */ `
+	varying vec2 vUv;
+	void main() {
+		vec3 d = normalize(position);
+		vUv = vec2(abs(atan(d.z, d.x)) / 3.14159265, asin(clamp(d.y, -1.0, 1.0)) / 3.14159265 + 0.5);
+		vec4 p = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+		gl_Position = p.xyww;
+	}
+`;
+const PLANE_VERTEX = /* glsl */ `
+	varying vec2 vUv;
+	void main() {
+		vUv = uv;
+		gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+	}
+`;
+
+/** @type {any} the scene-root group (Scene.svelte) */
+let root = null;
+/** @type {Record<'screen'|'sphere'|'plane', any>} */
+const meshes = { screen: null, sphere: null, plane: null };
+/** @type {Record<'screen'|'sphere'|'plane', any>} */
+const materials = { screen: null, sphere: null, plane: null };
+
+/** The last GOOD compile — a broken edit keeps drawing this (the shaderGraph rule). @type {any} */
+let compiled = null;
+/** uniform name -> slot, for the graph's own params @type {Record<string, {value: any}>} */
+let nodeUniforms = {};
+/** @type {{name: string, hash: string}[]} */
+let textureRefs = [];
+let tier = /** @type {'high'|'low'} */ ('high');
+let localOn = true;
+
+// ---- the domain compiler ----------------------------------------------------------
+
+/** @param {string[]} errors */
+function setErrors(errors) {
+	shaderErrors.update((all) => {
+		const next = { ...all };
+		if (errors.length) next[BACKGROUND_KEY] = errors;
+		else delete next[BACKGROUND_KEY];
+		return next;
+	});
+}
+
+/** @param {any} u @returns {any} */
+function slotValue(u) {
+	if (u.type === 'sampler2D') return u.hash ? (shaderTextureFor(u.hash) ?? shaderPlaceholderTexture()) : null;
+	return Array.isArray(u.value) ? u.value.slice() : u.value;
+}
+
+/** Compile the background document (the `registerGraphDomain` hook). @param {string} key */
+export function compileBackground(key) {
+	if (key !== BACKGROUND_KEY) {
+		shaderErrors.update((all) => ({ ...all, [key]: ['Only one background per scene: its key is "background".'] }));
+		return { ok: false };
+	}
+	const doc = shaderGraphOf(key);
+	if (!doc) {
+		compiled = null;
+		disposeMaterials();
+		setErrors([]);
+		refreshDraw();
+		return { ok: true };
+	}
+	const result = compileBackgroundGraphToIR(doc);
+	if (!result.ok || !result.ir) {
+		setErrors(result.errors ?? ['The background graph did not compile.']);
+		refreshDraw();
+		return { ok: false, errors: result.errors };
+	}
+	const ir = result.ir;
+	const structural = !compiled || compiled.fragment !== ir.fragment || compiled.hasAlpha !== ir.hasAlpha;
+	if (structural) {
+		nodeUniforms = {};
+		for (const u of ir.uniforms) nodeUniforms[u.name] = { value: slotValue(u) };
+		disposeMaterials();
+	} else {
+		// a VALUE edit (a slider): write the numbers, keep the programs
+		for (const u of ir.uniforms) {
+			const slot = nodeUniforms[u.name];
+			if (slot) slot.value = slotValue(u);
+		}
+	}
+	textureRefs = ir.uniforms.filter((u) => u.type === 'sampler2D' && u.hash).map((u) => ({ name: u.name, hash: u.hash }));
+	for (const ref of textureRefs) {
+		if (shaderTextureFor(ref.hash)) continue;
+		void resolveShaderTexture(ref.hash).then(refillTextures, () => {});
+	}
+	compiled = ir;
+	setErrors([]);
+	refreshDraw();
+	return { ok: true };
+}
+
+function refillTextures() {
+	for (const ref of textureRefs) {
+		const slot = nodeUniforms[ref.name];
+		const tex = shaderTextureFor(ref.hash);
+		if (slot && tex) slot.value = tex;
+	}
+}
+
+/** @param {'screen'|'sphere'|'plane'} mode */
+function materialFor(mode) {
+	if (materials[mode]) return materials[mode];
+	if (!compiled) return null;
+	const material = new THREE.ShaderMaterial({
+		name: 'tp-background-' + mode,
+		vertexShader: mode === 'screen' ? SCREEN_VERTEX : mode === 'sphere' ? SPHERE_VERTEX : PLANE_VERTEX,
+		fragmentShader: compiled.fragment,
+		// the shared layer uniforms + this graph's own, by reference
+		uniforms: { ...U, ...nodeUniforms },
+		defines: { TP_OCTAVE_CAP: octaveCapFor(tier) },
+		depthWrite: false,
+		depthTest: true,
+		transparent: !!compiled.hasAlpha,
+		// authored colours, shown as authored: the scene's tone mapping would grey a gradient
+		toneMapped: false,
+		fog: false,
+		side: mode === 'sphere' ? THREE.BackSide : mode === 'plane' ? THREE.DoubleSide : THREE.FrontSide
+	});
+	if (mode === 'plane') {
+		// sit ON the target's surface: it already wrote its depth there
+		material.polygonOffset = true;
+		material.polygonOffsetFactor = -1;
+		material.polygonOffsetUnits = -4;
+	}
+	materials[mode] = material;
+	if (meshes[mode]) meshes[mode].material = material;
+	return material;
+}
+
+function disposeMaterials() {
+	for (const mode of /** @type {const} */ (['screen', 'sphere', 'plane'])) {
+		materials[mode]?.dispose?.();
+		materials[mode] = null;
+	}
+}
+
+// ---- the meshes ---------------------------------------------------------------------
+
+function ensureMeshes() {
+	if (!root || meshes.screen) return;
+	const tri = new THREE.BufferGeometry();
+	tri.setAttribute('position', new THREE.Float32BufferAttribute([-1, -1, 0, 3, -1, 0, -1, 3, 0], 3));
+	meshes.screen = new THREE.Mesh(tri, undefined);
+	const sphere = new THREE.SphereGeometry(1, 48, 24);
+	meshes.sphere = new THREE.Mesh(sphere, undefined);
+	meshes.plane = new THREE.Mesh(new THREE.BufferGeometry(), undefined);
+	for (const [mode, mesh] of Object.entries(meshes)) {
+		mesh.name = 'background-' + mode;
+		mesh.frustumCulled = false;
+		mesh.renderOrder = RENDER_ORDER;
+		mesh.visible = false;
+		mesh.matrixAutoUpdate = false;
+		mesh.matrixWorldAutoUpdate = false;
+		// never pickable: a background is not a thing you click
+		mesh.raycast = () => {};
+		root.add(mesh);
+	}
+	// re-centre the sphere on the EYE that is drawing (each XR sub-camera in turn)
+	meshes.sphere.onBeforeRender = (/** @type {any} */ _r, /** @type {any} */ _s, /** @type {any} */ camera) => {
+		const m = camera.matrixWorld.elements;
+		meshes.sphere.matrixWorld.makeScale(SPHERE_RADIUS, SPHERE_RADIUS, SPHERE_RADIUS).setPosition(m[12], m[13], m[14]);
+	};
+	meshes.plane.onBeforeRender = () => {
+		const target = planeTarget();
+		if (target) meshes.plane.matrixWorld.copy(target.matrixWorld);
+	};
+	refreshDraw();
+}
+
+/** The scene-root group the layer draws under (65 M6's XR fluid panel shares it). */
+export function backgroundRootGroup() {
+	return root;
+}
+
+/** Scene.svelte hands over the scene-root group. @param {any} group */
+export function setBackgroundRoot(group) {
+	root = group;
+	ensureMeshes();
+}
+
+/** The picked plane's MESH (a group target draws on its first mesh). @returns {any} */
+function planeTarget() {
+	const doc = shaderGraphOf(BACKGROUND_KEY);
+	const layer = normalizeLayer(/** @type {any} */ (doc)?.layer);
+	if (!layer.target) return null;
+	const object = get(objectsGroup)?.getObjectByProperty?.('uuid', layer.target);
+	if (!object) return null;
+	if (object.isMesh) return object;
+	/** @type {any} */
+	let found = null;
+	object.traverse?.((/** @type {any} */ node) => {
+		if (!found && node.isMesh) found = node;
+	});
+	return found;
+}
+
+/** Which mesh shows, per the document + this device. Cheap; called per frame. */
+function refreshDraw() {
+	const doc = shaderGraphOf(BACKGROUND_KEY);
+	const layer = normalizeLayer(/** @type {any} */ (doc)?.layer);
+	const xr = !!get(globalRenderer)?.xr?.isPresenting || get(isVRMode) === true;
+	const target = layer.mode === 'plane' ? planeTarget() : null;
+	const draw = !doc || !compiled || !localOn ? 'none' : drawModeFor(layer, { xr, targetFound: !!target });
+	if (meshes.screen) {
+		for (const mode of /** @type {const} */ (['screen', 'sphere', 'plane'])) {
+			const on = draw === mode;
+			const mesh = meshes[mode];
+			if (on) {
+				const material = materialFor(mode);
+				if (!material) {
+					mesh.visible = false;
+					continue;
+				}
+				mesh.material = material;
+				if (mode === 'plane' && target && mesh.geometry !== target.geometry) mesh.geometry = target.geometry;
+			}
+			mesh.visible = on && !!mesh.material;
+		}
+	}
+	const prev = get(backgroundState);
+	const next = {
+		draw,
+		tier,
+		mode: doc ? layer.mode : 'off',
+		compiled: !!compiled,
+		octaveCap: octaveCapFor(tier),
+		transparent: !!compiled?.hasAlpha
+	};
+	if (Object.keys(next).some((k) => /** @type {any} */ (next)[k] !== /** @type {any} */ (prev)[k])) backgroundState.set(next);
+	return { draw, layer, target };
+}
+
+// ---- inputs: pointer + scroll (LOCAL) --------------------------------------------------
+
+const pointer = { x: 0.5, y: 0.5, vx: 0, vy: 0 };
+const pointerTarget = { x: 0.5, y: 0.5, clientX: 0, clientY: 0, seen: false, moved: false };
+let wheelScroll = 0;
+/** @type {number|null} an embed / scroll-hero drives scroll directly (setBackgroundScroll) */
+let scrollOverride = null;
+const scrollState = { value: 0, speed: 0 };
+/** @type {(() => void)[]} */
+const stops = [];
+const raycaster = new THREE.Raycaster();
+const ndc = new THREE.Vector2();
+
+/**
+ * Drive the Scroll input from outside (a scroll-driven export, M7). `null` hands it back to the
+ * page scroll / wheel. @param {number|null} progress 0..1
+ */
+export function setBackgroundScroll(progress) {
+	scrollOverride = progress === null ? null : Math.max(0, Math.min(1, Number(progress) || 0));
+}
+
+function startInputs() {
+	if (typeof window === 'undefined' || stops.length) return;
+	const onMove = (/** @type {PointerEvent} */ e) => {
+		pointerTarget.clientX = e.clientX;
+		pointerTarget.clientY = e.clientY;
+		pointerTarget.seen = true;
+		pointerTarget.moved = true;
+	};
+	const onWheel = (/** @type {WheelEvent} */ e) => {
+		// only over the viewport: a scrolling panel is not the background's scroll
+		const canvas = get(globalRenderer)?.domElement;
+		if (canvas && e.target !== canvas) return;
+		wheelScroll = Math.max(0, Math.min(1, wheelScroll + e.deltaY * 0.0004));
+	};
+	window.addEventListener('pointermove', onMove, { passive: true });
+	window.addEventListener('wheel', onWheel, { passive: true });
+	stops.push(() => window.removeEventListener('pointermove', onMove));
+	stops.push(() => window.removeEventListener('wheel', onWheel));
+}
+
+/** Where the pointer is in the layer's own space, or null if it is not over it. */
+function pointerTargetUv(/** @type {string} */ draw, /** @type {any} */ target, /** @type {any} */ camera) {
+	if (draw === 'sphere') {
+		const ray = pointerHandRay?.();
+		if (!ray) return null;
+		const d = ray.ray.direction;
+		return sphereUv(d.x, d.y, d.z);
+	}
+	if (draw === 'plane') {
+		if (!target) return null;
+		/** @type {any} */
+		let caster = null;
+		if (get(isVRMode)) caster = pointerHandRay?.();
+		else if (pointerTarget.seen && camera) {
+			const p = ndcFromClient(pointerTarget.clientX, pointerTarget.clientY);
+			ndc.set(p.x, p.y);
+			raycaster.setFromCamera(ndc, camera);
+			caster = raycaster;
+		}
+		if (!caster) return null;
+		const hit = caster.intersectObject(target, false)[0];
+		return hit?.uv ? [hit.uv.x, hit.uv.y] : null;
+	}
+	if (!pointerTarget.seen) return null;
+	const p = ndcFromClient(pointerTarget.clientX, pointerTarget.clientY);
+	return [p.x * 0.5 + 0.5, p.y * 0.5 + 0.5];
+}
+
+// ---- the per-frame tick ------------------------------------------------------------------
+
+let lastTick = 0;
+/** test seam: hold the clock so a frame differs only by its inputs @type {number|null} */
+let frozenClock = null;
+/** @param {number|null} t seconds, or null to follow the shared clock again */
+export function setBackgroundClockForTest(t) {
+	frozenClock = t === null ? null : Number(t);
+}
+const bufferSize = new THREE.Vector2();
+const box = new THREE.Box3();
+const boxSize = new THREE.Vector3();
+const worldScale = new THREE.Vector3();
+
+/**
+ * ONE per-frame entry (a single Scene useTask line). Inert — one store read — when the scene
+ * has no background document.
+ * @param {any} [camera] @param {any} [renderer] @param {number} [now] ms
+ */
+export function tickBackgroundLayer(camera = get(globalCamera), renderer = get(globalRenderer), now = performance.now()) {
+	if (!get(shaderGraphs)[BACKGROUND_KEY]) {
+		if (meshes.screen && (meshes.screen.visible || meshes.sphere.visible || meshes.plane.visible)) refreshDraw();
+		lastTick = now;
+		return;
+	}
+	const dt = lastTick ? Math.min((now - lastTick) / 1000, 0.1) : 0.016;
+	lastTick = now;
+	// the budget tier: a change rebuilds the programs with the new octave cap
+	const q = get(qualityOverrides);
+	const xr = !!renderer?.xr?.isPresenting;
+	const nextTier = tierFor({ xr, phone: phoneQuality(), postOff: q.postOff, dprScale: q.dprScale });
+	if (nextTier !== tier) {
+		tier = nextTier;
+		disposeMaterials();
+	}
+	const { draw, layer, target } = refreshDraw();
+	if (draw === 'none') return;
+	U.uShaderTime.value = frozenClock ?? shaderClockNow();
+	if (renderer) {
+		renderer.getDrawingBufferSize(bufferSize);
+		U.resolution.value.set(Math.max(bufferSize.x, 1), Math.max(bufferSize.y, 1));
+		U.texelSize.value.set(1 / U.resolution.value.x, 1 / U.resolution.value.y);
+	}
+	if (draw === 'screen') U.uAspect.value = U.resolution.value.x / U.resolution.value.y;
+	else if (draw === 'sphere') U.uAspect.value = 1;
+	else if (target) {
+		if (!target.geometry.boundingBox) target.geometry.computeBoundingBox();
+		box.copy(target.geometry.boundingBox).getSize(boxSize);
+		target.getWorldScale(worldScale);
+		boxSize.multiply(worldScale);
+		const h = boxSize.y > 1e-4 ? boxSize.y : boxSize.z;
+		U.uAspect.value = h > 1e-4 ? Math.abs(boxSize.x / h) : 1;
+	}
+	if (layer.pointer && compiled?.usesPointer) {
+		// raycasting a plane or the hand ray only when something could have moved it
+		if (draw === 'screen' || draw === 'sphere' || pointerTarget.moved || get(isVRMode)) {
+			const uv = pointerTargetUv(draw, target, camera);
+			if (uv) {
+				pointerTarget.x = uv[0];
+				pointerTarget.y = uv[1];
+			}
+			pointerTarget.moved = false;
+		}
+		easePointer(pointer, pointerTarget.x, pointerTarget.y, dt);
+		U.uPointer.value.set(pointer.x, pointer.y, pointer.vx, pointer.vy);
+	}
+	if (layer.scroll && compiled?.usesScroll) {
+		const page = typeof document !== 'undefined' ? pageScrollProgress(/** @type {any} */ (document.scrollingElement)) : null;
+		const want = scrollOverride ?? page ?? wheelScroll;
+		const k = 1 - Math.exp(-8 * dt);
+		const next = scrollState.value + (want - scrollState.value) * k;
+		scrollState.speed += ((dt > 0 ? (next - scrollState.value) / dt : 0) - scrollState.speed) * k;
+		scrollState.value = next;
+		U.uScroll.value.set(scrollState.value, scrollState.speed);
+	}
+}
+
+// ---- authoring --------------------------------------------------------------------------
+
+/**
+ * Change the layer settings (mode / target / pointer / scroll) — one replicated, undoable
+ * document write. @param {Partial<import('./backgroundLayerCore.js').LayerSettings>} patch
+ */
+export function setBackgroundLayer(patch) {
+	const doc = shaderGraphOf(BACKGROUND_KEY);
+	if (!doc) return null;
+	const layer = normalizeLayer({ ...normalizeLayer(/** @type {any} */ (doc).layer), ...patch });
+	return setShaderGraphFor(BACKGROUND_KEY, { layer });
+}
+
+/**
+ * Put a preset document in the scene as THE background (a copy — the scene never points at
+ * the CDN). Keeps the current mode/target when one exists, so switching presets on a plane
+ * stays on that plane. @param {any} presetDoc a normalized preset (backgroundPresetsCore)
+ */
+export function applyBackgroundDoc(presetDoc) {
+	const current = shaderGraphOf(BACKGROUND_KEY);
+	const prev = current ? normalizeLayer(/** @type {any} */ (current).layer) : null;
+	const layer = normalizeLayer({ ...(prev ?? {}), pointer: presetDoc.layer?.pointer, scroll: presetDoc.layer?.scroll, mode: prev?.mode ?? 'screen' });
+	return setShaderGraphFor(BACKGROUND_KEY, {
+		domain: 'background',
+		name: presetDoc.name,
+		preset: presetDoc.preset,
+		nodes: structuredClone(presetDoc.nodes),
+		edges: structuredClone(presetDoc.edges),
+		layer
+	});
+}
+
+/** Remove the background (the sky shows again). Undoable like any graph delete. */
+export function removeBackground() {
+	if (!shaderGraphOf(BACKGROUND_KEY)) return false;
+	setShaderGraphFor(BACKGROUND_KEY, null);
+	return true;
+}
+
+// ---- wiring ---------------------------------------------------------------------------
+
+let started = false;
+
+/** Idempotent; at module load (the postGraphs precedent) and safe again from a test. */
+export function startBackgroundLayer() {
+	if (started) return;
+	started = true;
+	registerGraphDomain('background', compileBackground, (key) => key === BACKGROUND_KEY);
+	viewportOverrides.subscribe(() => {
+		localOn = renderLayer('shaders');
+		refreshDraw();
+	});
+	// a plane target can arrive after the document (a joiner) or be deleted and undeleted
+	objectsGroup.subscribe(() => {
+		if (shaderGraphOf(BACKGROUND_KEY)) refreshDraw();
+	});
+	registerShaderTextureListener(refillTextures);
+	startInputs();
+	// a document restored before this module loaded still compiles
+	if (shaderGraphOf(BACKGROUND_KEY)) scheduleCompile(BACKGROUND_KEY, 0);
+}
+
+startBackgroundLayer();
+
+/** test/debug view */
+export function backgroundLayerDebug() {
+	const doc = shaderGraphOf(BACKGROUND_KEY);
+	return {
+		...get(backgroundState),
+		layer: doc ? normalizeLayer(/** @type {any} */ (doc).layer) : null,
+		preset: /** @type {any} */ (doc)?.preset ?? null,
+		pointer: { ...pointer },
+		scroll: { ...scrollState },
+		uniforms: { aspect: U.uAspect.value, time: U.uShaderTime.value, resolution: U.resolution.value.toArray() },
+		visible: Object.fromEntries(Object.entries(meshes).map(([k, m]) => [k, !!m?.visible])),
+		programs: Object.fromEntries(Object.entries(materials).map(([k, m]) => [k, !!m])),
+		usesPointer: !!compiled?.usesPointer,
+		usesClock: !!compiled?.usesClock,
+		usesScroll: !!compiled?.usesScroll
+	};
+}
+
+/** test seam: the meshes (for a pixel probe / render-order check) */
+export function backgroundMeshes() {
+	return { ...meshes };
+}
diff --git a/src/lib/backgroundLayerCore.js b/src/lib/backgroundLayerCore.js
new file mode 100644
index 000000000..0184e3f0e
--- /dev/null
+++ b/src/lib/backgroundLayerCore.js
@@ -0,0 +1,111 @@
+// 65 M2 — the BACKGROUND LAYER's rules, pure (imports NOTHING; vitest runs it with no GPU).
+// The runtime that owns the meshes and the uniforms is backgroundLayer.js; this is only what
+// it decides: which mode a document asks for, which budget tier this device draws at, where a
+// pointer lands on the VR sphere, and how the pointer is eased.
+
+/** @typedef {'off'|'screen'|'plane'} LayerMode */
+/** @typedef {{mode: LayerMode, target: string|null, pointer: boolean, scroll: boolean}} LayerSettings */
+
+/** The modes a document may name. `screen` = full screen behind the scene, `plane` = drawn on a
+ * picked scene object's surface, `off` = authored but not drawn. */
+export const LAYER_MODES = /** @type {LayerMode[]} */ (['off', 'screen', 'plane']);
+
+/**
+ * ONE normalize at every boundary (the document's `layer` field rides inside the shader graph
+ * document, so it arrives through the wire, undo and four save paths untouched).
+ * Defaults: full screen, pointer on, scroll off.
+ * @param {any} raw @returns {LayerSettings}
+ */
+export function normalizeLayer(raw) {
+	const mode = LAYER_MODES.includes(raw?.mode) ? raw.mode : 'screen';
+	return {
+		mode,
+		target: typeof raw?.target === 'string' && raw.target ? raw.target : null,
+		pointer: raw?.pointer !== false,
+		scroll: raw?.scroll === true
+	};
+}
+
+/**
+ * Which mode actually DRAWS on this device right now. A headset never gets the screen
+ * triangle: a full-screen quad is head-locked (it turns with your head, which is how a
+ * background makes people ill), so in XR a screen background becomes the big sphere around
+ * you. A plane is world-space and stays a plane.
+ * @param {LayerSettings} layer @param {{xr: boolean, targetFound: boolean}} ctx
+ * @returns {'none'|'screen'|'sphere'|'plane'}
+ */
+export function drawModeFor(layer, ctx) {
+	if (layer.mode === 'off') return 'none';
+	if (layer.mode === 'plane') return ctx.targetFound ? 'plane' : 'none';
+	return ctx.xr ? 'sphere' : 'screen';
+}
+
+/**
+ * THE DEVICE BUDGET. `low` on a headset, on a phone, and on any device whose quality governor
+ * has stepped down to the post-processing step or below (the same moment it gives up the scene
+ * look) — the layer then caps fractal noise at 2 octaves. One graph, two costs, no second
+ * document (the TP_OCTAVE_CAP define in the fBm prelude).
+ * @param {{xr?: boolean, phone?: boolean, postOff?: boolean, dprScale?: number}} d
+ * @returns {'high'|'low'}
+ */
+export function tierFor(d) {
+	if (d.xr || d.phone || d.postOff) return 'low';
+	if (Number.isFinite(d.dprScale) && /** @type {number} */ (d.dprScale) <= 0.61) return 'low';
+	return 'high';
+}
+
+/** The fBm octave cap per tier (the shader's TP_OCTAVE_CAP). @param {'high'|'low'} tier */
+export function octaveCapFor(tier) {
+	return tier === 'low' ? 2 : 8;
+}
+
+/**
+ * A world DIRECTION (from the head) to the sphere's layer UV — the same mapping the sphere's
+ * vertex shader uses, so a controller pointing at a spot lights up that spot. u is MIRRORED
+ * about the forward axis (0.5 straight ahead, 0 to the right, 1 to the left, and the back half a
+ * reflection of the front) so a pattern that does not tile has no seam behind you; v is the
+ * elevation, 0 straight down, 1 straight up.
+ * @param {number} x @param {number} y @param {number} z @returns {[number, number]}
+ */
+export function sphereUv(x, y, z) {
+	const len = Math.hypot(x, y, z) || 1;
+	const dx = x / len, dy = y / len, dz = z / len;
+	const u = Math.abs(Math.atan2(dz, dx)) / Math.PI;
+	const v = Math.asin(Math.max(-1, Math.min(1, dy))) / Math.PI + 0.5;
+	return [u, v];
+}
+
+/**
+ * Ease the pointer towards where it is: exponential smoothing that is frame-rate independent
+ * (the same feel at 60 and 90 Hz), plus the eased velocity in layer units per second.
+ * @param {{x: number, y: number, vx: number, vy: number}} state mutated
+ * @param {number} tx @param {number} ty target @param {number} dt seconds
+ * @param {number} [rate] 1/s — higher follows tighter
+ */
+export function easePointer(state, tx, ty, dt, rate = 9) {
+	const step = Math.max(0, Math.min(dt, 0.1));
+	if (step <= 0) return state;
+	const k = 1 - Math.exp(-rate * step);
+	const nx = state.x + (tx - state.x) * k;
+	const ny = state.y + (ty - state.y) * k;
+	const vx = (nx - state.x) / step;
+	const vy = (ny - state.y) / step;
+	// the velocity is eased too, so one jumpy event does not flash a velocity-driven effect
+	state.vx += (vx - state.vx) * k;
+	state.vy += (vy - state.vy) * k;
+	state.x = nx;
+	state.y = ny;
+	return state;
+}
+
+/**
+ * Page scroll progress 0..1 (the embed / scroll-hero case), or null when the page does not
+ * scroll — the editor's own page never does, so there the layer falls back to the wheel.
+ * @param {{scrollTop: number, scrollHeight: number, clientHeight: number}|null|undefined} el
+ */
+export function pageScrollProgress(el) {
+	if (!el) return null;
+	const range = el.scrollHeight - el.clientHeight;
+	if (!(range > 1)) return null;
+	return Math.max(0, Math.min(1, el.scrollTop / range));
+}
diff --git a/src/lib/backgroundPresets.js b/src/lib/backgroundPresets.js
new file mode 100644
index 000000000..1d3a63c3b
--- /dev/null
+++ b/src/lib/backgroundPresets.js
@@ -0,0 +1,111 @@
+// 65 M2 — the BACKGROUND PRESET LOADER: the packs repo's `backgrounds/` set over the same
+// pinned jsDelivr ref as the Explorer packs (PACKS_BASE), plus the one preset core ships
+// itself (backgroundPresetsCore.builtinPresetDoc) so an offline build is never empty.
+//
+// LOCAL by construction: the list is a fact about this machine's network, and applying a
+// preset COPIES its graph into the scene's `background` document (backgroundLayer
+// .applyBackgroundDoc) — peers receive the document, never a CDN path, so a peer whose
+// CDN is blocked still sees the background.
+
+import { writable, get } from 'svelte/store';
+import { PACKS_BASE } from './packs';
+import { fetchIndex, onContentStale } from './contentBase';
+import { normalizePresetIndex, normalizePresetDoc, builtinPresetDoc, BUILTIN_PRESET_KEY } from './backgroundPresetsCore.js';
+
+/** Where the set lives inside the packs repo. */
+export const BACKGROUNDS_PATH = 'backgrounds';
+
+/**
+ * @typedef {{key: string, label: string, hint: string, file: string, source: 'packs'|'builtin'}} PresetRow
+ * @type {import('svelte/store').Writable<{status: 'idle'|'loading'|'ready'|'offline', error: string, presets: PresetRow[]}>}
+ */
+export const backgroundPresets = writable({
+	status: 'idle',
+	error: '',
+	presets: [builtinRow()]
+});
+
+function builtinRow() {
+	const doc = builtinPresetDoc();
+	return /** @type {PresetRow} */ ({
+		key: BUILTIN_PRESET_KEY,
+		label: doc.name,
+		hint: 'A calm two-tone gradient with a soft glow under the pointer. Built in — works offline.',
+		file: '',
+		source: 'builtin'
+	});
+}
+
+const base = () => String(PACKS_BASE).replace(/\/+$/, '') + '/' + BACKGROUNDS_PATH;
+
+/** @type {Promise<any>|null} */
+let loading = null;
+/** key -> normalized doc @type {Map<string, any>} */
+const docs = new Map();
+
+/** Fetch the list once per session (Retry / an app update re-fetches). @param {{force?: boolean}} [opts] */
+export function loadBackgroundPresets(opts = {}) {
+	if (loading && !opts.force) return loading;
+	backgroundPresets.update((s) => ({ ...s, status: 'loading', error: '' }));
+	loading = (async () => {
+		try {
+			const res = await fetchIndex(base() + '/index.json');
+			if (!res.ok) throw new Error('HTTP ' + res.status);
+			const index = normalizePresetIndex(await res.json());
+			if (!index.ok) throw new Error(index.error);
+			/** @type {PresetRow[]} */
+			const rows = index.presets.map((p) => ({ ...p, source: /** @type {const} */ ('packs') }));
+			backgroundPresets.set({ status: 'ready', error: '', presets: [...rows, builtinRow()] });
+		} catch (err) {
+			// offline, blocked or a broken file: the built-in stays, and the reason is shown
+			backgroundPresets.set({
+				status: 'offline',
+				error: 'The background pack could not be loaded (' + String(/** @type {any} */ (err)?.message ?? err) + ').',
+				presets: [builtinRow()]
+			});
+		}
+		return get(backgroundPresets);
+	})();
+	return loading;
+}
+
+onContentStale(() => {
+	loading = null;
+	docs.clear();
+});
+
+/**
+ * One preset's graph, normalized and ready for applyBackgroundDoc.
+ * @param {string} key
+ * @returns {Promise<{ok: true, doc: any} | {ok: false, error: string}>}
+ */
+export async function fetchBackgroundPreset(key) {
+	if (key === BUILTIN_PRESET_KEY) return normalizePresetDoc(builtinPresetDoc(), key);
+	const hit = docs.get(key);
+	if (hit) return { ok: true, doc: hit };
+	await loadBackgroundPresets();
+	const row = get(backgroundPresets).presets.find((p) => p.key === key);
+	if (!row || row.source !== 'packs') return { ok: false, error: 'There is no background preset called "' + key + '".' };
+	try {
+		// a preset FILE is content, not a list: the default cache is right (fetchIndex's rule)
+		const res = await fetch(base() + '/' + row.file);
+		if (!res.ok) throw new Error('HTTP ' + res.status);
+		const result = normalizePresetDoc(await res.json(), key);
+		if (result.ok) docs.set(key, result.doc);
+		return result;
+	} catch (err) {
+		return { ok: false, error: 'The preset "' + row.label + '" could not be loaded (' + String(/** @type {any} */ (err)?.message ?? err) + ').' };
+	}
+}
+
+/**
+ * Fetch + apply in one step — what the picker and the e2e suite call.
+ * @param {string} key @returns {Promise<{ok: boolean, error?: string}>}
+ */
+export async function applyBackgroundPreset(key) {
+	const result = await fetchBackgroundPreset(key);
+	if (!result.ok) return { ok: false, error: result.error };
+	const { applyBackgroundDoc } = await import('./backgroundLayer.js');
+	applyBackgroundDoc(result.doc);
+	return { ok: true };
+}
diff --git a/src/lib/backgroundPresetsCore.js b/src/lib/backgroundPresetsCore.js
new file mode 100644
index 000000000..57119d4eb
--- /dev/null
+++ b/src/lib/backgroundPresetsCore.js
@@ -0,0 +1,143 @@
+// 65 M2 — the BACKGROUND PRESET format, as pure rules (imports NOTHING, so the vitest layer
+// runs it with no browser): what a packs preset index and a preset document may hold, and
+// the one preset core ships itself so an offline or fresh build is never empty.
+//
+// THE PRESETS LIVE IN THE PACKS REPO (`backgrounds/`, built by its tools/backgrounds/build.cjs),
+// read over the same pinned jsDelivr ref as the Explorer packs. Each one is an ORDINARY
+// background-domain shader graph — the postGraphPresets reasoning: anything a preset does is
+// something a person could build node by node, so a preset teaches the vocabulary instead of
+// hiding it. Applying one COPIES it into the scene's `background` document; the scene never
+// points at the CDN, so a saved, exported or replicated scene does not need the packs repo.
+
+/** The newest preset document format this build reads. A NEWER file is refused by name rather
+ * than half-read: a field this build does not know might be the one that makes it work. */
+export const PRESET_FORMAT = 1;
+
+/** A preset key: lower-case words and dashes (the file name stem). */
+const KEY_RE = /^[a-z0-9][a-z0-9-]{0,63}$/;
+
+/**
+ * The preset LIST from `backgrounds/index.json`. Bad rows are DROPPED, not fatal: one broken
+ * row in a CDN file must not take the whole picker down.
+ * @param {any} raw
+ * @returns {{ok: boolean, error?: string, presets: {key: string, label: string, hint: string, file: string}[]}}
+ */
+export function normalizePresetIndex(raw) {
+	if (!raw || typeof raw !== 'object') return { ok: false, error: 'The preset list is not JSON.', presets: [] };
+	const format = Number(raw.format ?? 1);
+	if (!Number.isFinite(format) || format > PRESET_FORMAT)
+		return { ok: false, error: 'The preset list is a newer format (' + raw.format + ') than this app reads.', presets: [] };
+	const rows = Array.isArray(raw.presets) ? raw.presets : [];
+	/** @type {{key: string, label: string, hint: string, file: string}[]} */
+	const presets = [];
+	const seen = new Set();
+	for (const row of rows) {
+		const key = typeof row?.key === 'string' ? row.key : '';
+		if (!KEY_RE.test(key) || seen.has(key)) continue;
+		const file = typeof row.file === 'string' && /^[A-Za-z0-9._-]+\.json$/.test(row.file) ? row.file : key + '.json';
+		seen.add(key);
+		presets.push({
+			key,
+			label: typeof row.label === 'string' && row.label.trim() ? row.label.trim().slice(0, 60) : key,
+			hint: typeof row.hint === 'string' ? row.hint.trim().slice(0, 240) : '',
+			file
+		});
+	}
+	return { ok: true, presets };
+}
+
+/**
+ * One preset DOCUMENT. Returns the graph ready for `setShaderGraphFor('background', …)`,
+ * or an error a person can read. Only the shape is checked here — whether the graph
+ * COMPILES is the compiler's question, asked when it is applied.
+ * @param {any} raw @param {string} [key]
+ * @returns {{ok: true, doc: {domain: 'background', name: string, preset: string, nodes: any[], edges: any[], layer: {pointer: boolean, scroll: boolean}}} | {ok: false, error: string}}
+ */
+export function normalizePresetDoc(raw, key = '') {
+	if (!raw || typeof raw !== 'object') return { ok: false, error: 'The preset "' + key + '" is not JSON.' };
+	const format = Number(raw.format ?? 1);
+	if (!Number.isFinite(format) || format > PRESET_FORMAT)
+		return { ok: false, error: 'The preset "' + key + '" is a newer format than this app reads — update the app.' };
+	if (raw.domain !== 'background') return { ok: false, error: 'The preset "' + key + '" is not a background graph.' };
+	const nodes = Array.isArray(raw.nodes) ? raw.nodes.filter((/** @type {any} */ n) => n && typeof n.id === 'string' && typeof n.type === 'string') : [];
+	const edges = Array.isArray(raw.edges)
+		? raw.edges.filter((/** @type {any} */ e) => e && typeof e.source === 'string' && typeof e.target === 'string')
+		: [];
+	if (!nodes.some((/** @type {any} */ n) => n.type === 'backgroundOutput'))
+		return { ok: false, error: 'The preset "' + key + '" has no Background output node.' };
+	// an edge into a node that is not there would be the compiler's "points at a node that
+	// does not exist" — drop it here so a hand-edited file degrades rather than refuses
+	const ids = new Set(nodes.map((/** @type {any} */ n) => n.id));
+	return {
+		ok: true,
+		doc: {
+			domain: 'background',
+			name: typeof raw.name === 'string' && raw.name.trim() ? raw.name.trim().slice(0, 60) : key || 'Background',
+			preset: typeof raw.preset === 'string' ? raw.preset : key,
+			nodes: nodes.map((/** @type {any} */ n) => ({ ...n, data: n.data && typeof n.data === 'object' ? n.data : {} })),
+			edges: edges.filter((/** @type {any} */ e) => ids.has(e.source) && ids.has(e.target)),
+			layer: { pointer: raw.layer?.pointer !== false, scroll: raw.layer?.scroll === true }
+		}
+	};
+}
+
+/** The editor's canonical edge id shape, handles included. */
+const edge = (/** @type {string} */ s, /** @type {string} */ sh, /** @type {string} */ t, /** @type {string} */ th) => ({
+	id: 'e-' + s + '.' + sh + '-' + t + '.' + th,
+	source: s,
+	sourceHandle: sh,
+	target: t,
+	targetHandle: th
+});
+const node = (/** @type {string} */ id, /** @type {string} */ type, /** @type {number} */ x, /** @type {number} */ y, data = {}) => ({
+	id,
+	type,
+	position: { x, y },
+	data
+});
+
+/** The key of the preset core ships itself. */
+export const BUILTIN_PRESET_KEY = 'soft-gradient';
+
+/**
+ * The ONE built-in: a calm two-tone gradient with a soft glow under the pointer. Small on
+ * purpose — it exists so the picker is never empty offline and so a fresh clone can test the
+ * layer with no CDN, not to compete with the pack.
+ */
+export function builtinPresetDoc() {
+	return {
+		format: PRESET_FORMAT,
+		domain: 'background',
+		name: 'Soft gradient',
+		preset: BUILTIN_PRESET_KEY,
+		layer: { pointer: true, scroll: false },
+		nodes: [
+			node('uv', 'aspectUv', 40, 60),
+			node('chan', 'split', 240, 40),
+			node('ramp', 'gradient', 440, 40, { colorA: '#1b2340', colorB: '#3d4f8f', colorC: '#9fb4ff', mid: 0.55 }),
+			node('ptr', 'pointer', 40, 260),
+			node('ptrUv', 'aspectUv', 240, 260),
+			node('dist', 'distance', 440, 260),
+			node('rise', 'smoothstep', 620, 260, { edge0: 0, edge1: 0.4 }),
+			node('fall', 'oneMinus', 800, 260),
+			node('amt', 'float', 800, 400, { value: 0.18 }),
+			node('glow', 'multiply', 980, 280),
+			node('lit', 'add', 1160, 120),
+			node('out', 'backgroundOutput', 1360, 120)
+		],
+		edges: [
+			edge('uv', 'out', 'chan', 'value'),
+			edge('chan', 'y', 'ramp', 't'),
+			edge('ptr', 'position', 'ptrUv', 'uv'),
+			edge('uv', 'out', 'dist', 'a'),
+			edge('ptrUv', 'out', 'dist', 'b'),
+			edge('dist', 'out', 'rise', 'a'),
+			edge('rise', 'out', 'fall', 'a'),
+			edge('fall', 'out', 'glow', 'a'),
+			edge('amt', 'out', 'glow', 'b'),
+			edge('ramp', 'out', 'lit', 'a'),
+			edge('glow', 'out', 'lit', 'b'),
+			edge('lit', 'out', 'out', 'color')
+		]
+	};
+}
diff --git a/src/lib/debugHooks.js b/src/lib/debugHooks.js
index 46aa9ba1b..ab9d9bba2 100644
--- a/src/lib/debugHooks.js
+++ b/src/lib/debugHooks.js
@@ -391,6 +391,10 @@ export const DEBUG_HOOKS = [
 	['explorerClipboard', () => import('./explorerClipboard')],
 	['lookPresence', () => import('./lookPresence')],
 	['postGraphs', () => import('./postGraphs')],
+	// 65 M2: the shader background layer + its packs preset loader
+	['backgroundLayer', () => import('./backgroundLayer')],
+	['backgroundPresets', () => import('./backgroundPresets')],
+	['fluidLayer', () => import('./fluidLayer')],
 	['postGraphPresets', () => import('./postGraphPresets')],
 	['materialSharing', () => import('./materialSharing')],
 	['diagnostics', () => import('./diagnostics')],
diff --git a/src/lib/fluidLayer.js b/src/lib/fluidLayer.js
new file mode 100644
index 000000000..2e275ae7c
--- /dev/null
+++ b/src/lib/fluidLayer.js
@@ -0,0 +1,473 @@
+// 65 M6 — the SMOKE / INK FLUID LAYER: one shared stable-fluids sim (fluidSim.js), stirred by
+// the pointer (or the VR controllers) and an optional automatic stirrer, shown two ways.
+//
+// ON A SCREEN it is a scene-look entry, kind `fluid` (registerPostEffect): the entry is SCENE
+// DATA like every look entry — it replicates, saves and undoes with the look — and its Effect
+// both steps the solver (in `update`, where postprocessing's own Bloom renders its mips) and
+// composites the dye over the finished frame: smoke ADDS light, ink MIXES pigment in.
+//
+// IN A HEADSET the composer does not run (Outline renders the XR frame directly), and a
+// screen-space layer would be head-locked anyway. So the same entry becomes a WORLD PANEL
+// about 3 m in front of where you stood when the session started, under the scene-root
+// `background-root` group (never in sceneObjects — the particle-root rule), stepped from the
+// Scene useTask (tickFluidLayer) with `renderer.xr.enabled` off while the passes render, and
+// stirred by whichever controller ray crosses it.
+//
+// LOCAL by nature: the sim, its pointer and the automatic stirrer are each viewer's own — the
+// smoke is not the same swirl on two screens, the 36-sim fluid-particles rule. Only the
+// entry's params are shared.
+//
+// THE BUDGET (fluidLayerCore.fluidTierFor): grid size and Jacobi iterations drop on a
+// governor-shrunk desktop, again on a phone or a headset, and a headset whose governor is
+// already capping particles gets no fluid at all. Nothing composited the dye for ~500 ms (the
+// entry was switched off, the look disabled here, the tab hidden) = nothing steps; after 10 s
+// the GPU targets are freed.
+
+import * as THREE from 'three';
+import { get, writable } from 'svelte/store';
+import { Effect, BlendFunction } from 'postprocessing';
+import { FluidSim } from './fluidSim.js';
+import {
+	FLUID_DEFAULTS,
+	FLUID_PALETTES,
+	normalizeFluidParams,
+	fluidTierFor,
+	physicsFor,
+	dyeColor,
+	autoStir,
+	pointerSplat
+} from './fluidLayerCore.js';
+import { registerPostEffect, scenePost } from './scenePost.js';
+import { viewportOverrides } from './viewportOverrides.js';
+import { qualityOverrides, phoneQuality } from './qualityGovernor.js';
+import { globalRenderer } from '../stores/sceneStore.js';
+import { ndcFromClient } from './canvasRect.js';
+import { backgroundRootGroup } from './backgroundLayer.js';
+import { controllerRay } from './vr/pointer.js';
+
+/** The look entry's kind. */
+export const FLUID_KIND = 'fluid';
+/** Nothing composited for this long = stop stepping. */
+const IDLE_MS = 500;
+/** ... and for this long = free the targets. */
+const FREE_MS = 10000;
+/** The XR panel: width x height in metres, and how far ahead of the viewer it is put. */
+const PANEL_W = 3.2;
+const PANEL_H = 1.8;
+const PANEL_DIST = 3;
+/** Velocity a pointer splat carries, per UV/s of pointer speed. */
+const FORCE = 1.6;
+
+/**
+ * What the layer is doing on THIS device (debug hook + e2e seam).
+ * @type {import('svelte/store').Writable<{presenter: 'none'|'post'|'panel', tier: string, simRes: number, dyeRes: number, iterations: number, steps: number, splats: number}>}
+ */
+export const fluidState = writable({ presenter: 'none', tier: 'off', simRes: 0, dyeRes: 0, iterations: 0, steps: 0, splats: 0 });
+
+// ---- the one shared sim -----------------------------------------------------------------
+
+/** @type {FluidSim|null} */
+let sim = null;
+let lastStep = 0;
+let lastUsed = 0;
+/** @type {'none'|'post'|'panel'} */
+let presenter = 'none';
+/** splats waiting for the next step @type {{x: number, y: number, vx: number, vy: number}[]} */
+const queue = [];
+/** a pointer splat's colour phase, so a stroke drifts through the palette */
+let phase = 0;
+/** test seam: hold the automatic stirrer still @type {boolean} */
+let autoHeld = false;
+
+/** @param {import('./fluidLayerCore.js').FluidTier} tier @param {number} aspect */
+function ensureSim(tier, aspect) {
+	if (!sim) sim = new FluidSim(tier, aspect);
+	else sim.configure(tier, aspect);
+	return sim;
+}
+
+function freeSim() {
+	sim?.dispose();
+	sim = null;
+	publish();
+}
+
+function publish() {
+	fluidState.set({
+		presenter,
+		tier: sim ? currentTier?.tier ?? 'off' : 'off',
+		simRes: sim?.quality.simRes ?? 0,
+		dyeRes: sim?.quality.dyeRes ?? 0,
+		iterations: sim?.quality.iterations ?? 0,
+		steps: sim?.steps ?? 0,
+		splats: sim?.splats ?? 0
+	});
+}
+
+/** @type {import('./fluidLayerCore.js').FluidTier|null} */
+let currentTier = null;
+
+function tierNow(/** @type {boolean} */ xr) {
+	const q = get(qualityOverrides);
+	return fluidTierFor({ xr, phone: phoneQuality(), dprScale: q.dprScale, particlesCapped: q.particlesCapped });
+}
+
+/**
+ * Splats in, one solver step. Saves and restores the render target, and switches XR off for
+ * the passes (three would otherwise swap in the XR camera and draw each pass twice, once per
+ * eye, into the eye viewports).
+ * @param {any} renderer @param {import('./fluidLayerCore.js').FluidParams} params @param {number} now ms
+ */
+function stepShared(renderer, params, now) {
+	if (!sim) return;
+	// the composer may render more than once a frame (picture-in-picture views): step once
+	if (lastStep && now - lastStep < 4) return;
+	const dt = lastStep ? Math.min((now - lastStep) / 1000, 1 / 30) : 1 / 60;
+	lastStep = now;
+	lastUsed = now;
+	const prevTarget = renderer.getRenderTarget();
+	const xrOn = renderer.xr.enabled;
+	const autoClear = renderer.autoClear;
+	renderer.xr.enabled = false;
+	renderer.autoClear = false;
+	try {
+		if (!sim.cleared) sim.clearAll(renderer);
+		const t = now / 1000;
+		const radius = params.radius * 0.1;
+		if (params.auto && !autoHeld) {
+			const s = autoStir(t);
+			sim.splat(renderer, s.x, s.y, s.vx * FORCE * 0.5, s.vy * FORCE * 0.5, scaled(dyeColor(params.palette, t), 0.35), radius);
+		}
+		for (const s of queue.splice(0, 16)) {
+			phase += 0.05;
+			sim.splat(renderer, s.x, s.y, s.vx * FORCE, s.vy * FORCE, dyeColor(params.palette, t + phase), radius);
+		}
+		queue.length = 0;
+		sim.step(renderer, dt, physicsFor(params));
+	} finally {
+		renderer.setRenderTarget(prevTarget);
+		renderer.xr.enabled = xrOn;
+		renderer.autoClear = autoClear;
+	}
+	publish();
+}
+
+/** @param {number[]} c @param {number} k */
+const scaled = (c, k) => [c[0] * k, c[1] * k, c[2] * k];
+
+// ---- local pointer input ----------------------------------------------------------------
+
+let listening = false;
+/** @type {{x: number, y: number, t: number}|null} */
+let lastPointer = null;
+
+function listen() {
+	if (listening || typeof window === 'undefined') return;
+	listening = true;
+	window.addEventListener(
+		'pointermove',
+		(e) => {
+			if (presenter !== 'post') return;
+			const canvas = get(globalRenderer)?.domElement;
+			if (canvas && e.target !== canvas) {
+				lastPointer = null;
+				return;
+			}
+			const p = ndcFromClient(e.clientX, e.clientY);
+			const at = { x: p.x * 0.5 + 0.5, y: p.y * 0.5 + 0.5, t: e.timeStamp || performance.now() };
+			if (at.x < 0 || at.x > 1 || at.y < 0 || at.y > 1) {
+				lastPointer = null;
+				return;
+			}
+			if (lastPointer) {
+				const s = pointerSplat(lastPointer, at, (at.t - lastPointer.t) / 1000);
+				if (s && queue.length < 64) queue.push(s);
+			}
+			lastPointer = at;
+		},
+		{ passive: true }
+	);
+}
+
+// ---- ON A SCREEN: the look entry ---------------------------------------------------------
+
+const COMPOSITE = /* glsl */ `
+	uniform sampler2D uDye;
+	uniform float uIntensity;
+	uniform float uInk;
+	void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
+		vec3 dye = texture2D(uDye, uv).rgb * uIntensity;
+		float peak = max(dye.r, max(dye.g, dye.b));
+		// smoke: light, soft-clipped so a dense patch saturates instead of blowing out
+		vec3 smoke = inputColor.rgb + (1.0 - exp(-3.0 * max(dye, vec3(0.0))));
+		// ink: the dye's hue as a dark pigment, covering in proportion to how much is there
+		float cover = 1.0 - exp(-4.0 * max(peak, 0.0));
+		vec3 pigment = (dye / max(peak, 1e-3)) * 0.35;
+		vec3 ink = mix(inputColor.rgb, pigment, cover);
+		outputColor = vec4(mix(smoke, ink, uInk), inputColor.a);
+	}
+`;
+
+class FluidEffect extends Effect {
+	/** @param {import('./fluidLayerCore.js').FluidParams} params */
+	constructor(params) {
+		super('FluidLayerEffect', COMPOSITE, {
+			blendFunction: BlendFunction.NORMAL,
+			uniforms: new Map(/** @type {[string, THREE.Uniform<any>][]} */ ([
+				['uDye', new THREE.Uniform(null)],
+				['uIntensity', new THREE.Uniform(params.intensity)],
+				['uInk', new THREE.Uniform(params.style === 'ink' ? 1 : 0)]
+			]))
+		});
+		this.fluidParams = params;
+	}
+
+	/** @param {any} renderer @param {any} inputBuffer */
+	update(renderer, inputBuffer) {
+		const now = performance.now();
+		const tier = tierNow(false);
+		currentTier = tier;
+		const u = /** @type {any} */ (this.uniforms);
+		if (!tier) {
+			u.get('uDye').value = null;
+			return;
+		}
+		const aspect = inputBuffer?.width && inputBuffer?.height ? inputBuffer.width / inputBuffer.height : 1;
+		ensureSim(tier, aspect);
+		presenter = 'post';
+		stepShared(renderer, this.fluidParams, now);
+		u.get('uDye').value = sim?.texture ?? null;
+	}
+}
+
+registerPostEffect(FLUID_KIND, {
+	label: 'Smoke / ink',
+	group: 'stylize',
+	params: [
+		{ key: 'style', label: 'Style', type: 'select', default: FLUID_DEFAULTS.style,
+			options: [
+				{ value: 'smoke', label: 'Smoke (adds light)' },
+				{ value: 'ink', label: 'Ink (mixes pigment in)' }
+			] },
+		{ key: 'palette', label: 'Colours', type: 'select', default: FLUID_DEFAULTS.palette,
+			options: FLUID_PALETTES.map((p) => ({ value: p, label: p[0].toUpperCase() + p.slice(1) })) },
+		{ key: 'intensity', label: 'Intensity', min: 0, max: 3, step: 0.05, decimals: 2, default: FLUID_DEFAULTS.intensity },
+		{ key: 'curl', label: 'Swirl', min: 0, max: 60, step: 1, decimals: 0, default: FLUID_DEFAULTS.curl,
+			hint: 'How strongly the flow curls into eddies.' },
+		{ key: 'fade', label: 'Fade', min: 0, max: 5, step: 0.05, decimals: 2, default: FLUID_DEFAULTS.fade,
+			hint: 'How fast the smoke or ink thins out. 0 keeps it.' },
+		{ key: 'radius', label: 'Brush size', min: 0.05, max: 1, step: 0.01, decimals: 2, default: FLUID_DEFAULTS.radius },
+		{ key: 'auto', label: 'Stir by itself', type: 'bool', default: FLUID_DEFAULTS.auto,
+			hint: 'A slow automatic stir, so the layer moves with nobody touching it. Your pointer (or a controller in VR) stirs your own view.' }
+	],
+	make: (params) => {
+		listen();
+		return new FluidEffect(normalizeFluidParams(params));
+	}
+});
+
+// ---- IN A HEADSET: the world panel -------------------------------------------------------
+
+/** @type {any} */
+let panel = null;
+let panelPlaced = false;
+const lastHit = /** @type {({x: number, y: number, t: number}|null)[]} */ ([null, null]);
+const headPos = new THREE.Vector3();
+const headDir = new THREE.Vector3();
+
+function ensurePanel() {
+	if (panel) return panel;
+	const material = new THREE.ShaderMaterial({
+		uniforms: { uDye: { value: null }, uIntensity: { value: 1 }, uInk: { value: 0 } },
+		vertexShader: /* glsl */ `
+			varying vec2 vUv;
+			void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }
+		`,
+		fragmentShader: /* glsl */ `
+			uniform sampler2D uDye;
+			uniform float uIntensity;
+			uniform float uInk;
+			varying vec2 vUv;
+			void main() {
+				vec3 dye = max(texture2D(uDye, vUv).rgb * uIntensity, vec3(0.0));
+				float peak = max(dye.r, max(dye.g, dye.b));
+				// soft edges, so the panel reads as a cloud and not a screen
+				vec2 e = smoothstep(vec2(0.0), vec2(0.12), vUv) * smoothstep(vec2(0.0), vec2(0.12), 1.0 - vUv);
+				float edge = e.x * e.y;
+				vec3 smoke = (1.0 - exp(-3.0 * dye)) * edge;
+				float cover = (1.0 - exp(-4.0 * peak)) * edge;
+				vec3 pigment = (dye / max(peak, 1e-3)) * 0.35;
+				gl_FragColor = uInk > 0.5 ? vec4(pigment, cover) : vec4(smoke, 1.0);
+			}
+		`,
+		transparent: true,
+		depthWrite: false,
+		side: THREE.DoubleSide,
+		blending: THREE.AdditiveBlending,
+		toneMapped: false
+	});
+	panel = new THREE.Mesh(new THREE.PlaneGeometry(PANEL_W, PANEL_H), material);
+	panel.name = 'fluid-panel';
+	panel.renderOrder = 10;
+	panel.visible = false;
+	return panel;
+}
+
+/** The scene look's enabled fluid entry, or null (XR reads the scene document directly). */
+function sceneFluidEntry() {
+	if (get(viewportOverrides).post === false) return null;
+	const doc = get(scenePost);
+	if (!doc?.enabled) return null;
+	return doc.effects.find((e) => e.kind === FLUID_KIND && e.enabled) ?? null;
+}
+
+/** @param {any} renderer @param {any} p @param {number} now */
+function panelInput(renderer, p, now) {
+	for (const index of [0, 1]) {
+		let hit = null;
+		try {
+			hit = controllerRay(index).intersectObject(panel, false)[0] ?? null;
+		} catch {}
+		if (!hit?.uv) {
+			lastHit[index] = null;
+			continue;
+		}
+		const at = { x: hit.uv.x, y: hit.uv.y, t: now };
+		const prev = lastHit[index];
+		if (prev) {
+			const s = pointerSplat(prev, at, (now - prev.t) / 1000);
+			if (s && queue.length < 64) queue.push(s);
+		}
+		lastHit[index] = at;
+	}
+}
+
+/**
+ * ONE per-frame entry (a single Scene useTask line). On a screen it only notices that the
+ * effect stopped compositing (and frees the targets later); in a headset it is the panel's
+ * presenter. @param {any} camera @param {any} renderer @param {number} now ms
+ */
+export function tickFluidLayer(camera, renderer = get(globalRenderer), now = performance.now()) {
+	const xr = !!renderer?.xr?.isPresenting;
+	if (!xr) {
+		if (panel?.visible) panel.visible = false;
+		panelPlaced = false;
+		if (presenter !== 'none' && now - lastUsed > IDLE_MS) {
+			presenter = 'none';
+			publish();
+		}
+		if (sim && now - lastUsed > FREE_MS) freeSim();
+		return;
+	}
+	const entry = sceneFluidEntry();
+	const tier = entry ? tierNow(true) : null;
+	currentTier = tier;
+	const root = backgroundRootGroup();
+	if (!entry || !tier || !root) {
+		if (panel?.visible) panel.visible = false;
+		if (presenter === 'panel') {
+			presenter = 'none';
+			publish();
+		}
+		if (sim && now - lastUsed > FREE_MS) freeSim();
+		return;
+	}
+	const p = normalizeFluidParams(entry.params);
+	ensurePanel();
+	if (panel.parent !== root) root.add(panel);
+	if (!panelPlaced) {
+		// ahead of where the viewer looks when the session starts, upright, facing them
+		const xrCam = renderer.xr.getCamera();
+		xrCam.getWorldPosition(headPos);
+		xrCam.getWorldDirection(headDir);
+		headDir.y = 0;
+		if (headDir.lengthSq() < 1e-6) headDir.set(0, 0, -1);
+		headDir.normalize();
+		panel.position.copy(headPos).addScaledVector(headDir, PANEL_DIST);
+		panel.lookAt(headPos.x, panel.position.y, headPos.z);
+		panel.updateMatrixWorld(true);
+		panelPlaced = true;
+	}
+	panel.visible = true;
+	ensureSim(tier, PANEL_W / PANEL_H);
+	presenter = 'panel';
+	panelInput(renderer, p, now);
+	stepShared(renderer, p, now);
+	const m = panel.material;
+	m.uniforms.uDye.value = sim?.texture ?? null;
+	m.uniforms.uIntensity.value = p.intensity;
+	const ink = p.style === 'ink';
+	m.uniforms.uInk.value = ink ? 1 : 0;
+	const blending = ink ? THREE.NormalBlending : THREE.AdditiveBlending;
+	if (m.blending !== blending) {
+		m.blending = blending;
+		m.needsUpdate = true;
+	}
+}
+
+// ---- test / debug seams ------------------------------------------------------------------
+
+/** Queue a splat as if a pointer had moved (UV, UV/s). @param {number} x @param {number} y @param {number} vx @param {number} vy */
+export function fluidSplatForTest(x, y, vx, vy) {
+	queue.push({ x, y, vx, vy });
+}
+
+/** Hold the automatic stirrer, so a test frame differs only by its own splats. @param {boolean} on */
+export function holdFluidAutoForTest(on) {
+	autoHeld = !!on;
+}
+
+/** a small 8-bit copy of the dye, for the read-back (half-float read-back is not portable) @type {any} */
+let probe = null;
+
+/**
+ * The dye's total (sum of r+g+b over a 64x36 8-bit copy, so dense patches clip at 1 per
+ * channel) — "is there smoke, and on which half". Null with no sim.
+ * @returns {{total: number, left: number, right: number}|null}
+ */
+export function readFluidDyeForTest() {
+	const renderer = get(globalRenderer);
+	if (!sim || !renderer) return null;
+	const w = 64;
+	const h = 36;
+	probe ??= new THREE.WebGLRenderTarget(w, h, { depthBuffer: false });
+	const prevTarget = renderer.getRenderTarget();
+	const xrOn = renderer.xr.enabled;
+	renderer.xr.enabled = false;
+	const buf = new Uint8Array(w * h * 4);
+	try {
+		const m = sim.mats.scale;
+		m.uniforms.uSource.value = sim.texture;
+		m.uniforms.uScale.value = 1;
+		sim.blit(renderer, m, probe);
+		renderer.readRenderTargetPixels(probe, 0, 0, w, h, buf);
+	} catch {
+		return null;
+	} finally {
+		renderer.setRenderTarget(prevTarget);
+		renderer.xr.enabled = xrOn;
+	}
+	let total = 0;
+	let left = 0;
+	let right = 0;
+	for (let y = 0; y < h; y++)
+		for (let x = 0; x < w; x++) {
+			const i = (y * w + x) * 4;
+			const v = (buf[i] + buf[i + 1] + buf[i + 2]) / 255;
+			total += v;
+			if (x < w / 2) left += v;
+			else right += v;
+		}
+	return { total, left, right };
+}
+
+/** debug hook row */
+export function fluidLayerDebug() {
+	return {
+		...get(fluidState),
+		queued: queue.length,
+		idleMs: lastUsed ? Math.round(performance.now() - lastUsed) : null,
+		panel: panel ? { visible: panel.visible, placed: panelPlaced, parent: panel.parent?.name ?? null } : null,
+		sim: sim ? { sim: [sim.velocity.w, sim.velocity.h], dye: [sim.dye.w, sim.dye.h] } : null
+	};
+}
diff --git a/src/lib/fluidLayerCore.js b/src/lib/fluidLayerCore.js
new file mode 100644
index 000000000..47d1faa60
--- /dev/null
+++ b/src/lib/fluidLayerCore.js
@@ -0,0 +1,138 @@
+// 65 M6 — the SMOKE / INK FLUID LAYER's rules, pure (imports NOTHING; vitest runs it with no
+// GPU). The runtime (fluidLayer.js) owns the solver, the post effect and the XR panel; this is
+// only what it decides: the look entry's params, the device-budget tier, the dye colour, the
+// solver physics a set of params means, and where the automatic stirrer is at a moment.
+
+/** @typedef {{style: 'smoke'|'ink', palette: string, intensity: number, curl: number, fade: number, radius: number, auto: boolean}} FluidParams */
+/** @typedef {{tier: 'high'|'medium'|'low', simRes: number, dyeRes: number, iterations: number}} FluidTier */
+
+export const FLUID_STYLES = ['smoke', 'ink'];
+export const FLUID_PALETTES = ['rainbow', 'ember', 'ocean', 'mono'];
+
+/** @type {FluidParams} */
+export const FLUID_DEFAULTS = Object.freeze({
+	style: 'smoke',
+	palette: 'rainbow',
+	intensity: 1,
+	curl: 25,
+	fade: 0.8,
+	radius: 0.25,
+	auto: true
+});
+
+/** @param {any} v @param {number} lo @param {number} hi @param {number} d */
+const clampNum = (v, lo, hi, d) => {
+	const n = Number(v);
+	return Number.isFinite(n) ? Math.min(hi, Math.max(lo, n)) : d;
+};
+
+/**
+ * ONE normalize for a look entry's params (they arrive through the wire, undo and the saves
+ * with the rest of the scene look). @param {any} raw @returns {FluidParams}
+ */
+export function normalizeFluidParams(raw) {
+	const d = FLUID_DEFAULTS;
+	return {
+		style: FLUID_STYLES.includes(raw?.style) ? raw.style : d.style,
+		palette: FLUID_PALETTES.includes(raw?.palette) ? raw.palette : d.palette,
+		intensity: clampNum(raw?.intensity, 0, 3, d.intensity),
+		curl: clampNum(raw?.curl, 0, 60, d.curl),
+		fade: clampNum(raw?.fade, 0, 5, d.fade),
+		radius: clampNum(raw?.radius, 0.05, 1, d.radius),
+		auto: raw?.auto === undefined ? d.auto : !!raw.auto
+	};
+}
+
+/**
+ * THE DEVICE BUDGET. The solver's cost is (sim texels x Jacobi iterations) + dye texels, so the
+ * tiers trade grid size and iterations: a desktop affords 128/512/20, a desktop the governor
+ * has already shrunk (dpr scale <= 0.72) 96/384/14, a phone or a headset 64/256/8. A headset
+ * whose governor is already capping particles gets NO fluid (null): it is the first thing to
+ * give up, before frames are.
+ * @param {{xr?: boolean, phone?: boolean, dprScale?: number, particlesCapped?: boolean}} ctx
+ * @returns {FluidTier|null}
+ */
+export function fluidTierFor(ctx) {
+	if (ctx.xr && ctx.particlesCapped) return null;
+	if (ctx.xr || ctx.phone) return { tier: 'low', simRes: 64, dyeRes: 256, iterations: 8 };
+	if ((ctx.dprScale ?? 1) <= 0.72) return { tier: 'medium', simRes: 96, dyeRes: 384, iterations: 14 };
+	return { tier: 'high', simRes: 128, dyeRes: 512, iterations: 20 };
+}
+
+/**
+ * What the params mean to the solver. `fade` is how fast the dye goes (0 = it never does);
+ * the velocity always fades a little, even at fade 0, or a stirred layer churns forever.
+ * @param {FluidParams} p @returns {import('./fluidSim.js').FluidPhysics}
+ */
+export function physicsFor(p) {
+	return {
+		curl: p.curl,
+		dyeFade: p.fade,
+		velocityFade: 0.2 + p.fade * 0.5,
+		pressureDecay: 0.8,
+		radius: p.radius
+	};
+}
+
+/** @param {number} h 0..1 @param {number} s @param {number} v @returns {number[]} */
+function hsv(h, s, v) {
+	const i = Math.floor(h * 6);
+	const f = h * 6 - i;
+	const p = v * (1 - s);
+	const q = v * (1 - f * s);
+	const t = v * (1 - (1 - f) * s);
+	switch (((i % 6) + 6) % 6) {
+		case 0: return [v, t, p];
+		case 1: return [q, v, p];
+		case 2: return [p, v, t];
+		case 3: return [p, q, v];
+		case 4: return [t, p, v];
+		default: return [v, p, q];
+	}
+}
+
+/**
+ * The dye a splat puts in at phase `t` (seconds; the colour drifts as time goes). Linear RGB,
+ * scaled so one splat is visible but a held pointer does not blow out at once.
+ * @param {string} palette @param {number} t @returns {number[]}
+ */
+export function dyeColor(palette, t) {
+	const k = 0.15;
+	const wave = (/** @type {number} */ period) => 0.5 + 0.5 * Math.sin((t / period) * Math.PI * 2);
+	let c;
+	if (palette === 'ember') c = hsv(0.02 + 0.1 * wave(7), 0.9, 1);
+	else if (palette === 'ocean') c = hsv(0.5 + 0.17 * wave(9), 0.8, 1);
+	else if (palette === 'mono') c = [1, 1, 1];
+	else c = hsv((t / 12) % 1, 0.85, 1);
+	return [c[0] * k, c[1] * k, c[2] * k];
+}
+
+/**
+ * The automatic stirrer: a slow Lissajous path (0..1 UV) and its velocity in UV per second,
+ * so a layer with nobody's pointer on it still moves.
+ * @param {number} t seconds @returns {{x: number, y: number, vx: number, vy: number}}
+ */
+export function autoStir(t) {
+	const a = 0.31;
+	const b = 0.23;
+	return {
+		x: 0.5 + 0.32 * Math.sin(t * a * Math.PI * 2),
+		y: 0.5 + 0.28 * Math.sin(t * b * Math.PI * 2 + 1.1),
+		vx: 0.32 * a * Math.PI * 2 * Math.cos(t * a * Math.PI * 2),
+		vy: 0.28 * b * Math.PI * 2 * Math.cos(t * b * Math.PI * 2 + 1.1)
+	};
+}
+
+/**
+ * A pointer move turned into a splat: position in UV (y up) and velocity in UV per second,
+ * clamped so a frame hitch is not a cannon. Null when it did not move.
+ * @param {{x: number, y: number}} from @param {{x: number, y: number}} to @param {number} dt seconds
+ */
+export function pointerSplat(from, to, dt) {
+	const dx = to.x - from.x;
+	const dy = to.y - from.y;
+	if (Math.abs(dx) + Math.abs(dy) < 1e-5) return null;
+	const s = 1 / Math.max(dt, 1 / 240);
+	const cap = 6;
+	return { x: to.x, y: to.y, vx: Math.max(-cap, Math.min(cap, dx * s)), vy: Math.max(-cap, Math.min(cap, dy * s)) };
+}
diff --git a/src/lib/fluidSim.js b/src/lib/fluidSim.js
new file mode 100644
index 000000000..e1167f991
--- /dev/null
+++ b/src/lib/fluidSim.js
@@ -0,0 +1,395 @@
+// 65 M6 — a 2D STABLE-FLUIDS solver on the GPU, for the smoke/ink layer (fluidLayer.js).
+//
+// Our own code, written from the published method (Stam, "Stable Fluids", SIGGRAPH 1999, and
+// the GPU formulation in GPU Gems ch. 38); Pavel Dobryakov's WebGL-Fluid-Simulation (MIT) was
+// the REFERENCE for which passes are worth running in a browser (vorticity confinement, a few
+// Jacobi pressure iterations, a decaying pressure field) — no code was copied from it.
+//
+// One step, in order: curl -> vorticity confinement (puts the swirls back that the coarse
+// grid numerically damps) -> divergence -> pressure (decayed, then Jacobi) -> subtract the
+// pressure gradient (the field is now divergence-free) -> advect the velocity -> advect the
+// dye. Splats add velocity + dye where the pointer or a controller moved. Every field is a
+// half-float ping-pong pair; the velocity is in sim TEXELS per second, so the solver behaves
+// the same at every resolution the device budget picks.
+//
+// LOCAL by nature: the sim is each viewer's own (their pointer stirs it), like the 36-sim
+// fluid particles. Only the layer's SETTINGS are scene data (the look entry).
+
+import * as THREE from 'three';
+
+const VERTEX = /* glsl */ `
+	varying vec2 vUv;
+	void main() {
+		vUv = position.xy * 0.5 + 0.5;
+		gl_Position = vec4(position.xy, 0.0, 1.0);
+	}
+`;
+
+// every pass reads its four neighbours one texel away
+const NEIGHBOURS = /* glsl */ `
+	varying vec2 vUv;
+	uniform vec2 uTexel;
+	vec2 L() { return vUv - vec2(uTexel.x, 0.0); }
+	vec2 R() { return vUv + vec2(uTexel.x, 0.0); }
+	vec2 B() { return vUv - vec2(0.0, uTexel.y); }
+	vec2 T() { return vUv + vec2(0.0, uTexel.y); }
+`;
+
+const SPLAT = /* glsl */ `
+	varying vec2 vUv;
+	uniform sampler2D uTarget;
+	uniform float uAspect;
+	uniform vec2 uPoint;
+	uniform vec3 uColor;
+	uniform float uRadius;
+	void main() {
+		vec2 p = vUv - uPoint;
+		p.x *= uAspect;
+		vec3 base = texture2D(uTarget, vUv).xyz;
+		gl_FragColor = vec4(base + exp(-dot(p, p) / uRadius) * uColor, 1.0);
+	}
+`;
+
+const ADVECT = /* glsl */ `
+	varying vec2 vUv;
+	uniform sampler2D uVelocity;
+	uniform sampler2D uSource;
+	uniform vec2 uTexel;
+	uniform float uDt;
+	uniform float uDissipation;
+	void main() {
+		// trace back along the velocity (texels/s) and read what was there — unconditionally stable
+		vec2 from = vUv - uDt * texture2D(uVelocity, vUv).xy * uTexel;
+		vec4 value = texture2D(uSource, from);
+		gl_FragColor = value / (1.0 + uDissipation * uDt);
+	}
+`;
+
+const DIVERGENCE = /* glsl */ `
+	${NEIGHBOURS}
+	uniform sampler2D uVelocity;
+	void main() {
+		float l = texture2D(uVelocity, L()).x;
+		float r = texture2D(uVelocity, R()).x;
+		float b = texture2D(uVelocity, B()).y;
+		float t = texture2D(uVelocity, T()).y;
+		vec2 c = texture2D(uVelocity, vUv).xy;
+		// solid walls: the mirrored velocity at the border, so nothing flows out of the frame
+		if (L().x < 0.0) l = -c.x;
+		if (R().x > 1.0) r = -c.x;
+		if (B().y < 0.0) b = -c.y;
+		if (T().y > 1.0) t = -c.y;
+		gl_FragColor = vec4(0.5 * (r - l + t - b), 0.0, 0.0, 1.0);
+	}
+`;
+
+const CURL = /* glsl */ `
+	${NEIGHBOURS}
+	uniform sampler2D uVelocity;
+	void main() {
+		float l = texture2D(uVelocity, L()).y;
+		float r = texture2D(uVelocity, R()).y;
+		float b = texture2D(uVelocity, B()).x;
+		float t = texture2D(uVelocity, T()).x;
+		gl_FragColor = vec4(0.5 * (r - l - t + b), 0.0, 0.0, 1.0);
+	}
+`;
+
+const VORTICITY = /* glsl */ `
+	${NEIGHBOURS}
+	uniform sampler2D uVelocity;
+	uniform sampler2D uCurl;
+	uniform float uStrength;
+	uniform float uDt;
+	void main() {
+		float l = texture2D(uCurl, L()).x;
+		float r = texture2D(uCurl, R()).x;
+		float b = texture2D(uCurl, B()).x;
+		float t = texture2D(uCurl, T()).x;
+		float c = texture2D(uCurl, vUv).x;
+		vec2 force = 0.5 * vec2(abs(t) - abs(b), abs(r) - abs(l));
+		force /= length(force) + 0.0001;
+		force *= uStrength * c;
+		force.y *= -1.0;
+		vec2 v = texture2D(uVelocity, vUv).xy + force * uDt;
+		gl_FragColor = vec4(clamp(v, -1000.0, 1000.0), 0.0, 1.0);
+	}
+`;
+
+const SCALE = /* glsl */ `
+	varying vec2 vUv;
+	uniform sampler2D uSource;
+	uniform float uScale;
+	void main() { gl_FragColor = uScale * texture2D(uSource, vUv); }
+`;
+
+const PRESSURE = /* glsl */ `
+	${NEIGHBOURS}
+	uniform sampler2D uPressure;
+	uniform sampler2D uDivergence;
+	void main() {
+		float l = texture2D(uPressure, L()).x;
+		float r = texture2D(uPressure, R()).x;
+		float b = texture2D(uPressure, B()).x;
+		float t = texture2D(uPressure, T()).x;
+		float d = texture2D(uDivergence, vUv).x;
+		gl_FragColor = vec4((l + r + b + t - d) * 0.25, 0.0, 0.0, 1.0);
+	}
+`;
+
+const GRADIENT = /* glsl */ `
+	${NEIGHBOURS}
+	uniform sampler2D uPressure;
+	uniform sampler2D uVelocity;
+	void main() {
+		float l = texture2D(uPressure, L()).x;
+		float r = texture2D(uPressure, R()).x;
+		float b = texture2D(uPressure, B()).x;
+		float t = texture2D(uPressure, T()).x;
+		vec2 v = texture2D(uVelocity, vUv).xy - vec2(r - l, t - b);
+		gl_FragColor = vec4(v, 0.0, 1.0);
+	}
+`;
+
+/** @param {number} w @param {number} h @param {any} type */
+function target(w, h, type) {
+	const rt = new THREE.WebGLRenderTarget(w, h, {
+		type,
+		format: THREE.RGBAFormat,
+		minFilter: THREE.LinearFilter,
+		magFilter: THREE.LinearFilter,
+		wrapS: THREE.ClampToEdgeWrapping,
+		wrapT: THREE.ClampToEdgeWrapping,
+		depthBuffer: false,
+		stencilBuffer: false
+	});
+	rt.texture.generateMipmaps = false;
+	return rt;
+}
+
+/** a ping-pong pair: read from `read`, render into `write`, then swap */
+class Pair {
+	/** @param {number} w @param {number} h @param {any} type */
+	constructor(w, h, type) {
+		this.read = target(w, h, type);
+		this.write = target(w, h, type);
+		this.w = w;
+		this.h = h;
+	}
+	swap() {
+		const t = this.read;
+		this.read = this.write;
+		this.write = t;
+	}
+	dispose() {
+		this.read.dispose();
+		this.write.dispose();
+	}
+}
+
+/**
+ * @typedef {{simRes: number, dyeRes: number, iterations: number}} FluidQuality
+ * @typedef {{curl: number, velocityFade: number, dyeFade: number, pressureDecay: number, radius: number}} FluidPhysics
+ */
+
+export class FluidSim {
+	/** @param {FluidQuality} quality @param {number} aspect width / height of the layer */
+	constructor(quality, aspect) {
+		this.quality = { ...quality };
+		this.aspect = aspect;
+		this.camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+		this.scene = new THREE.Scene();
+		this.quad = new THREE.Mesh(new THREE.PlaneGeometry(2, 2));
+		this.quad.frustumCulled = false;
+		this.scene.add(this.quad);
+		/** @type {Record<string, any>} */
+		this.mats = {};
+		const pass = (/** @type {string} */ name, /** @type {string} */ frag, /** @type {Record<string, any>} */ uniforms) => {
+			this.mats[name] = new THREE.ShaderMaterial({
+				vertexShader: VERTEX,
+				fragmentShader: frag,
+				uniforms,
+				depthTest: false,
+				depthWrite: false,
+				toneMapped: false
+			});
+		};
+		const tex = () => ({ value: null });
+		const v2 = () => ({ value: new THREE.Vector2() });
+		pass('splat', SPLAT, { uTarget: tex(), uAspect: { value: 1 }, uPoint: v2(), uColor: { value: new THREE.Vector3() }, uRadius: { value: 0.002 } });
+		pass('advect', ADVECT, { uVelocity: tex(), uSource: tex(), uTexel: v2(), uDt: { value: 0 }, uDissipation: { value: 0 } });
+		pass('divergence', DIVERGENCE, { uVelocity: tex(), uTexel: v2() });
+		pass('curl', CURL, { uVelocity: tex(), uTexel: v2() });
+		pass('vorticity', VORTICITY, { uVelocity: tex(), uCurl: tex(), uTexel: v2(), uStrength: { value: 0 }, uDt: { value: 0 } });
+		pass('scale', SCALE, { uSource: tex(), uScale: { value: 1 } });
+		pass('pressure', PRESSURE, { uPressure: tex(), uDivergence: tex(), uTexel: v2() });
+		pass('gradient', GRADIENT, { uPressure: tex(), uVelocity: tex(), uTexel: v2() });
+		this.type = THREE.HalfFloatType;
+		this.steps = 0;
+		this.splats = 0;
+		// set by allocate(); declared here so the checker knows they always exist after it
+		/** @type {Pair} */ this.velocity = /** @type {any} */ (null);
+		/** @type {Pair} */ this.pressure = /** @type {any} */ (null);
+		/** @type {Pair} */ this.dye = /** @type {any} */ (null);
+		/** @type {any} */ this.divergence = null;
+		/** @type {any} */ this.curl = null;
+		this.simTexel = new THREE.Vector2();
+		this.dyeTexel = new THREE.Vector2();
+		this.cleared = false;
+		this.allocate();
+	}
+
+	allocate() {
+		const { simRes, dyeRes } = this.quality;
+		const size = (/** @type {number} */ res) => {
+			// the SHORT side is `res`: the long side follows the layer's aspect
+			const a = Math.max(0.25, Math.min(4, this.aspect || 1));
+			return a >= 1 ? [Math.round(res * a), res] : [res, Math.round(res / a)];
+		};
+		const [sw, sh] = size(simRes);
+		const [dw, dh] = size(dyeRes);
+		this.dispose(true);
+		this.velocity = new Pair(sw, sh, this.type);
+		this.pressure = new Pair(sw, sh, this.type);
+		this.divergence = target(sw, sh, this.type);
+		this.curl = target(sw, sh, this.type);
+		this.dye = new Pair(dw, dh, this.type);
+		this.simTexel = new THREE.Vector2(1 / sw, 1 / sh);
+		this.dyeTexel = new THREE.Vector2(1 / dw, 1 / dh);
+		this.cleared = false;
+	}
+
+	/** Change the budget tier or the aspect; reallocates only when something changed. @param {FluidQuality} q @param {number} aspect */
+	configure(q, aspect) {
+		const same =
+			q.simRes === this.quality.simRes && q.dyeRes === this.quality.dyeRes && Math.abs((aspect || 1) - (this.aspect || 1)) < 0.02;
+		this.quality = { ...q };
+		if (same) return false;
+		this.aspect = aspect;
+		this.allocate();
+		return true;
+	}
+
+	/** The dye texture the presenters draw. */
+	get texture() {
+		return this.dye.read.texture;
+	}
+
+	/** @param {any} renderer @param {any} material @param {any} into a target or null */
+	blit(renderer, material, into) {
+		this.quad.material = material;
+		renderer.setRenderTarget(into);
+		renderer.render(this.scene, this.camera);
+	}
+
+	/** zero every field once after allocation (a new target holds garbage on some drivers) @param {any} renderer */
+	clearAll(renderer) {
+		const color = new THREE.Color();
+		renderer.getClearColor(color);
+		const alpha = renderer.getClearAlpha();
+		renderer.setClearColor(0x000000, 0);
+		for (const rt of [this.velocity.read, this.velocity.write, this.pressure.read, this.pressure.write, this.dye.read, this.dye.write, this.divergence, this.curl]) {
+			renderer.setRenderTarget(rt);
+			renderer.clear(true, false, false);
+		}
+		renderer.setClearColor(color, alpha);
+		this.cleared = true;
+	}
+
+	/**
+	 * Push velocity + dye in at a point. Coordinates are the layer's 0..1 UV; `force` is in
+	 * UV per second (the pointer's own speed), `color` linear RGB.
+	 * @param {any} renderer @param {number} x @param {number} y @param {number} fx @param {number} fy
+	 * @param {number[]} color @param {number} radius in UV (fraction of the short side)
+	 */
+	splat(renderer, x, y, fx, fy, color, radius) {
+		const m = this.mats.splat;
+		const u = m.uniforms;
+		u.uAspect.value = this.aspect || 1;
+		u.uPoint.value.set(x, y);
+		u.uRadius.value = Math.max(radius * radius, 1e-6);
+		// velocity: UV/s -> sim texels/s
+		u.uTarget.value = this.velocity.read.texture;
+		u.uColor.value.set(fx * this.velocity.w, fy * this.velocity.h, 0);
+		this.blit(renderer, m, this.velocity.write);
+		this.velocity.swap();
+		u.uTarget.value = this.dye.read.texture;
+		u.uColor.value.set(color[0], color[1], color[2]);
+		this.blit(renderer, m, this.dye.write);
+		this.dye.swap();
+		this.splats++;
+	}
+
+	/** One solver step. @param {any} renderer @param {number} dt seconds @param {FluidPhysics} phys */
+	step(renderer, dt, phys) {
+		const M = this.mats;
+		const st = this.simTexel;
+		M.curl.uniforms.uVelocity.value = this.velocity.read.texture;
+		M.curl.uniforms.uTexel.value.copy(st);
+		this.blit(renderer, M.curl, this.curl);
+
+		const vort = M.vorticity.uniforms;
+		vort.uVelocity.value = this.velocity.read.texture;
+		vort.uCurl.value = this.curl.texture;
+		vort.uTexel.value.copy(st);
+		vort.uStrength.value = phys.curl;
+		vort.uDt.value = dt;
+		this.blit(renderer, M.vorticity, this.velocity.write);
+		this.velocity.swap();
+
+		M.divergence.uniforms.uVelocity.value = this.velocity.read.texture;
+		M.divergence.uniforms.uTexel.value.copy(st);
+		this.blit(renderer, M.divergence, this.divergence);
+
+		// the last step's pressure, decayed, is the starting guess: far fewer iterations needed
+		M.scale.uniforms.uSource.value = this.pressure.read.texture;
+		M.scale.uniforms.uScale.value = phys.pressureDecay;
+		this.blit(renderer, M.scale, this.pressure.write);
+		this.pressure.swap();
+		const pr = M.pressure.uniforms;
+		pr.uDivergence.value = this.divergence.texture;
+		pr.uTexel.value.copy(st);
+		for (let i = 0; i < this.quality.iterations; i++) {
+			pr.uPressure.value = this.pressure.read.texture;
+			this.blit(renderer, M.pressure, this.pressure.write);
+			this.pressure.swap();
+		}
+
+		const gr = M.gradient.uniforms;
+		gr.uPressure.value = this.pressure.read.texture;
+		gr.uVelocity.value = this.velocity.read.texture;
+		gr.uTexel.value.copy(st);
+		this.blit(renderer, M.gradient, this.velocity.write);
+		this.velocity.swap();
+
+		const ad = M.advect.uniforms;
+		ad.uDt.value = dt;
+		ad.uVelocity.value = this.velocity.read.texture;
+		ad.uSource.value = this.velocity.read.texture;
+		ad.uTexel.value.copy(st);
+		ad.uDissipation.value = phys.velocityFade;
+		this.blit(renderer, M.advect, this.velocity.write);
+		this.velocity.swap();
+		// the dye moves on the SAME velocity field, measured in sim texels: on the finer dye grid
+		// one sim texel is several dye texels, so the trace-back uses the sim texel size
+		ad.uVelocity.value = this.velocity.read.texture;
+		ad.uSource.value = this.dye.read.texture;
+		ad.uDissipation.value = phys.dyeFade;
+		this.blit(renderer, M.advect, this.dye.write);
+		this.dye.swap();
+		this.steps++;
+	}
+
+	/** @param {boolean} [keepPasses] */
+	dispose(keepPasses = false) {
+		this.velocity?.dispose();
+		this.pressure?.dispose();
+		this.dye?.dispose();
+		this.divergence?.dispose();
+		this.curl?.dispose();
+		if (!keepPasses) {
+			for (const m of Object.values(this.mats)) m.dispose();
+			this.quad.geometry.dispose();
+		}
+	}
+}
diff --git a/src/lib/particlePresets.js b/src/lib/particlePresets.js
index d7e3a0e5e..609c64bb8 100644
--- a/src/lib/particlePresets.js
+++ b/src/lib/particlePresets.js
@@ -30,6 +30,8 @@
 //  particles in birth order — with space 'world', the path the emitter took; continuous
 //  emitters only, a burst falls back to trails); inherit = share of the emitter's velocity
 //  a particle is born with (world space; 1 = all of it)
+//  65 M6: flow = curl-noise flow field strength m/s (0 = off), flowScale = its frequency
+//  (1/m — higher = tighter swirls), flowSpeed = how fast the field itself changes
 
 /** @type {any} */
 export const PARTICLE_DEFAULTS = {
@@ -62,7 +64,10 @@ export const PARTICLE_DEFAULTS = {
 	inherit: 0,
 	stretch: 0.04,
 	trail: 0.4,
-	trailSegments: 8
+	trailSegments: 8,
+	flow: 0,
+	flowScale: 0.6,
+	flowSpeed: 0.3
 };
 
 // The Core 6 (user-locked lineup). Names show in menus; keys are stable ids.
@@ -210,6 +215,37 @@ export const PARTICLE_PRESETS = [
 			sprite: 'dot', blending: 'normal', spin: 0.5, space: 'world',
 			wind: [0.35, 0, 0.12], fall: 6, ground: 'settle'
 		}
+	},
+	// 65 M6: curl-noise flow fields — trails that swirl through a divergence-free field
+	{
+		key: 'flowfield',
+		name: 'Flow field',
+		config: {
+			count: 360, lifetime: 6, lifeJitter: 0.3,
+			shape: 'box', area: [4, 4], angle: 80, radius: 0,
+			speed: 0.05, speedJitter: 0.5, gravity: 0, drag: 0, turbulence: 0,
+			sizeStart: 0.02, sizeEnd: 0.012,
+			colorStart: '#7ff9ff', colorEnd: '#b06bff',
+			opacity: 0.85, fadeIn: 0.15, fadeOut: 0.4,
+			sprite: 'dot', blending: 'additive', spin: 0, space: 'world',
+			render: 'trails', trail: 1.2, trailSegments: 12,
+			flow: 1.1, flowScale: 0.7, flowSpeed: 0.25
+		}
+	},
+	{
+		key: 'swirl',
+		name: 'Swirl ribbon',
+		config: {
+			count: 160, lifetime: 2.6, lifeJitter: 0,
+			shape: 'sphere', radius: 0.05,
+			speed: 0.15, speedJitter: 0.2, gravity: 0.1, drag: 0.4, turbulence: 0,
+			sizeStart: 0.06, sizeEnd: 0.01,
+			colorStart: '#ffd1f5', colorEnd: '#5b6cff',
+			opacity: 0.8, fadeIn: 0.05, fadeOut: 0.6,
+			sprite: 'dot', blending: 'additive', spin: 0, space: 'world',
+			render: 'ribbon', inherit: 0.4,
+			flow: 0.8, flowScale: 0.9, flowSpeed: 0.4
+		}
 	}
 ];
 
diff --git a/src/lib/particleRuntime.js b/src/lib/particleRuntime.js
index 1d5020f8c..4e68855e3 100644
--- a/src/lib/particleRuntime.js
+++ b/src/lib/particleRuntime.js
@@ -185,6 +185,11 @@ function buildEntry(key, count, render = 'points', segs = 1) {
 			uWind: { value: new THREE.Vector3() },
 			uFall: { value: 0 },
 			uGround: { value: 0 },
+			// 65 M6: the curl-noise flow field
+			uFlow: { value: 0 },
+			uFlowScale: { value: 0.6 },
+			uFlowSpeed: { value: 0.3 },
+			uFlowSteps: { value: 4 },
 			uQuat: { value: new THREE.Vector4(0, 0, 0, 1) },
 			uWorldSpace: { value: 0 },
 			// 37-fx: inherit velocity + the strip modes
@@ -360,6 +365,10 @@ function applyUniforms(entry, cfg) {
 	u.uGravity.value = cfg.gravity;
 	u.uDrag.value = cfg.drag;
 	u.uTurbulence.value = cfg.turbulence;
+	// 65 M6: curl-noise flow (clamped: a field faster than this reads as noise, not flow)
+	u.uFlow.value = Math.min(Math.max(Number(cfg.flow) || 0, 0), 6);
+	u.uFlowScale.value = Math.min(Math.max(Number(cfg.flowScale ?? 0.6) || 0.6, 0.05), 8);
+	u.uFlowSpeed.value = Math.min(Math.max(Number(cfg.flowSpeed ?? 0.3) || 0, 0), 4);
 	// PFX-B fix: `size` is an alias for the start size (the wired input handle)
 	u.uSizeStart.value = cfg.size ?? cfg.sizeStart;
 	u.uSizeEnd.value = cfg.sizeEnd;
@@ -479,7 +488,7 @@ export function updateParticles(pairs, sceneObjects, time) {
 			const sig = JSON.stringify([
 				cfg.offset, cfg.speed, cfg.gravity, cfg.sizeStart, cfg.size, cfg.lifetime,
 				cfg.turbulence, cfg.angle, cfg.radius, cfg.shape, cfg.sprite, cfg.colorStart, cfg.colorEnd,
-				cfg.inherit, cfg.stretch, cfg.trail
+				cfg.inherit, cfg.stretch, cfg.trail, cfg.flow, cfg.flowScale, cfg.flowSpeed
 			]);
 			if (entry.cfgSig !== undefined && entry.cfgSig !== sig) {
 				entry.burstT = tw;
@@ -488,6 +497,9 @@ export function updateParticles(pairs, sceneObjects, time) {
 			entry.cfgSig = sig;
 		}
 		u.uBurstT.value = entry.burstT;
+		// 65 M6: the device budget — half the flow integration on a headset or once the governor
+		// caps particles (a flow path is a few trig calls per step per vertex)
+		u.uFlowSteps.value = vr || particlesCapped ? 2 : 4;
 		const drawn = vr ? Math.min(cfg.count, VR_MAX_COUNT) : cfg.count;
 		entry.geometry.setDrawRange(0, entry.layout ? drawn * entry.layout.indicesPerSlot : drawn);
 		entry.points.visible = object.visible !== false;
@@ -578,6 +590,8 @@ export function particleEntries() {
 		vel: [...entry.vel],
 		inherit: entry.material.uniforms.uInherit.value,
 		trail: entry.material.uniforms.uTrail.value,
+		flow: entry.material.uniforms.uFlow?.value ?? 0, // 65 M6
+		flowSteps: entry.material.uniforms.uFlowSteps?.value ?? 0,
 		space: entry.space,
 		sprite: entry.sprite,
 		burstT: entry.burstT,
diff --git a/src/lib/particleShader.js b/src/lib/particleShader.js
index b2eab6c41..c53b471b8 100644
--- a/src/lib/particleShader.js
+++ b/src/lib/particleShader.js
@@ -48,6 +48,41 @@ const SIM_COMMON = /* glsl */ `
 	uniform vec3 uWind;       // 36 B3: constant drift, m/s
 	uniform float uFall;      // 36 B3: the ground this far below the emitter (0 = none)
 	uniform float uGround;    // 36 B3: on landing 1 = splash (rain), 2 = settle (snow)
+	uniform float uFlow;      // 65 M6: curl-noise flow strength, m/s (0 = off)
+	uniform float uFlowScale; // ...the field's frequency, 1/m
+	uniform float uFlowSpeed; // ...how fast the field itself evolves
+	uniform float uFlowSteps; // ...integration steps (the device budget: 4, 2 on a headset / capped)
+
+	// 65 M6 — CURL NOISE: the curl of a smooth vector potential is DIVERGENCE-FREE, so the
+	// particles swirl like smoke or ink without bunching up or thinning out. The potential is
+	// two octaves of trigonometric waves with ANALYTIC derivatives (no noise texture, no
+	// finite differences), a pure function of (position, synced time) like everything else in
+	// this shader — so every peer, and every trail segment sampling the same particle at an
+	// earlier age, sees the same path.
+	vec3 tpCurlOctave(vec3 p, float t) {
+		return vec3(
+			-1.9 * sin(1.9 * p.y + 1.1 * t) - 1.1 * cos(1.1 * p.z + 0.9 * t),
+			-1.7 * sin(1.7 * p.z - 0.7 * t) - 1.2 * cos(1.2 * p.x - 0.8 * t),
+			-1.5 * sin(1.5 * p.x + 0.6 * t) - 1.3 * cos(1.3 * p.y + t));
+	}
+	vec3 tpCurl(vec3 p, float t) {
+		return (tpCurlOctave(p, t) + 0.5 * tpCurlOctave(p * 2.1 + vec3(3.1, 1.7, 5.3), t * 1.3)) / 4.5;
+	}
+	// how far the field has carried a particle by \`age\`: integrated along the straight line
+	// from where it spawned (s0) to where its ballistic motion puts it now (s1), in uFlowSteps
+	// midpoint steps — the step count scales with nothing but the budget, so a longer life is
+	// a longer step, never a different number of them (and a trail stays continuous)
+	vec3 tpFlowOffset(vec3 s0, vec3 s1, float birth, float age) {
+		vec3 d = vec3(0.0);
+		float h = age / uFlowSteps;
+		for (int i = 0; i < 6; i++) {
+			if (float(i) >= uFlowSteps) break;
+			float f = (float(i) + 0.5) / uFlowSteps;
+			vec3 q = mix(s0, s1, f) + d;
+			d += tpCurl(q * uFlowScale, (birth + age * f) * uFlowSpeed) * (uFlow * h);
+		}
+		return d;
+	}
 
 	vec3 qrot(vec4 q, vec3 v) {
 		return v + 2.0 * cross(q.xyz, cross(q.xyz, v) + q.w * v);
@@ -140,6 +175,13 @@ const SIM_COMMON = /* glsl */ `
 			landed = uGround > 1.5 ? 1.0 : clamp((age - hitAge) / 0.18, 0.0, 1.0) + 0.001;
 		}
 		if (uWorldSpace > 0.5) p = origin + qrot(uQuat, p);
+		// 65 M6: the flow field — in WORLD space for a world emitter (the field stays put and
+		// the particles drift through it), in the emitter's frame otherwise; a landed particle
+		// stays where it landed
+		if (uFlow > 0.001 && landed <= 0.0) {
+			vec3 s0 = uWorldSpace > 0.5 ? origin + qrot(uQuat, posBase) : posBase;
+			p += tpFlowOffset(s0, p, uTime - age, age);
+		}
 		return p;
 	}
 `;
diff --git a/src/lib/postGraphs.js b/src/lib/postGraphs.js
index 7017d61ce..2d0633c86 100644
--- a/src/lib/postGraphs.js
+++ b/src/lib/postGraphs.js
@@ -77,9 +77,12 @@ export function postGraphName(key) {
 
 const LS = typeof localStorage !== 'undefined' ? localStorage : null;
 
-/** 'surface' | 'post' — which domain the shader editor is showing.
+/** 'surface' | 'post' | 'background' — which domain the shader editor is showing.
  * @type {import('svelte/store').Writable<string>} */
-export const shaderDomain = writable(LS?.getItem('shaderDomain') === 'post' ? 'post' : 'surface');
+// 65 M2: 'background' is the third domain (the backgroundLayer document)
+export const shaderDomain = writable(
+	LS?.getItem('shaderDomain') === 'post' ? 'post' : LS?.getItem('shaderDomain') === 'background' ? 'background' : 'surface'
+);
 shaderDomain.subscribe((value) => {
 	try {
 		LS?.setItem('shaderDomain', value);
diff --git a/src/lib/sessions.js b/src/lib/sessions.js
index 61c4a6dd3..82dd9e7aa 100644
--- a/src/lib/sessions.js
+++ b/src/lib/sessions.js
@@ -422,7 +422,11 @@ export function buildSelectionPayload(name, uuids) {
 			),
 			nodes: [],
 			edges: [],
-			shaderGraphs: shaderGraphsSnapshot({ pruneMissing: missing }),
+			// 65 M2: the snapshot keeps SCENE documents (post graphs, the background) now that
+			// they are no longer mis-pruned as orphans — and a selection carries none of them
+			shaderGraphs: Object.fromEntries(
+				Object.entries(shaderGraphsSnapshot({ pruneMissing: missing })).filter(([, doc]) => doc.domain === 'surface')
+			),
 			annotations: annotationsSnapshot().filter((/** @type {any} */ note) => inSet.has(note.objectUuid)),
 			// a joint with one end outside the set would arrive attached to nothing
 			joints: jointsSnapshot().filter((/** @type {any} */ joint) => inSet.has(joint.a) && inSet.has(joint.b)),
diff --git a/src/lib/shaderCatalog.js b/src/lib/shaderCatalog.js
index f22ac9303..292287516 100644
--- a/src/lib/shaderCatalog.js
+++ b/src/lib/shaderCatalog.js
@@ -17,7 +17,7 @@
 //   inputs   sockets [{name, type, default}] — `default` is the GLSL used when unwired
 //   outputs  sockets [{name, type, suffix}] — `suffix` swizzles the node's temp
 //   stages   which shader STAGES the node works in (absent = every stage: 'fragment',
-//            'vertex' and, since P4, 'post'). uv/normal mean different things per stage
+//            'vertex', since P4 'post' and since 65 M2 'background'). uv/normal mean different things per stage
 //            and `emit` receives the stage; a node needing the view vector or dFdx is
 //            'fragment' only, and a node reading a SCREEN buffer is 'post' only
 //   nativeType the GLSL type `emit` actually returns, when that is not the FIRST output's
@@ -29,6 +29,8 @@
 //            when USE_UV is set, so a graph using UV on an untextured material would
 //            otherwise fail to compile.
 //   prelude  GLSL function definitions hoisted once per graph (deduped by key)
+//   preludeDeps other defs whose prelude this one CALLS (65 M2: fBm uses Noise's hash), hoisted
+//            first under THEIR key — so a graph holding both nodes declares the function once
 //   emit     ({ in, params, node }) => GLSL expression string
 
 /** @typedef {'float'|'vec2'|'vec3'|'vec4'|'sampler2D'} GlslType */
@@ -42,12 +44,13 @@
  * @property {any[]} [inputs]
  * @property {any[]} [outputs]
  * @property {GlslType} [nativeType]
- * @property {('fragment'|'vertex'|'post')[]} [stages] which shader stages the node works
+ * @property {('fragment'|'vertex'|'post'|'background')[]} [stages] which shader stages the node works
  *   in. Absent = all three. A node needing the view vector or screen-space derivatives is
  *   fragment-only, one reading the scene's colour or depth buffer is post-only, and the
  *   compiler refuses either elsewhere with an explanation naming both stages.
  * @property {string[]} [requires]
  * @property {string} [prelude]
+ * @property {string[]} [preludeDeps]
  * @property {string} [doc] the manual line, merged in from DOCS below
  * @property {(arg: any) => string} [emit]
  */
@@ -63,9 +66,22 @@ export const SURFACE_NODE = 'surface';
  */
 export const POST_OUTPUT_NODE = 'postOutput';
 
+/**
+ * 65 M2 — the single output node every BACKGROUND graph must have. A background is a
+ * fragment function over the LAYER's own coordinates (the screen, a picked plane's UVs, or
+ * the inside of the VR sphere), with the viewer's pointer and scroll as inputs — it has no
+ * material to patch and no frame to read, so it is a third domain with its own terminal.
+ */
+export const BACKGROUND_OUTPUT_NODE = 'backgroundOutput';
+
 /** @param {string} domain @returns {string} */
 export function outputNodeFor(domain) {
-	return domain === 'post' ? POST_OUTPUT_NODE : SURFACE_NODE;
+	return domain === 'post' ? POST_OUTPUT_NODE : domain === 'background' ? BACKGROUND_OUTPUT_NODE : SURFACE_NODE;
+}
+
+/** The shader STAGE a domain's graph compiles in (the palette filters on it). @param {string} domain */
+export function stageForDomain(domain) {
+	return domain === 'post' ? 'post' : domain === 'background' ? 'background' : 'fragment';
 }
 
 /** float in / float out helper for the one-argument maths nodes. */
@@ -666,7 +682,8 @@ const DEFS = [
 		key: 'resolution',
 		label: 'Resolution',
 		group: 'Post',
-		stages: ['post'],
+		// 65 M2: the background material declares the same two uniforms
+		stages: ['post', 'background'],
 		nativeType: 'vec4',
 		outputs: [
 			{ name: 'size', type: 'vec2', suffix: '.xy' },
@@ -678,7 +695,7 @@ const DEFS = [
 		key: 'bayer',
 		label: 'Bayer pattern',
 		group: 'Post',
-		stages: ['post'],
+		stages: ['post', 'background'],
 		inputs: [{ name: 'uv', type: 'vec2', default: 'uv' }],
 		params: [{ name: 'scale', type: 'float', default: 1, uniform: true }],
 		outputs: [{ name: 'out', type: 'float' }],
@@ -695,7 +712,12 @@ const DEFS = [
 			'  else if (i == 12) v = 15.0; else if (i == 13) v = 7.0; else if (i == 14) v = 13.0; else v = 5.0;\n' +
 			'  return (v + 0.5) / 16.0;\n' +
 			'}\n',
-		emit: (a) => 'tpBayer4(' + a.in.uv + ' * resolution / max(' + a.params.scale + ', 1.0))'
+		// a background on a PLANE has the plane's UVs, so the pixel grid comes from the
+		// fragment's own window position there (the post stage keeps its uv * resolution)
+		emit: (a) =>
+			a.stage === 'background'
+				? 'tpBayer4(gl_FragCoord.xy / max(' + a.params.scale + ', 1.0))'
+				: 'tpBayer4(' + a.in.uv + ' * resolution / max(' + a.params.scale + ', 1.0))'
 	},
 	{
 		key: 'edgeDetect',
@@ -775,6 +797,293 @@ const DEFS = [
 		outputs: []
 	},
 
+	// ---- patterns (65 M2: the fluid-background vocabulary — every stage that has a pixel) ----
+	// Pure maths on a UV, so they work on a surface, in a post pass and in a background
+	// alike. Everything animated reads the SHARED clock, so a background drifts in step on
+	// every peer with no messages (determinism IS the netcode); only the pointer and scroll
+	// inputs are the viewer's own.
+	{
+		key: 'fbm',
+		label: 'Fractal noise (fBm)',
+		group: 'Pattern',
+		inputs: [{ name: 'uv', type: 'vec2', default: 'vUv' }],
+		params: [
+			{ name: 'scale', type: 'float', default: 3, uniform: true },
+			{ name: 'octaves', type: 'float', default: 5, uniform: true },
+			{ name: 'lacunarity', type: 'float', default: 2, uniform: true },
+			{ name: 'gain', type: 'float', default: 0.5, uniform: true }
+		],
+		outputs: [{ name: 'out', type: 'float' }],
+		requires: ['uv'],
+		preludeDeps: ['noise'],
+		// gradient noise (smoother than Noise's value noise, no grid look) summed over
+		// octaves. TP_OCTAVE_CAP is the DEVICE-BUDGET knob: the background layer defines it
+		// lower on a headset or phone, so one graph runs everywhere and costs what the device
+		// can afford — a recompile on a tier change, never a different document
+		prelude:
+			'#ifndef TP_OCTAVE_CAP\n' +
+			'#define TP_OCTAVE_CAP 8\n' +
+			'#endif\n' +
+			'vec2 tpGrad2(vec2 p) {\n' +
+			'  float h = tpHash21(p) * 6.2831853;\n' +
+			'  return vec2(cos(h), sin(h));\n' +
+			'}\n' +
+			'float tpGNoise(vec2 p) {\n' +
+			'  vec2 i = floor(p), f = fract(p);\n' +
+			'  vec2 u = f * f * f * (f * (f * 6.0 - 15.0) + 10.0);\n' +
+			'  float a = dot(tpGrad2(i), f);\n' +
+			'  float b = dot(tpGrad2(i + vec2(1.0, 0.0)), f - vec2(1.0, 0.0));\n' +
+			'  float c = dot(tpGrad2(i + vec2(0.0, 1.0)), f - vec2(0.0, 1.0));\n' +
+			'  float d = dot(tpGrad2(i + vec2(1.0, 1.0)), f - vec2(1.0, 1.0));\n' +
+			'  return mix(mix(a, b, u.x), mix(c, d, u.x), u.y);\n' +
+			'}\n' +
+			'float tpFbm(vec2 p, float octaves, float lacunarity, float gain) {\n' +
+			'  float sum = 0.0, amp = 0.5, norm = 0.0;\n' +
+			'  for (int i = 0; i < 8; i++) {\n' +
+			'    if (float(i) >= octaves || i >= TP_OCTAVE_CAP) break;\n' +
+			'    sum += amp * tpGNoise(p);\n' +
+			'    norm += amp;\n' +
+			'    p = p * lacunarity + vec2(17.3, 9.1);\n' +
+			'    amp *= gain;\n' +
+			'  }\n' +
+			'  return clamp(0.5 + 0.7 * sum / max(norm, 0.0001), 0.0, 1.0);\n' +
+			'}\n',
+		emit: (a) =>
+			'tpFbm(' + a.in.uv + ' * ' + a.params.scale + ', ' + a.params.octaves + ', ' +
+			a.params.lacunarity + ', ' + a.params.gain + ')'
+	},
+	{
+		key: 'domainWarp',
+		label: 'Domain warp',
+		group: 'Pattern',
+		inputs: [{ name: 'uv', type: 'vec2', default: 'vUv' }],
+		params: [
+			{ name: 'amount', type: 'float', default: 0.35, uniform: true },
+			{ name: 'scale', type: 'float', default: 2.5, uniform: true },
+			{ name: 'speed', type: 'float', default: 0.08, uniform: true }
+		],
+		outputs: [{ name: 'out', type: 'vec2' }],
+		requires: ['uv', 'time'],
+		preludeDeps: ['noise', 'fbm'],
+		// UV pushed along two drifting fBm fields: the "liquid" in every fluid background
+		prelude:
+			'vec2 tpWarp(vec2 uv, float amount, float scale, float t) {\n' +
+			'  vec2 p = uv * scale;\n' +
+			'  vec2 q = vec2(tpFbm(p + vec2(0.0, t), 4.0, 2.0, 0.5), tpFbm(p + vec2(5.2, 1.3 - t), 4.0, 2.0, 0.5));\n' +
+			'  return uv + amount * (q - 0.5);\n' +
+			'}\n',
+		emit: (a) =>
+			'tpWarp(' + a.in.uv + ', ' + a.params.amount + ', ' + a.params.scale + ', uShaderTime * ' + a.params.speed + ')'
+	},
+	{
+		key: 'meshGradient',
+		label: 'Mesh gradient',
+		group: 'Pattern',
+		inputs: [
+			{ name: 'uv', type: 'vec2', default: 'vUv' },
+			// unwired = no pull: the four colour points drift on the shared clock alone
+			{ name: 'focus', type: 'vec2', default: 'vec2(-2.0)' }
+		],
+		params: [
+			{ name: 'colorA', type: 'vec3', default: '#ff6a88', uniform: true },
+			{ name: 'colorB', type: 'vec3', default: '#ffd36e', uniform: true },
+			{ name: 'colorC', type: 'vec3', default: '#6a8bff', uniform: true },
+			{ name: 'colorD', type: 'vec3', default: '#3fe0c5', uniform: true },
+			{ name: 'speed', type: 'float', default: 0.35, uniform: true },
+			{ name: 'warp', type: 'float', default: 0.6, uniform: true },
+			{ name: 'pull', type: 'float', default: 0.45, uniform: true },
+			{ name: 'sharpness', type: 'float', default: 2.2, uniform: true }
+		],
+		outputs: [{ name: 'out', type: 'vec3' }],
+		requires: ['uv', 'time'],
+		// four colours pinned to four drifting points, blended by inverse distance — the
+		// "mesh gradient" look. `focus` drags the first point (wire the Pointer in)
+		prelude:
+			'vec3 tpMeshGrad(vec2 uv, vec2 focus, vec3 c0, vec3 c1, vec3 c2, vec3 c3, float t, float warp, float pull, float sharp) {\n' +
+			'  vec2 p0 = vec2(0.22, 0.26) + 0.14 * vec2(sin(t * 0.7), cos(t * 0.9));\n' +
+			'  vec2 p1 = vec2(0.80, 0.22) + 0.14 * vec2(cos(t * 0.6 + 1.0), sin(t * 0.8 + 2.0));\n' +
+			'  vec2 p2 = vec2(0.24, 0.80) + 0.14 * vec2(sin(t * 0.5 + 3.0), cos(t * 0.7 + 1.5));\n' +
+			'  vec2 p3 = vec2(0.78, 0.76) + 0.14 * vec2(cos(t * 0.9 + 2.5), sin(t * 0.6 + 0.5));\n' +
+			'  if (focus.x > -1.0) p0 = mix(p0, focus, clamp(pull, 0.0, 1.0));\n' +
+			'  vec2 q = uv + warp * 0.1 * vec2(sin(uv.y * 3.1 + t * 0.6), cos(uv.x * 2.7 - t * 0.5));\n' +
+			'  float w0 = 1.0 / pow(max(distance(q, p0), 0.002), sharp);\n' +
+			'  float w1 = 1.0 / pow(max(distance(q, p1), 0.002), sharp);\n' +
+			'  float w2 = 1.0 / pow(max(distance(q, p2), 0.002), sharp);\n' +
+			'  float w3 = 1.0 / pow(max(distance(q, p3), 0.002), sharp);\n' +
+			'  return (c0 * w0 + c1 * w1 + c2 * w2 + c3 * w3) / (w0 + w1 + w2 + w3);\n' +
+			'}\n',
+		emit: (a) =>
+			'tpMeshGrad(' + a.in.uv + ', ' + a.in.focus + ', ' + a.params.colorA + ', ' + a.params.colorB + ', ' +
+			a.params.colorC + ', ' + a.params.colorD + ', uShaderTime * ' + a.params.speed + ', ' +
+			a.params.warp + ', ' + a.params.pull + ', ' + a.params.sharpness + ')'
+	},
+	{
+		key: 'blobs',
+		label: 'Metaballs',
+		group: 'Pattern',
+		inputs: [
+			{ name: 'uv', type: 'vec2', default: 'vUv' },
+			// one extra blob that follows whatever is wired here (the Pointer); unwired = none
+			{ name: 'attract', type: 'vec2', default: 'vec2(-10.0)' }
+		],
+		params: [
+			{ name: 'count', type: 'float', default: 5, uniform: true },
+			{ name: 'radius', type: 'float', default: 0.12, uniform: true },
+			{ name: 'speed', type: 'float', default: 0.5, uniform: true },
+			{ name: 'smoothness', type: 'float', default: 0.12, uniform: true },
+			{ name: 'softness', type: 'float', default: 0.01, uniform: true },
+			{ name: 'attractRadius', type: 'float', default: 0.1, uniform: true }
+		],
+		nativeType: 'vec2',
+		outputs: [
+			{ name: 'mask', type: 'float', suffix: '.y' },
+			{ name: 'sdf', type: 'float', suffix: '.x' }
+		],
+		requires: ['uv', 'time'],
+		preludeDeps: ['noise', 'smoothMin'],
+		// up to eight drifting circles merged with a smooth minimum (an SDF), so they melt
+		// into each other like a lava lamp. Positions hash from the blob index: every peer
+		// draws the same blobs at the same moment
+		prelude:
+			'vec2 tpBlobs(vec2 uv, vec2 extra, float count, float radius, float t, float k, float soft, float extraR) {\n' +
+			'  float d = 1000.0;\n' +
+			'  for (int i = 0; i < 8; i++) {\n' +
+			'    if (float(i) >= count) break;\n' +
+			'    float fi = float(i);\n' +
+			'    vec2 h = vec2(tpHash21(vec2(fi, 3.1)), tpHash21(vec2(7.7, fi)));\n' +
+			'    vec2 c = 0.5 + 0.32 * vec2(sin(t * (0.5 + h.x) + h.y * 6.2831853), cos(t * (0.4 + h.y * 0.8) + h.x * 6.2831853));\n' +
+			'    float r = radius * (0.7 + 0.6 * tpHash21(vec2(fi, 11.0)));\n' +
+			'    d = tpSmin(d, length(uv - c) - r, k);\n' +
+			'  }\n' +
+			'  if (extra.x > -5.0 && extraR > 0.0) d = tpSmin(d, length(uv - extra) - extraR, k);\n' +
+			'  float s = max(soft, 0.0005);\n' +
+			'  return vec2(d, 1.0 - smoothstep(-s, s, d));\n' +
+			'}\n',
+		emit: (a) =>
+			'tpBlobs(' + a.in.uv + ', ' + a.in.attract + ', ' + a.params.count + ', ' + a.params.radius + ', uShaderTime * ' +
+			a.params.speed + ', ' + a.params.smoothness + ', ' + a.params.softness + ', ' + a.params.attractRadius + ')'
+	},
+	{
+		key: 'smoothMin',
+		label: 'Smooth min',
+		group: 'Math',
+		inputs: [
+			{ name: 'a', type: 'float', default: '0.0' },
+			{ name: 'b', type: 'float', default: '0.0' }
+		],
+		params: [{ name: 'k', type: 'float', default: 0.1, uniform: true }],
+		outputs: [{ name: 'out', type: 'float' }],
+		// the polynomial smooth minimum: min(a, b) with the corner rounded by k — how two
+		// distance fields MELT together instead of meeting at a crease
+		prelude:
+			'float tpSmin(float a, float b, float k) {\n' +
+			'  float h = clamp(0.5 + 0.5 * (b - a) / max(k, 0.0001), 0.0, 1.0);\n' +
+			'  return mix(b, a, h) - k * h * (1.0 - h);\n' +
+			'}\n',
+		emit: (a) => 'tpSmin(' + a.in.a + ', ' + a.in.b + ', ' + a.params.k + ')'
+	},
+	{
+		key: 'grain',
+		label: 'Film grain',
+		group: 'Pattern',
+		// gl_FragCoord: a pixel-locked pattern, so there is no vertex-stage meaning
+		stages: ['fragment', 'post', 'background'],
+		params: [
+			{ name: 'amount', type: 'float', default: 0.06, uniform: true },
+			{ name: 'size', type: 'float', default: 1.5, uniform: true },
+			{ name: 'animate', type: 'float', default: 1, uniform: true }
+		],
+		outputs: [{ name: 'out', type: 'float' }],
+		requires: ['time'],
+		preludeDeps: ['noise'],
+		// -amount/2 .. +amount/2 per screen pixel cell; ADD it to a colour. Re-rolled 24
+		// times a second on the shared clock when animate is 1
+		prelude:
+			'float tpGrain(vec2 px, float size, float t) {\n' +
+			'  vec2 cell = floor(px / max(size, 1.0));\n' +
+			'  return tpHash21(cell + floor(t * 24.0) * vec2(37.1, 17.3)) - 0.5;\n' +
+			'}\n',
+		emit: (a) =>
+			'(tpGrain(gl_FragCoord.xy, ' + a.params.size + ', uShaderTime * ' + a.params.animate + ') * ' + a.params.amount + ')'
+	},
+	{
+		key: 'rotateUv',
+		label: 'Rotate',
+		group: 'UV',
+		inputs: [{ name: 'uv', type: 'vec2', default: 'vUv' }],
+		params: [
+			{ name: 'angle', type: 'float', default: 0, uniform: true },
+			{ name: 'speed', type: 'float', default: 0, uniform: true },
+			{ name: 'center', type: 'vec2', default: [0.5, 0.5], uniform: true }
+		],
+		outputs: [{ name: 'out', type: 'vec2' }],
+		requires: ['uv', 'time'],
+		// degrees, plus degrees per second on the shared clock
+		prelude:
+			'vec2 tpRotate(vec2 uv, vec2 c, float deg) {\n' +
+			'  float r = radians(deg);\n' +
+			'  float s = sin(r), k = cos(r);\n' +
+			'  vec2 p = uv - c;\n' +
+			'  return vec2(k * p.x - s * p.y, s * p.x + k * p.y) + c;\n' +
+			'}\n',
+		emit: (a) =>
+			'tpRotate(' + a.in.uv + ', ' + a.params.center + ', ' + a.params.angle + ' + uShaderTime * ' + a.params.speed + ')'
+	},
+
+	// ---- background inputs (65 M2: the layer's own uniforms — background stage only) ----
+	{
+		key: 'pointer',
+		label: 'Pointer',
+		group: 'Background',
+		stages: ['background'],
+		// smoothed, in the layer's own 0..1 space (the screen, the plane's UVs, or where the
+		// right controller points on the VR sphere). LOCAL: each viewer's own pointer moves
+		// their own background — nothing is sent
+		nativeType: 'vec4',
+		outputs: [
+			{ name: 'position', type: 'vec2', suffix: '.xy' },
+			{ name: 'velocity', type: 'vec2', suffix: '.zw' }
+		],
+		emit: () => 'uPointer'
+	},
+	{
+		key: 'scroll',
+		label: 'Scroll',
+		group: 'Background',
+		stages: ['background'],
+		nativeType: 'vec2',
+		outputs: [
+			{ name: 'progress', type: 'float', suffix: '.x' },
+			{ name: 'speed', type: 'float', suffix: '.y' }
+		],
+		emit: () => 'uScroll'
+	},
+	{
+		key: 'aspectUv',
+		label: 'Aspect-correct UV',
+		group: 'Background',
+		stages: ['background'],
+		inputs: [{ name: 'uv', type: 'vec2', default: 'vUv' }],
+		outputs: [{ name: 'out', type: 'vec2' }],
+		requires: ['uv'],
+		// stretches x by the layer's width/height about the centre, so a circle stays round
+		// on a wide screen (wire the Pointer's position through one too, to compare them)
+		emit: (a) => '((' + a.in.uv + ' - 0.5) * vec2(uAspect, 1.0) + 0.5)'
+	},
+	{
+		key: BACKGROUND_OUTPUT_NODE,
+		label: 'Background output',
+		group: 'Output',
+		stages: ['background'],
+		inputs: [
+			{ name: 'color', type: 'vec3', default: null },
+			// unwired: opaque. Below 1 shows what is behind — the sky in screen mode, the
+			// plane's own material in plane mode
+			{ name: 'alpha', type: 'float', default: '1.0' }
+		],
+		outputs: []
+	},
+
 	// ---- the output -------------------------------------------------------------
 	{
 		key: SURFACE_NODE,
@@ -872,6 +1181,22 @@ const DOCS = {
 	edgeDetect: 'A line strength, 0..1, where depth or normals change sharply — silhouettes and creases. Mix a line colour over the scene colour by it for an ink look.',
 	ambientOcclusion: 'A cheap screen-space occlusion from depth alone, 0 open to 1 tucked into a corner. Darken the scene colour by it for contact shading you can tune in a graph.',
 
+	// patterns (65 M2)
+	fbm: 'Layered gradient noise, 0..1: soft clouds, smoke, marble. More octaves add finer detail; on a headset or phone the background layer caps them so the same graph stays within budget.',
+	domainWarp: 'Pushes UV along two slowly drifting noise fields — the liquid, flowing look of a fluid background. Feed its output into anything that takes a UV.',
+	meshGradient: 'Four colours pinned to four drifting points and blended smoothly: the modern mesh-gradient backdrop. Wire the Pointer into focus to pull the first colour towards it.',
+	blobs: 'Up to eight drifting circles that melt into each other (metaballs, a lava lamp). Mask is 0..1 inside; sdf is the signed distance for glows and outlines. Wire the Pointer into attract for a blob that follows it.',
+	smoothMin: 'The smaller of two distances with the corner rounded off by k, so two shapes merge softly instead of meeting at a crease.',
+	grain: 'Per-pixel film grain centred on zero — add it to a colour to break up banding in smooth gradients. Animate 1 re-rolls it 24 times a second.',
+	rotateUv: 'Turns UV about a centre by an angle in degrees, plus a spin speed in degrees per second.',
+
+	// background inputs (65 M2)
+	pointer: "Where this viewer's pointer is over the background (0..1, smoothed) and how fast it is moving. In VR it is where the right controller points. Local to each viewer: nothing is sent.",
+	scroll: 'How far the page has scrolled (0..1) and how fast — for scroll-driven heroes and embeds. In the editor the mouse wheel over the background nudges it.',
+	aspectUv: 'UV stretched to the layer\'s width/height, so circles stay round on a wide screen. Put the Pointer\'s position through one too before comparing the two.',
+	[BACKGROUND_OUTPUT_NODE]:
+		'The background graph\'s output: the colour drawn behind the scene (full screen, on a picked plane, or on a big sphere around you in VR). Alpha below 1 lets what is behind show through.',
+
 	// output
 	[POST_OUTPUT_NODE]:
 		"The post graph's output: the colour this effect writes for the pixel, with alpha left to the frame's own unless you wire it. Everything upstream of color is one fullscreen pass.",
diff --git a/src/lib/shaderCompile.js b/src/lib/shaderCompile.js
index 5dd231087..a8de4aee4 100644
--- a/src/lib/shaderCompile.js
+++ b/src/lib/shaderCompile.js
@@ -22,10 +22,10 @@
 // recomputed per consumer), and loop forever on a cycle. Both are handled by the
 // memo + the in-progress set, the PATH-based guard the flow editor uses.
 
-import { shaderNodeDef, outputTypeOf, SURFACE_NODE, POST_OUTPUT_NODE } from './shaderCatalog.js';
+import { shaderNodeDef, outputTypeOf, SURFACE_NODE, POST_OUTPUT_NODE, BACKGROUND_OUTPUT_NODE } from './shaderCatalog.js';
 
 /** @typedef {'float'|'vec2'|'vec3'|'vec4'|'sampler2D'} GlslType */
-/** @typedef {'fragment'|'vertex'|'post'} ShaderStage */
+/** @typedef {'fragment'|'vertex'|'post'|'background'} ShaderStage */
 
 /** The FRAGMENT taps the inject backend exposes, and the type each expects. */
 const TAP_TYPES = {
@@ -44,8 +44,11 @@ const VERTEX_TAP_TYPES = { position: 'vec3' };
 /** The POST tap: one colour (plus the frame's own alpha unless wired). */
 const POST_TAP_TYPES = { color: 'vec3', alpha: 'float' };
 
+/** 65 M2: the BACKGROUND tap — a colour and an alpha (opaque unless wired). */
+const BACKGROUND_TAP_TYPES = { color: 'vec3', alpha: 'float' };
+
 /** Stage names as a user would recognise them. @type {Record<string,string>} */
-const STAGE_LABEL = { fragment: 'surface', vertex: 'vertex displacement', post: 'post-processing' };
+const STAGE_LABEL = { fragment: 'surface', vertex: 'vertex displacement', post: 'post-processing', background: 'background' };
 
 /**
  * The one helper every depth-reading post node calls, emitted ONCE by the post pass
@@ -87,8 +90,24 @@ const POST_EQUIVALENT = {
 	'normalize(vNormal)': null
 };
 
+/**
+ * 65 M2: the BACKGROUND stage. The layer's material names its coordinate varying `vUv`
+ * (the screen, the plane's UVs, or the sphere's) so a UV default needs no translation;
+ * a surface normal has no meaning on a backdrop and is refused by name.
+ * @type {Record<string,string|null>}
+ */
+const BACKGROUND_EQUIVALENT = {
+	'normalize(vNormal)': null
+};
+
+/**
+ * The layer uniforms the BACKGROUND material always declares itself (backgroundLayer.js),
+ * so the compiler must not declare them a second time.
+ */
+export const BACKGROUND_BUILTIN_UNIFORMS = ['uShaderTime', 'uPointer', 'uScroll', 'uAspect', 'resolution', 'texelSize'];
+
 /** @type {Record<string, Record<string, string|null>>} */
-const STAGE_EQUIVALENT = { vertex: VERTEX_EQUIVALENT, post: POST_EQUIVALENT };
+const STAGE_EQUIVALENT = { vertex: VERTEX_EQUIVALENT, post: POST_EQUIVALENT, background: BACKGROUND_EQUIVALENT };
 
 /**
  * Convert `expr` from `from` to `to`. GLSL will not do this silently, and a mismatch is
@@ -260,6 +279,17 @@ function createCompiler(graph, outputType) {
 			}
 			inProgress.add(nodeId);
 			for (const r of def.requires ?? []) requires.add(r);
+			// a dependency's prelude goes in FIRST and under ITS key, so a graph holding both
+			// the helper and its user declares the shared function once (GLSL has no overloads
+			// by redefinition — a duplicate is a compile error)
+			for (const dep of def.preludeDeps ?? []) {
+				const depDef = shaderNodeDef(dep);
+				for (const inner of depDef?.preludeDeps ?? []) {
+					const innerDef = shaderNodeDef(inner);
+					if (innerDef?.prelude && !preludes.has(inner)) preludes.set(inner, innerDef.prelude);
+				}
+				if (depDef?.prelude && !preludes.has(dep)) preludes.set(dep, depDef.prelude);
+			}
 			if (def.prelude) preludes.set(def.key, def.prelude);
 
 			// params: a uniform-backed one becomes a live uniform, a plain one a literal
@@ -473,6 +503,55 @@ export function compilePostGraphToIR(graph) {
 	};
 }
 
+/**
+ * 65 M2 — compile a BACKGROUND graph document into the layer material's fragment shader.
+ *
+ * ONE pass, stage 'background', over the Background output node's `color` (+ `alpha`).
+ * The result is a complete fragment shader for a THREE.ShaderMaterial whose vertex shader
+ * (backgroundLayer.js) writes the `vUv` varying: the graph's preludes, its own uniform
+ * declarations, and a `main` writing gl_FragColor through three's colour-space chunk. The
+ * layer uniforms (shared clock, pointer, scroll, aspect, resolution) are declared by the
+ * material for every graph, so they are left out of the declarations here — and
+ * `usesPointer` / `usesScroll` / `usesClock` tell the layer which inputs are worth feeding.
+ * @param {{nodes: any[], edges: any[]}} graph
+ * @returns {{ok: boolean, ir?: {fragment: string, uniforms: any[], usesClock: boolean, usesPointer: boolean, usesScroll: boolean, hasAlpha: boolean, requires: string[]}, errors?: string[]}}
+ */
+export function compileBackgroundGraphToIR(graph) {
+	const { output, errors, uniforms, preludes, makePass } = createCompiler(graph, BACKGROUND_OUTPUT_NODE);
+	if (!output) return { ok: false, errors: ['The graph has no Background output node.'] };
+	const pass = makePass('background');
+	const taps = pass.walkTaps(BACKGROUND_TAP_TYPES);
+	if (!taps.color && !errors.length)
+		errors.push("Nothing is connected to the Background output's colour, so the layer would draw nothing.");
+	if (errors.length) return { ok: false, errors };
+	const types = new Set((graph?.nodes ?? []).map((/** @type {any} */ n) => n?.type));
+	const list = [...uniforms.values()].filter((u) => !BACKGROUND_BUILTIN_UNIFORMS.includes(u.name));
+	const decls = list.map((u) => 'uniform ' + u.type + ' ' + u.name + ';').join('\n');
+	const fragment =
+		'varying vec2 vUv;\n' +
+		'uniform float uShaderTime;\nuniform vec4 uPointer;\nuniform vec2 uScroll;\nuniform float uAspect;\n' +
+		'uniform vec2 resolution;\nuniform vec2 texelSize;\n' +
+		[...preludes.values()].join('\n') +
+		(decls ? decls + '\n' : '') +
+		'void main() {\n\t' +
+		pass.statements.join('\n\t') +
+		'\n\tgl_FragColor = vec4(' + taps.color + ', clamp(' + (taps.alpha ?? '1.0') + ', 0.0, 1.0));\n' +
+		'\t#include <colorspace_fragment>\n}';
+	return {
+		ok: true,
+		ir: {
+			fragment,
+			uniforms: list,
+			usesClock: pass.requires.has('time'),
+			usesPointer: types.has('pointer'),
+			usesScroll: types.has('scroll'),
+			// a wired alpha needs BLENDING (the layer material goes transparent)
+			hasAlpha: !!taps.alpha,
+			requires: [...pass.requires]
+		}
+	};
+}
+
 /** node ids can contain anything; GLSL identifiers cannot. @param {string} id */
 function safe(id) {
 	return String(id).replace(/[^A-Za-z0-9_]/g, '_');
diff --git a/src/lib/shaderGraph.js b/src/lib/shaderGraph.js
index 7486223bb..ceb9743b8 100644
--- a/src/lib/shaderGraph.js
+++ b/src/lib/shaderGraph.js
@@ -37,7 +37,7 @@ export const SCENE_GRAPH_KEY = 'scene';
  * @typedef {object} ShaderGraphDoc
  * @property {any[]} nodes
  * @property {any[]} edges
- * @property {'surface'|'post'} domain
+ * @property {'surface'|'post'|'background'} domain
  * @property {string} backend
  * @property {number} changedAt
  */
@@ -81,7 +81,8 @@ export function normalizeShaderGraph(doc) {
 			data: node?.data ?? {}
 		})),
 		edges: Array.isArray(doc?.edges) ? doc.edges : [],
-		domain: doc?.domain === 'post' ? 'post' : 'surface',
+		// 65 M2: 'background' is the third domain (the backgroundLayer document)
+		domain: doc?.domain === 'post' ? 'post' : doc?.domain === 'background' ? 'background' : 'surface',
 		backend: typeof doc?.backend === 'string' ? doc.backend : INJECT_SHADER_BACKEND,
 		changedAt: Number(doc?.changedAt) || 0
 	};
@@ -243,6 +244,25 @@ export function registerPostDomain(fn) {
 	};
 }
 
+/** 65 M2: compile paths for the OTHER non-material domains, by domain name — the post hook's
+ * shape without a new export per domain. @type {Map<string, (key: string) => any>} */
+const domainHooks = new Map();
+
+/**
+ * Install a domain's compiler (65 M2: `background`, registered by backgroundLayer). Like the
+ * post hook, a document of that domain drives no object, so the material path must never see
+ * it; a DELETED document still reaches the hook (doc null) so the domain can tear down.
+ * @param {string} domain @param {(key: string) => any} fn @param {(key: string) => boolean} [owns]
+ *   which keys belong to it when the document is already gone
+ */
+export function registerGraphDomain(domain, fn, owns) {
+	const entry = Object.assign((/** @type {string} */ key) => fn(key), { owns });
+	domainHooks.set(domain, entry);
+	return () => {
+		if (domainHooks.get(domain) === entry) domainHooks.delete(domain);
+	};
+}
+
 /** Is this key a post-domain document (by its own `domain`, so the prefix is a
  * convention and not the truth)? @param {string} key */
 export function isPostDomain(key) {
@@ -262,6 +282,10 @@ export async function compileAndApply(key) {
 	// graph's own teardown runs.
 	if ((doc?.domain === 'post' || (!doc && postDomainHook && key.startsWith('post:'))) && postDomainHook)
 		return postDomainHook(key) ?? { ok: true };
+	// 65 M2: the background (and any later non-material domain) — the same rule
+	for (const [domain, hook] of domainHooks) {
+		if (doc ? doc.domain === domain : /** @type {any} */ (hook).owns?.(key)) return hook(key) ?? { ok: true };
+	}
 	if (!doc) {
 		// deleted: put every target back to its own material
 		for (const object of targetsFor(key)) detachFrom(object);
@@ -792,8 +816,12 @@ export function shaderGraphsSnapshot(opts = {}) {
 	/** @type {Record<string, any>} */
 	const out = {};
 	for (const [key, doc] of Object.entries(all)) {
-		if (key !== SCENE_GRAPH_KEY && opts.pruneMissing?.(key)) continue;
-		out[key] = normalizeShaderGraph(doc);
+		const normal = normalizeShaderGraph(doc);
+		// only an OBJECT's own graph can be orphaned: a post (`post:<id>`) or background
+		// document belongs to the scene, and pruning it because no object has its key as a
+		// uuid silently dropped every post graph from autosave and session saves (65 M2)
+		if (key !== SCENE_GRAPH_KEY && normal.domain === 'surface' && opts.pruneMissing?.(key)) continue;
+		out[key] = normal;
 	}
 	return out;
 }
diff --git a/tests/e2e/background-layer.test.cjs b/tests/e2e/background-layer.test.cjs
new file mode 100644
index 000000000..997ece269
--- /dev/null
+++ b/tests/e2e/background-layer.test.cjs
@@ -0,0 +1,208 @@
+// 65 M2 — THE BACKGROUND LAYER renders every preset, and the POINTER moves it.
+//
+// The packs set is served from the lane's packs checkout (BACKGROUNDS_DIR, else the sibling
+// packs-lane-65-visuals / packs folder) by a route on PACKS_BASE/backgrounds/, so the suite
+// proves the app's own loader against the files the packs PR ships — not a copy.
+//   1. no background: nothing drawn (the inert path), a baseline frame of the empty view
+//   2. per preset (the five packs presets + the built-in): applied through the loader, it
+//      compiles, draws full screen, changes most of the frame; with the CLOCK HELD, two frames
+//      at one pointer position are identical (control) and a pointer move changes the frame
+//   3. On a plane: the layer follows a picked object; deleting the object hides it, undo
+//      brings it back
+//   4. scene data: the document survives the SAVE snapshot (the post/background prune fix —
+//      on v1.41.0 `pruneMissing` dropped every non-object key), and a selection carries none
+//   5. View ▸ Overrides ▸ Scene shaders off hides it here, on hides it again
+//   6. the Configure Scene section drives the same document (preset picker + mode)
+// Run: APP_URL=https://localhost:5461/ node tests/e2e/background-layer.test.cjs
+const fs = require('fs');
+const path = require('path');
+const h = require('./helpers.cjs');
+
+const EVIDENCE = process.env.EVIDENCE_DIR || path.join(process.env.HOME, '.code/lanes-30/after-65/65-visuals');
+const PRESETS = ['mesh-gradient', 'silk-gradient', 'noise-flow', 'metaballs', 'grain-dither'];
+
+function backgroundsDir() {
+	return [
+		process.env.BACKGROUNDS_DIR,
+		path.join(__dirname, '../../../packs-lane-65-visuals/backgrounds'),
+		path.join(__dirname, '../../../packs/backgrounds')
+	]
+		.filter(Boolean)
+		.find((d) => fs.existsSync(path.join(d, 'index.json')));
+}
+
+const bg = (page) => page.evaluate(() => window.__stores.backgroundLayer.backgroundLayerDebug());
+const errorsOf = (page) =>
+	page.evaluate(() => {
+		let e = null;
+		window.__stores.shaderGraph.shaderErrors.subscribe((v) => (e = v))();
+		return e.background ?? [];
+	});
+
+/** a chrome-free band of the canvas: the middle 60 % horizontally, upper-middle vertically */
+async function band(page) {
+	const r = await page.evaluate(() => {
+		let renderer;
+		window.__stores.globalRenderer.subscribe((v) => (renderer = v))();
+		const b = renderer.domElement.getBoundingClientRect();
+		return { x: b.x, y: b.y, w: b.width, h: b.height };
+	});
+	return { x: Math.round(r.x + r.w * 0.2), y: Math.round(r.y + r.h * 0.22), width: Math.round(r.w * 0.6), height: Math.round(r.h * 0.4) };
+}
+
+h.run(async () => {
+	const dir = backgroundsDir();
+	if (!dir) throw new Error('no backgrounds/ checkout — set BACKGROUNDS_DIR');
+	fs.mkdirSync(EVIDENCE, { recursive: true });
+	const browser = await h.launch({ args: h.GPU_ARGS });
+	const A = await h.setupPage(browser, 'A', { context: { viewport: { width: 1280, height: 800 } } });
+	const page = A.page;
+	await h.answerRestore(A).catch(() => {});
+	let served = 0;
+	await page.route(/\/backgrounds\/[A-Za-z0-9._-]+\.json(\?.*)?$/, (route) => {
+		const name = new URL(route.request().url()).pathname.split('/').pop();
+		const file = path.join(dir, name);
+		if (!fs.existsSync(file)) return route.fulfill({ status: 404, body: 'missing' });
+		served++;
+		return route.fulfill({ status: 200, contentType: 'application/json', body: fs.readFileSync(file, 'utf8') });
+	});
+	// an empty view: deselect, look at the sky
+	await page.evaluate(() => window.__stores.objectActions?.deselectObject?.());
+
+	console.log('\n=== 1. no background: inert ===');
+	let d = await bg(page);
+	h.check(d.draw === 'none' && !d.visible.screen, '1.1 nothing drawn with no document: ' + JSON.stringify({ draw: d.draw, visible: d.visible }));
+	const clip = await band(page);
+	await page.mouse.move(clip.x + 10, clip.y + 10);
+	const empty = await h.grabFrame(A, clip);
+	fs.writeFileSync(path.join(EVIDENCE, '01-no-background.png'), empty);
+
+	console.log('\n=== 2. every preset renders, and the pointer moves it ===');
+	const list = await page.evaluate(() => window.__stores.backgroundPresets.loadBackgroundPresets({ force: true }));
+	h.check(list.status === 'ready', '2.0 the packs index loads through PACKS_BASE: ' + list.status + ' ' + list.error);
+	h.check(
+		PRESETS.every((k) => list.presets.some((p) => p.key === k && p.source === 'packs')) && list.presets.some((p) => p.source === 'builtin'),
+		'2.0b ...all five packs presets plus the built-in: ' + list.presets.map((p) => p.key).join(', ')
+	);
+	let n = 1;
+	for (const key of [...PRESETS, 'soft-gradient']) {
+		n++;
+		const res = await page.evaluate((k) => window.__stores.backgroundPresets.applyBackgroundPreset(k), key);
+		h.check(res.ok, `2.${n}a ${key}: applied (${res.error ?? 'ok'})`);
+		await h.eventually(() => bg(page), (s) => s.compiled && s.preset === key && s.draw === 'screen', key + ' drawing', 8000);
+		d = await bg(page);
+		const errs = await errorsOf(page);
+		h.check(d.draw === 'screen' && d.visible.screen && errs.length === 0, `2.${n}b ${key}: compiled and drawn full screen, no errors: ` + JSON.stringify({ draw: d.draw, errs }));
+		await page.evaluate(() => window.__stores.backgroundLayer.setBackgroundClockForTest(123.4));
+		await page.mouse.move(clip.x + clip.width * 0.15, clip.y + clip.height * 0.3);
+		await page.waitForTimeout(900);
+		const at1 = await h.grabFrame(A, clip);
+		await page.waitForTimeout(300);
+		const at1b = await h.grabFrame(A, clip);
+		const vsEmpty = await h.frameDelta(page, empty, at1);
+		h.check(vsEmpty.fraction > 0.5, `2.${n}c ${key}: it paints the view (${(vsEmpty.fraction * 100).toFixed(1)} % of the band changed vs no background)`);
+		const still = await h.frameDelta(page, at1, at1b);
+		h.check(still.fraction < 0.01, `2.${n}d ${key}: CONTROL — clock held, pointer still: the frame holds (${(still.fraction * 100).toFixed(2)} % changed)`);
+		await page.mouse.move(clip.x + clip.width * 0.85, clip.y + clip.height * 0.75, { steps: 6 });
+		await page.waitForTimeout(900);
+		const at2 = await h.grabFrame(A, clip);
+		const moved = await h.frameDelta(page, at1, at2);
+		d = await bg(page);
+		h.check(moved.fraction > 0.02, `2.${n}e ${key}: the POINTER moves it (${(moved.fraction * 100).toFixed(1)} % changed; pointer ${d.pointer.x.toFixed(2)},${d.pointer.y.toFixed(2)})`);
+		fs.writeFileSync(path.join(EVIDENCE, `02-${key}.png`), at2);
+		await page.evaluate(() => window.__stores.backgroundLayer.setBackgroundClockForTest(null));
+	}
+	h.check(served >= 6, '2.9 the files came from the packs checkout (' + served + ' served)');
+	// the clock runs again: the background drifts on its own (the shared clock). The built-in
+	// Soft gradient applied last is STILL by design (it moves only with the pointer), so a preset
+	// that reads the clock goes on first — and the premise says so.
+	await page.evaluate(() => window.__stores.backgroundPresets.applyBackgroundPreset('noise-flow'));
+	// the compile is debounced: `preset` changes at once, the IR (and usesClock) a moment later
+	await h.eventually(() => bg(page), (s) => s.compiled && s.preset === 'noise-flow' && s.usesClock, 'noise-flow compiled', 8000).catch(() => {});
+	const clocked = (await bg(page)).usesClock;
+	h.check(clocked === true, 'premise: Noise flow reads the shared clock (usesClock ' + clocked + ')');
+	await page.waitForTimeout(400);
+	const t0 = await h.grabFrame(A, clip);
+	await page.waitForTimeout(1500);
+	const t1 = await h.grabFrame(A, clip);
+	h.check((await h.frameDelta(page, t0, t1)).fraction > 0.02, '2.10 released, the shared clock animates it');
+
+	console.log('\n=== 3. on a plane ===');
+	const uuid = await page.evaluate(() => {
+		const s = window.__stores;
+		s.commandsHandler.sceneCommand('/create box');
+		let group;
+		s.objectsGroup.subscribe((g) => (group = g))();
+		const box = group.children[group.children.length - 1];
+		delete box.userData.physics;
+		let cam;
+		s.globalCamera.subscribe((c) => (cam = c))();
+		const fwd = cam.getWorldDirection(cam.position.clone());
+		box.position.copy(cam.position).addScaledVector(fwd, 4);
+		box.lookAt(cam.position);
+		box.scale.set(2.4, 1.4, 0.05);
+		box.updateMatrixWorld(true);
+		s.objectActions.deselectObject();
+		return box.uuid;
+	});
+	await page.evaluate((u) => window.__stores.backgroundLayer.setBackgroundLayer({ mode: 'plane', target: u }), uuid);
+	await h.eventually(() => bg(page), (s) => s.draw === 'plane', 'plane drawing', 5000);
+	d = await bg(page);
+	h.check(d.draw === 'plane' && d.visible.plane && !d.visible.screen, '3.1 drawn on the picked object, not full screen: ' + JSON.stringify(d.visible));
+	h.check(Math.abs(d.uniforms.aspect - 2.4 / 1.4) < 0.05, '3.2 ...with the plane\'s own aspect (' + d.uniforms.aspect.toFixed(3) + ' ≈ ' + (2.4 / 1.4).toFixed(3) + ')');
+	fs.writeFileSync(path.join(EVIDENCE, '03-on-a-plane.png'), await h.grabFrame(A));
+	await page.evaluate((u) => window.__stores.objectActions.deleteObjectsByUuid([u]), uuid);
+	await h.eventually(() => bg(page), (s) => s.draw === 'none', 'plane gone', 5000).catch(() => {});
+	d = await bg(page);
+	h.check(d.draw === 'none' && !d.visible.plane, '3.3 its object deleted: nothing drawn (no orphan overlay)');
+	await page.evaluate(() => window.__stores.history.undo());
+	await h.eventually(() => bg(page), (s) => s.draw === 'plane', 'plane back', 5000).catch(() => {});
+	d = await bg(page);
+	h.check(d.draw === 'plane', '3.4 undo brings the object back, and the layer with it: ' + d.draw);
+	await page.evaluate(() => window.__stores.backgroundLayer.setBackgroundLayer({ mode: 'screen' }));
+
+	console.log('\n=== 4. scene data ===');
+	const snap = await page.evaluate(() => {
+		const s = window.__stores;
+		let group;
+		s.objectsGroup.subscribe((g) => (group = g))();
+		const pruneMissing = (id) => !group.getObjectByProperty('uuid', id);
+		const saved = s.shaderGraph.shaderGraphsSnapshot({ pruneMissing });
+		return { keys: Object.keys(saved), layer: saved.background?.layer, preset: saved.background?.preset };
+	});
+	h.check(snap.keys.includes('background') && snap.preset === 'noise-flow', '4.1 the background survives the SAVE snapshot (pruneMissing no longer drops scene documents): ' + JSON.stringify(snap));
+	const sel = await page.evaluate((u) => Object.keys(window.__stores.sessions?.buildSelectionPayload?.('sel', [u])?.shaderGraphs ?? { na: 1 }), uuid);
+	h.check(!sel.includes('background'), '4.2 ...and a SELECTION (a prefab) carries no background: ' + JSON.stringify(sel));
+
+	console.log('\n=== 5. the local override ===');
+	await page.evaluate(() => window.__stores.viewportOverrides?.setRenderLayer?.('shaders', false));
+	await page.waitForTimeout(200);
+	d = await bg(page);
+	h.check(d.draw === 'none', '5.1 View ▸ Overrides ▸ Scene shaders off: not drawn here (' + d.draw + ')');
+	await page.evaluate(() => window.__stores.viewportOverrides?.setRenderLayer?.('shaders', true));
+	await page.waitForTimeout(200);
+	d = await bg(page);
+	h.check(d.draw === 'screen', '5.2 ...on again: drawn (' + d.draw + ')');
+
+	console.log('\n=== 6. Configure Scene ▸ Background ===');
+	await page.evaluate(() => window.__stores.openSceneSection?.('Background'));
+	await page.waitForTimeout(800);
+	const section = page.locator('#background-preset');
+	h.check((await section.count()) > 0, '6.1 the section is in Configure Scene');
+	if (await section.count()) {
+		await section.first().click();
+		await page.waitForTimeout(300);
+		const opt = page.getByRole('option', { name: 'Metaballs' });
+		if (await opt.count()) await opt.first().click();
+		await h.eventually(() => bg(page), (s) => s.preset === 'metaballs', 'picker applied', 6000).catch(() => {});
+		d = await bg(page);
+		h.check(d.preset === 'metaballs', '6.2 picking a preset in the section applies it: ' + d.preset);
+		await page.locator('#background-mode-off').click().catch(() => {});
+		await page.waitForTimeout(300);
+		d = await bg(page);
+		h.check(d.layer?.mode === 'off' && d.draw === 'none', '6.3 Where ▸ Off keeps the document and stops drawing: ' + JSON.stringify({ mode: d.layer?.mode, draw: d.draw }));
+		fs.writeFileSync(path.join(EVIDENCE, '06-section.png'), await page.screenshot());
+		await page.locator('#background-mode-screen').click().catch(() => {});
+	}
+	await h.finish(browser);
+});
diff --git a/tests/e2e/background-presets.test.cjs b/tests/e2e/background-presets.test.cjs
new file mode 100644
index 000000000..43a2959c4
--- /dev/null
+++ b/tests/e2e/background-presets.test.cjs
@@ -0,0 +1,87 @@
+// 65 M2 — EVERY BACKGROUND PRESET LOADS AND COMPILES, with no browser. Reads the packs repo's
+// `backgrounds/` set (BACKGROUNDS_DIR, else a sibling packs checkout) plus core's built-in,
+// runs each through the app's own loader rules (backgroundPresetsCore) and compiler, and — when
+// glslangValidator is installed — compiles the GLSL for real at BOTH budget tiers, wrapped the
+// way three wraps a ShaderMaterial on WebGL2 (GLSL ES 3.00, gl_FragColor -> pc_fragColor).
+//   node tests/e2e/background-presets.test.cjs
+const { pathToFileURL } = require('url');
+const path = require('path');
+const fs = require('fs');
+const os = require('os');
+const { execFileSync } = require('child_process');
+
+let failures = 0;
+function check(ok, label) {
+	console.log((ok ? 'PASS ' : 'FAIL ') + label);
+	if (!ok) failures++;
+}
+const src = (f) => pathToFileURL(path.join(__dirname, '..', '..', 'src', 'lib', f)).href;
+
+function packsDir() {
+	const candidates = [
+		process.env.BACKGROUNDS_DIR,
+		path.join(__dirname, '..', '..', '..', 'packs-lane-65-visuals', 'backgrounds'),
+		path.join(__dirname, '..', '..', '..', 'packs', 'backgrounds')
+	].filter(Boolean);
+	return candidates.find((d) => fs.existsSync(path.join(d, 'index.json'))) ?? null;
+}
+
+function glslang() {
+	try {
+		execFileSync('glslangValidator', ['--version'], { stdio: 'pipe' });
+		return true;
+	} catch {
+		return false;
+	}
+}
+
+(async () => {
+	const { normalizePresetIndex, normalizePresetDoc, builtinPresetDoc, BUILTIN_PRESET_KEY } = await import(src('backgroundPresetsCore.js'));
+	const { compileBackgroundGraphToIR } = await import(src('shaderCompile.js'));
+
+	/** @type {{key: string, raw: any}[]} */
+	const docs = [{ key: BUILTIN_PRESET_KEY, raw: builtinPresetDoc() }];
+	const dir = packsDir();
+	if (dir) {
+		const index = normalizePresetIndex(JSON.parse(fs.readFileSync(path.join(dir, 'index.json'), 'utf8')));
+		check(index.ok && index.presets.length >= 5, 'the packs index lists the five M2 presets: ' + index.presets.map((p) => p.key).join(', '));
+		for (const want of ['mesh-gradient', 'silk-gradient', 'noise-flow', 'metaballs', 'grain-dither'])
+			check(index.presets.some((p) => p.key === want), '  ...including ' + want);
+		for (const p of index.presets) docs.push({ key: p.key, raw: JSON.parse(fs.readFileSync(path.join(dir, p.file), 'utf8')) });
+	} else console.log('SKIP the packs presets: no backgrounds/ checkout (set BACKGROUNDS_DIR)');
+
+	const real = glslang();
+	if (!real) console.log('SKIP the real GLSL compile: glslangValidator not installed');
+	const tmp = fs.mkdtempSync(path.join(os.tmpdir(), 'tp-bg-'));
+	for (const { key, raw } of docs) {
+		const n = normalizePresetDoc(raw, key);
+		check(n.ok, key + ' passes the loader');
+		if (!n.ok) continue;
+		const r = compileBackgroundGraphToIR(n.doc);
+		check(r.ok, key + ' compiles to IR' + (r.ok ? '' : ': ' + r.errors));
+		if (!r.ok) continue;
+		check(r.ir.usesPointer, key + ' reads the pointer (every shipped preset reacts to it)');
+		if (!real) continue;
+		for (const low of [false, true]) {
+			const glsl =
+				'#version 300 es\nprecision highp float;\nprecision highp int;\n' +
+				(low ? '#define TP_OCTAVE_CAP 2\n' : '') +
+				'#define varying in\nout highp vec4 pc_fragColor;\n#define gl_FragColor pc_fragColor\n#define texture2D texture\n' +
+				r.ir.fragment.replace('#include <colorspace_fragment>', '');
+			const file = path.join(tmp, key + (low ? '-low' : '') + '.frag');
+			fs.writeFileSync(file, glsl);
+			let out = '';
+			let ok = true;
+			try {
+				execFileSync('glslangValidator', [file], { stdio: 'pipe' });
+			} catch (err) {
+				ok = false;
+				out = String(err.stdout || err.message);
+			}
+			check(ok, '  ' + key + ' is valid GLSL ES 3.00 at the ' + (low ? 'low' : 'high') + ' tier' + (ok ? '' : ': ' + out));
+		}
+	}
+	fs.rmSync(tmp, { recursive: true, force: true });
+	console.log(failures ? '\n' + failures + ' FAILURES' : '\nALL PASS');
+	process.exit(failures ? 1 : 0);
+})();
diff --git a/tests/e2e/fluid-layer.test.cjs b/tests/e2e/fluid-layer.test.cjs
new file mode 100644
index 000000000..62edcd0d7
--- /dev/null
+++ b/tests/e2e/fluid-layer.test.cjs
@@ -0,0 +1,177 @@
+// 65 M6 — THE SMOKE / INK FLUID LAYER (a scene-look entry) and PARTICLE FLOW FIELDS, on a screen.
+//   1. adding the look entry: the shared sim starts, the effect composites it, steps advance
+//   2. the POINTER stirs it: with the automatic stirrer held, mouse strokes over the LEFT half put
+//      dye on the left (read back from the sim) and change the frame; a still pointer adds none
+//   3. ink composites differently from smoke (same dye, a different frame)
+//   4. the BUDGET: governor level 3 (resolution 72 %) drops the grid to the medium tier; level 6
+//      (scene look off) stops compositing, so the sim stops stepping
+//   5. switching the entry off stops it too (nothing composites = nothing steps)
+//   6. particle FLOW FIELDS: the Flow field preset drives uFlow; the field moves the particles
+//      (frames differ from the same preset with flow 0); the governor's particle cap halves the
+//      integration steps
+// Run: APP_URL=https://localhost:5461/ node tests/e2e/fluid-layer.test.cjs
+const fs = require('fs');
+const path = require('path');
+const h = require('./helpers.cjs');
+
+const EVIDENCE = process.env.EVIDENCE_DIR || path.join(process.env.HOME, '.code/lanes-30/after-65/65-visuals');
+
+const fl = (page) => page.evaluate(() => window.__stores.fluidLayer.fluidLayerDebug());
+const dye = (page) => page.evaluate(() => window.__stores.fluidLayer.readFluidDyeForTest());
+
+async function canvasRect(page) {
+	return page.evaluate(() => {
+		let renderer;
+		window.__stores.globalRenderer.subscribe((v) => (renderer = v))();
+		const b = renderer.domElement.getBoundingClientRect();
+		return { x: b.x, y: b.y, w: b.width, h: b.height };
+	});
+}
+
+/** a stroke of real mouse moves across part of the canvas (fractions of its size) */
+async function stroke(page, r, x0, y0, x1, y1, steps = 24) {
+	await page.mouse.move(r.x + r.w * x0, r.y + r.h * y0);
+	for (let i = 1; i <= steps; i++) {
+		const t = i / steps;
+		await page.mouse.move(r.x + r.w * (x0 + (x1 - x0) * t), r.y + r.h * (y0 + (y1 - y0) * t));
+		await page.waitForTimeout(16);
+	}
+}
+
+h.run(async () => {
+	fs.mkdirSync(EVIDENCE, { recursive: true });
+	const browser = await h.launch({ args: h.GPU_ARGS });
+	const A = await h.setupPage(browser, 'A', { context: { viewport: { width: 1280, height: 800 } } });
+	const page = A.page;
+	await h.answerRestore(A).catch(() => {});
+	await page.evaluate(() => {
+		window.__stores.objectActions?.deselectObject?.();
+		window.__stores.qualityGovernor.setAutoQuality(false);
+		window.__stores.qualityGovernor.governorForTest.reset();
+	});
+	const r = await canvasRect(page);
+	const band = { x: Math.round(r.x + r.w * 0.1), y: Math.round(r.y + r.h * 0.2), width: Math.round(r.w * 0.8), height: Math.round(r.h * 0.55) };
+
+	console.log('\n=== 1. the look entry ===');
+	let d = await fl(page);
+	h.check(d.presenter === 'none' && !d.sim, '1.1 inert with no entry: ' + JSON.stringify({ presenter: d.presenter, sim: d.sim }));
+	const before = await h.grabFrame(A, band);
+	const id = await page.evaluate(() => {
+		const sp = window.__stores.scenePost;
+		sp.setScenePostEnabled(true);
+		return sp.addPostEffect('fluid');
+	});
+	await h.eventually(() => fl(page), (s) => s.presenter === 'post' && s.steps > 10, 'fluid stepping', 10000).catch(() => {});
+	d = await fl(page);
+	h.check(d.presenter === 'post' && d.steps > 10, '1.2 the entry composites the shared sim and it steps: ' + JSON.stringify({ presenter: d.presenter, steps: d.steps }));
+	h.check(d.tier === 'high' && d.simRes === 128 && d.dyeRes === 512 && d.iterations === 20, '1.3 a desktop runs the full grid (128 / 512 / 20): ' + JSON.stringify({ tier: d.tier, simRes: d.simRes, dyeRes: d.dyeRes, it: d.iterations }));
+	h.check(d.sim && d.sim.sim[0] > d.sim.sim[1], '1.4 the grid follows the canvas aspect: ' + JSON.stringify(d.sim));
+	await page.waitForTimeout(1500);
+	const auto = await h.grabFrame(A, band);
+	fs.writeFileSync(path.join(EVIDENCE, 'fluid-01-auto-stir.png'), auto);
+	h.check((await h.frameDelta(page, before, auto)).fraction > 0.01, '1.5 the automatic stirrer alone puts smoke on screen');
+
+	console.log('\n=== 2. the pointer stirs it ===');
+	await page.evaluate((eid) => {
+		const s = window.__stores;
+		s.fluidLayer.holdFluidAutoForTest(true);
+		s.scenePost.setPostEffectParams(eid, { fade: 3 });
+	}, id);
+	// let the auto smoke thin out
+	await page.waitForTimeout(2500);
+	await page.evaluate((eid) => window.__stores.scenePost.setPostEffectParams(eid, { fade: 0.3 }), id);
+	await page.waitForTimeout(400);
+	const still = await dye(page);
+	const quiet = await h.grabFrame(A, band);
+	await page.waitForTimeout(300);
+	const quiet2 = await dye(page);
+	h.check(quiet2 && quiet2.total <= still.total + 1, '2.1 a still pointer adds no dye (' + still.total.toFixed(1) + ' -> ' + quiet2.total.toFixed(1) + ')');
+	const splatsBefore = (await fl(page)).splats;
+	// VERTICAL strokes on the left: a stroke's own push moves the dye along it, so a sideways
+	// stroke throws its smoke towards the other half (measured: left-to-right strokes over
+	// 0.1..0.4 left more dye on the RIGHT) — up and down keeps it where the pointer went
+	for (let i = 0; i < 3; i++) await stroke(page, r, 0.12 + i * 0.1, 0.25, 0.12 + i * 0.1, 0.75);
+	await page.waitForTimeout(150);
+	const stirred = await dye(page);
+	d = await fl(page);
+	h.check(d.splats > splatsBefore + 20, '2.2 mouse moves over the canvas became splats (' + (d.splats - splatsBefore) + ')');
+	h.check(stirred.total > quiet2.total + 5, '2.3 ...which put dye in (' + quiet2.total.toFixed(1) + ' -> ' + stirred.total.toFixed(1) + ')');
+	h.check(stirred.left > stirred.right * 2, '2.4 ...on the LEFT, where the pointer went (left ' + stirred.left.toFixed(1) + ' / right ' + stirred.right.toFixed(1) + ')');
+	const smoke = await h.grabFrame(A, band);
+	fs.writeFileSync(path.join(EVIDENCE, 'fluid-02-pointer-smoke.png'), smoke);
+	h.check((await h.frameDelta(page, quiet, smoke)).fraction > 0.02, '2.5 ...and the frame shows it');
+
+	console.log('\n=== 3. ink ===');
+	await page.evaluate((eid) => window.__stores.scenePost.setPostEffectParams(eid, { style: 'ink', fade: 0 }), id);
+	await h.eventually(() => fl(page), (s) => s.presenter === 'post', 'rebuilt', 5000).catch(() => {});
+	await page.waitForTimeout(400);
+	const ink = await h.grabFrame(A, band);
+	fs.writeFileSync(path.join(EVIDENCE, 'fluid-03-ink.png'), ink);
+	h.check((await h.frameDelta(page, smoke, ink)).fraction > 0.02, '3.1 ink composites the same dye differently from smoke');
+	d = await fl(page);
+	h.check(d.sim !== null, '3.2 ...on the SAME sim (a param edit rebuilds the effect, not the solver): ' + JSON.stringify(d.sim));
+
+	console.log('\n=== 4. the device budget ===');
+	await page.evaluate(() => window.__stores.qualityGovernor.governorForTest.setLevel(3, 1e9));
+	await h.eventually(() => fl(page), (s) => s.tier === 'medium', 'medium tier', 5000).catch(() => {});
+	d = await fl(page);
+	h.check(d.tier === 'medium' && d.simRes === 96 && d.iterations === 14, '4.1 resolution 72 % drops the grid to the medium tier (96 / 384 / 14): ' + JSON.stringify({ tier: d.tier, simRes: d.simRes, it: d.iterations }));
+	await page.evaluate(() => window.__stores.qualityGovernor.governorForTest.setLevel(6, 1e9 + 1000));
+	await page.waitForTimeout(1200);
+	const s1 = (await fl(page)).steps;
+	await page.waitForTimeout(500);
+	d = await fl(page);
+	h.check(d.steps === s1 && d.presenter === 'none', '4.2 with the scene look given up, nothing composites and nothing steps: ' + JSON.stringify({ presenter: d.presenter, steps: [s1, d.steps] }));
+	await page.evaluate(() => window.__stores.qualityGovernor.governorForTest.reset());
+	await h.eventually(() => fl(page), (s) => s.presenter === 'post', 'back', 5000).catch(() => {});
+	d = await fl(page);
+	h.check(d.presenter === 'post' && d.tier === 'high', '4.3 full quality again: back on, full grid: ' + JSON.stringify({ presenter: d.presenter, tier: d.tier }));
+
+	console.log('\n=== 5. switched off ===');
+	await page.evaluate((eid) => window.__stores.scenePost.setPostEffectEnabled(eid, false), id);
+	await page.waitForTimeout(900);
+	const s2 = (await fl(page)).steps;
+	await page.waitForTimeout(400);
+	d = await fl(page);
+	h.check(d.presenter === 'none' && d.steps === s2, '5.1 the entry off: no step, no composite: ' + JSON.stringify({ presenter: d.presenter, steps: [s2, d.steps] }));
+	await page.evaluate((eid) => window.__stores.scenePost.removePostEffect(eid), id);
+
+	console.log('\n=== 6. particle flow fields ===');
+	const uuid = await page.evaluate(() => {
+		const s = window.__stores;
+		s.commandsHandler.sceneCommand('/create sphere');
+		let group;
+		s.objectsGroup.subscribe((g) => (group = g))();
+		const o = group.children[group.children.length - 1];
+		delete o.userData.physics;
+		let cam;
+		s.globalCamera.subscribe((c) => (cam = c))();
+		const fwd = cam.getWorldDirection(cam.position.clone());
+		o.position.copy(cam.position).addScaledVector(fwd, 6);
+		o.scale.setScalar(0.3);
+		o.updateMatrixWorld(true);
+		s.objectActions.deselectObject();
+		s.particleActions.addParticlesPreset(o.uuid, 'flowfield');
+		return o.uuid;
+	});
+	const entryOf = () => page.evaluate((u) => window.__stores.particleRuntime.particleEntries().find((e) => e.uuid === u) ?? null, uuid);
+	await h.eventually(entryOf, (e) => !!e, 'emitter', 6000).catch(() => {});
+	let e = await entryOf();
+	h.check(e && e.flow > 0 && e.flowSteps === 4, '6.1 the Flow field preset drives the field (uFlow ' + e?.flow + ', 4 steps): ' + JSON.stringify(e && { flow: e.flow, steps: e.flowSteps }));
+	await page.waitForTimeout(800);
+	const withFlow = await h.grabFrame(A, band);
+	fs.writeFileSync(path.join(EVIDENCE, 'fluid-06-flowfield.png'), withFlow);
+	await page.evaluate((u) => window.__stores.particleActions.updateObjectParticles(u, { flow: 0 }), uuid);
+	await h.eventually(entryOf, (x) => x && x.flow === 0, 'flow 0', 4000).catch(() => {});
+	await page.waitForTimeout(800);
+	const noFlow = await h.grabFrame(A, band);
+	fs.writeFileSync(path.join(EVIDENCE, 'fluid-06-noflow.png'), noFlow);
+	h.check((await h.frameDelta(page, withFlow, noFlow)).fraction > 0.002, '6.2 the field moves the particles (a frame with flow differs from one without)');
+	await page.evaluate((u) => window.__stores.particleActions.updateObjectParticles(u, { flow: 1 }), uuid);
+	await page.evaluate(() => window.__stores.qualityGovernor.governorForTest.setLevel(8, 2e9));
+	await h.eventually(entryOf, (x) => x && x.flowSteps === 2, 'capped', 5000).catch(() => {});
+	e = await entryOf();
+	h.check(e && e.flowSteps === 2, '6.3 the governor\'s particle cap halves the integration steps (' + e?.flowSteps + ')');
+	await page.evaluate(() => window.__stores.qualityGovernor.governorForTest.reset());
+	await h.finish(browser);
+});
diff --git a/tests/e2e/shader-compile.test.cjs b/tests/e2e/shader-compile.test.cjs
index 538c0796f..49672f607 100644
--- a/tests/e2e/shader-compile.test.cjs
+++ b/tests/e2e/shader-compile.test.cjs
@@ -109,7 +109,7 @@ const edge = (from, to, targetHandle, sourceHandle = 'out') => ({
 	const defs = shaderNodeDefs();
 	// the TERMINAL nodes are the exception: they emit nothing because nothing reads them —
 	// each domain's graph ends at one (P4 added the post half's)
-	const terminals = ['surface', 'postOutput'];
+	const terminals = ['surface', 'postOutput', 'backgroundOutput']; // 65 M2 added the background's
 	const bad = defs.filter((d) => !d.key || !d.label || !d.group || (!terminals.includes(d.key) && !d.emit));
 	check(bad.length === 0, defs.length + ' node defs, all with key/label/group/emit: ' + JSON.stringify(bad.map((d) => d.key)));
 	check(!!shaderNodeDef('surface'), 'the Surface output def exists');
diff --git a/tests/e2e/visuals-perf.cjs b/tests/e2e/visuals-perf.cjs
new file mode 100644
index 000000000..165952879
--- /dev/null
+++ b/tests/e2e/visuals-perf.cjs
@@ -0,0 +1,161 @@
+// 65 M2 + M6 PERFORMANCE PROTOCOL — the fps rows for the shader backgrounds, the smoke layer and the particle
+// flow field, on the desktop and on the Quest profile (IWER, a Quest 3 emulated: the app's own XR path, low
+// tier). Run under `e2e-slot --exclusive` (frame times mean nothing with another browser on the GPU).
+//
+// Chromium runs with the frame-rate limit and vsync OFF, so a frame interval is what the frame COSTS on this
+// GPU (a vsync-capped p50 reads 16.7 ms for everything — the 37-fx lesson). Rows: p50 / p95 frame time over
+// 3 s after a 1 s warm-up, and in the headset renderer.info calls / triangles (XR renders directly, no
+// composer, so the counts are the scene's own). The Quest budget the rows are read against: <= 150 calls,
+// <= 300k triangles, <= 13.9 ms (72 Hz) — the frame time here is the DECK's GPU running the headset's
+// workload at the low tier, a proxy, not a Quest measurement.
+//   APP_URL=https://localhost:5461/ node tests/e2e/visuals-perf.cjs   (OUT=<file.json> to save the rows)
+const fs = require('fs');
+const h = require('./helpers.cjs');
+const iwer = require('./iwer.cjs');
+
+const ARGS = [...h.GPU_ARGS, '--disable-frame-rate-limit', '--disable-gpu-vsync'];
+const PRESETS = ['soft-gradient', 'mesh-gradient', 'silk-gradient', 'noise-flow', 'metaballs', 'grain-dither'];
+const BACKGROUNDS_DIR = process.env.BACKGROUNDS_DIR || require('path').join(__dirname, '../../../packs-lane-65-visuals/backgrounds');
+
+/** p50/p95 of frame intervals over `ms`, plus renderer.info (per frame) — in XR on the session's rAF */
+const measure = (page, ms = 3000) =>
+	page.evaluate(async (ms) => {
+		let r;
+		window.__stores.globalRenderer.subscribe((v) => (r = v))();
+		const session = r.xr.isPresenting ? r.xr.getSession() : null;
+		const raf = (cb) => (session ? session.requestAnimationFrame(cb) : requestAnimationFrame(cb));
+		await new Promise((ok) => setTimeout(ok, 1000));
+		const times = [];
+		let last = 0;
+		let calls = 0;
+		let tris = 0;
+		let n = 0;
+		await new Promise((done) => {
+			const end = performance.now() + ms;
+			const tick = (t) => {
+				if (last) times.push(t - last);
+				last = t;
+				calls += r.info.render.calls;
+				tris += r.info.render.triangles;
+				n++;
+				if (performance.now() < end) raf(tick);
+				else done();
+			};
+			raf(tick);
+		});
+		times.sort((a, b) => a - b);
+		const q = (p) => +times[Math.min(times.length - 1, Math.floor(times.length * p))].toFixed(2);
+		return { frames: times.length, p50: q(0.5), p95: q(0.95), calls: Math.round(calls / n), tris: Math.round(tris / n) };
+	}, ms);
+
+const setBackground = (page, key) =>
+	page.evaluate(async (key) => {
+		const s = window.__stores;
+		if (!key) return s.backgroundLayer.removeBackground();
+		return s.backgroundPresets.applyBackgroundPreset(key);
+	}, key);
+
+async function setup(browser, label, opts = {}) {
+	const A = await h.setupPage(browser, label, { context: { viewport: { width: 1280, height: 800 } }, ...opts });
+	await h.answerRestore(A).catch(() => {});
+	await A.page.route(/\/backgrounds\/[A-Za-z0-9._-]+\.json(\?.*)?$/, (route) => {
+		const name = new URL(route.request().url()).pathname.split('/').pop();
+		const file = require('path').join(BACKGROUNDS_DIR, name);
+		if (!fs.existsSync(file)) return route.fulfill({ status: 404, body: 'missing' });
+		return route.fulfill({ status: 200, contentType: 'application/json', body: fs.readFileSync(file, 'utf8') });
+	});
+	await A.page.evaluate(() => {
+		const s = window.__stores;
+		s.objectActions?.deselectObject?.();
+		s.qualityGovernor.setAutoQuality(false);
+		s.qualityGovernor.governorForTest.reset();
+	});
+	return A;
+}
+
+h.run(async () => {
+	const rows = [];
+	const row = (profile, what, m) => {
+		rows.push({ profile, what, ...m });
+		console.log(`${profile.padEnd(8)} ${what.padEnd(34)} p50 ${String(m.p50).padStart(6)} ms  p95 ${String(m.p95).padStart(6)} ms  calls ${String(m.calls).padStart(4)}  tris ${String(m.tris).padStart(7)}  (${m.frames} frames)`);
+	};
+	const browser = await h.launch({ args: ARGS });
+
+	console.log('\n=== desktop (1280 x 800, high tier) ===');
+	const D = await setup(browser, 'D');
+	let page = D.page;
+	row('desktop', 'empty scene (baseline)', await measure(page));
+	for (const key of PRESETS) {
+		await setBackground(page, key);
+		await h.eventually(() => page.evaluate(() => window.__stores.backgroundLayer.backgroundLayerDebug()), (s) => s.compiled && s.draw === 'screen', key, 8000).catch(() => {});
+		row('desktop', 'background ' + key, await measure(page));
+	}
+	await setBackground(page, null);
+	const fid = await page.evaluate(() => {
+		const sp = window.__stores.scenePost;
+		sp.setScenePostEnabled(true);
+		return sp.addPostEffect('fluid');
+	});
+	row('desktop', 'smoke layer (128/512/20)', await measure(page));
+	await setBackground(page, 'metaballs');
+	row('desktop', 'smoke layer + metaballs', await measure(page));
+	await page.evaluate((id) => window.__stores.scenePost.removePostEffect(id), fid);
+	await setBackground(page, null);
+	await page.evaluate(() => {
+		const s = window.__stores;
+		let cam;
+		s.globalCamera.subscribe((c) => (cam = c))();
+		const fwd = cam.getWorldDirection(cam.position.clone());
+		const right = fwd.clone().cross(cam.up).normalize();
+		window.__perfEmitters = [];
+		for (let i = 0; i < 8; i++) {
+			s.commandsHandler.sceneCommand('/create sphere');
+			let group;
+			s.objectsGroup.subscribe((g) => (group = g))();
+			const o = group.children[group.children.length - 1];
+			delete o.userData.physics;
+			o.scale.setScalar(0.2);
+			o.position.copy(cam.position).addScaledVector(fwd, 6).addScaledVector(right, (i - 3.5) * 0.9);
+			o.updateMatrixWorld(true);
+			s.particleActions.addParticlesPreset(o.uuid, 'flowfield');
+			window.__perfEmitters.push(o.uuid);
+		}
+		s.objectActions.deselectObject();
+	});
+	row('desktop', '8 Flow field emitters (trails)', await measure(page));
+	await page.evaluate(() => window.__perfEmitters.forEach((u) => window.__stores.particleActions.updateObjectParticles(u, { flow: 0 })));
+	row('desktop', '8 same emitters, flow 0', await measure(page));
+	await D.ctx.close().catch(() => {});
+
+	console.log('\n=== Quest profile (IWER Quest 3, low tier) ===');
+	const Q = await setup(browser, 'Q', { init: iwer.initScript(), context: { viewport: { width: 1280, height: 720 } } });
+	page = Q.page;
+	await iwer.enter(page);
+	await iwer.pose(page, 'head', [0, 1.6, 0], { yaw: 0 });
+	await iwer.pose(page, 'right', [0.2, 1.4, -0.3], { yaw: 0.1, pitch: 0.05 });
+	await page.evaluate(() => window.__stores.qualityGovernor.governorForTest.reset());
+	row('quest', 'empty scene (baseline)', await measure(page));
+	for (const key of PRESETS) {
+		await setBackground(page, key);
+		await iwer.frames(page, 30);
+		const b = await page.evaluate(() => window.__stores.backgroundLayer.backgroundLayerDebug());
+		row('quest', `background ${key} (${b.draw}, cap ${b.octaveCap})`, await measure(page));
+	}
+	await setBackground(page, null);
+	await page.evaluate(() => {
+		const sp = window.__stores.scenePost;
+		sp.setScenePostEnabled(true);
+		sp.addPostEffect('fluid');
+	});
+	await iwer.frames(page, 30);
+	const f = await page.evaluate(() => window.__stores.fluidLayer.fluidLayerDebug());
+	row('quest', `smoke panel (${f.simRes}/${f.dyeRes}/${f.iterations})`, await measure(page));
+	await setBackground(page, 'metaballs');
+	await iwer.frames(page, 30);
+	row('quest', 'smoke panel + metaballs sphere', await measure(page));
+
+	const budget = rows.filter((r) => r.profile === 'quest');
+	for (const r of budget) h.check(r.calls <= 150 && r.tris <= 300000, `Quest budget calls/tris: ${r.what} (${r.calls} calls, ${r.tris} tris)`);
+	if (process.env.OUT) fs.writeFileSync(process.env.OUT, JSON.stringify(rows, null, 2));
+	await h.finish(browser);
+});
diff --git a/tests/e2e/visuals-two-peer.test.cjs b/tests/e2e/visuals-two-peer.test.cjs
new file mode 100644
index 000000000..1c61f9d9e
--- /dev/null
+++ b/tests/e2e/visuals-two-peer.test.cjs
@@ -0,0 +1,99 @@
+// 65 M2 + M6 — TWO PEERS: the background document and the smoke look entry are SCENE DATA (they ride the
+// existing shader-graph and scene-look sync), while the pointer that moves a background and the smoke a
+// pointer stirs are each viewer's own.
+//   1. A applies a background preset: B receives the same document (preset, layer) and draws it
+//   2. A switches it to Off and back: B follows; A removes it: B's goes too
+//   3. a late JOINER (C dials after the background exists) receives it in the handshake
+//   4. A adds the smoke entry: B composites it; A's pointer strokes add dye on A only
+//   5. the pointer is local: A's pointer moves A's background pointer, not B's
+// Run: APP_URL=https://localhost:5461/ node tests/e2e/visuals-two-peer.test.cjs
+const h = require('./helpers.cjs');
+
+const bg = (p) => p.page.evaluate(() => window.__stores.backgroundLayer.backgroundLayerDebug());
+const fl = (p) => p.page.evaluate(() => window.__stores.fluidLayer.fluidLayerDebug());
+const dye = (p) => p.page.evaluate(() => window.__stores.fluidLayer.readFluidDyeForTest());
+
+async function rectOf(p) {
+	return p.page.evaluate(() => {
+		let r;
+		window.__stores.globalRenderer.subscribe((v) => (r = v))();
+		const b = r.domElement.getBoundingClientRect();
+		return { x: b.x, y: b.y, w: b.width, h: b.height };
+	});
+}
+
+h.run(async () => {
+	const browser = await h.launch({ args: h.GPU_ARGS });
+	const opts = { context: { viewport: { width: 1100, height: 720 } } };
+	const A = await h.setupPage(browser, 'A', opts);
+	const B = await h.setupPageQuiet(browser, 'B', [A], opts);
+	for (const p of [A, B]) {
+		await h.answerRestore(p).catch(() => {});
+		await p.page.evaluate(() => window.__stores.qualityGovernor.setAutoQuality(false));
+	}
+	await h.connect(B, A);
+
+	console.log('\n=== 1. the background replicates ===');
+	const r = await A.page.evaluate(() => window.__stores.backgroundPresets.applyBackgroundPreset('soft-gradient'));
+	h.check(r.ok, '1.0 A applies the built-in preset');
+	await h.eventually(() => bg(B), (s) => s.preset === 'soft-gradient' && s.draw === 'screen', 'B has it', 15000).catch(() => {});
+	let b = await bg(B);
+	h.check(b.preset === 'soft-gradient' && b.draw === 'screen' && b.compiled, '1.1 B receives the document and draws it: ' + JSON.stringify({ preset: b.preset, draw: b.draw, compiled: b.compiled }));
+
+	console.log('\n=== 2. edits and removal follow ===');
+	await A.page.evaluate(() => window.__stores.backgroundLayer.setBackgroundLayer({ mode: 'off' }));
+	await h.eventually(() => bg(B), (s) => s.layer?.mode === 'off', 'B off', 10000).catch(() => {});
+	b = await bg(B);
+	h.check(b.layer?.mode === 'off' && b.draw === 'none', '2.1 Off on A: B keeps the document and stops drawing: ' + JSON.stringify({ mode: b.layer?.mode, draw: b.draw }));
+	await A.page.evaluate(() => window.__stores.backgroundLayer.setBackgroundLayer({ mode: 'screen' }));
+	await h.eventually(() => bg(B), (s) => s.draw === 'screen', 'B on', 10000).catch(() => {});
+	h.check((await bg(B)).draw === 'screen', '2.2 back on: B draws again');
+
+	console.log('\n=== 3. a late joiner ===');
+	const C = await h.setupPageQuiet(browser, 'C', [A, B], opts);
+	await h.answerRestore(C).catch(() => {});
+	await h.connect(C, A);
+	await h.eventually(() => bg(C), (s) => s.preset === 'soft-gradient' && s.draw === 'screen', 'C has it', 20000).catch(() => {});
+	const c = await bg(C);
+	h.check(c.preset === 'soft-gradient' && c.draw === 'screen', '3.1 C, dialing after the background exists, receives it: ' + JSON.stringify({ preset: c.preset, draw: c.draw }));
+	await C.ctx.close().catch(() => {});
+
+	console.log('\n=== 4. the smoke entry is shared, the smoke is not ===');
+	await A.page.evaluate(() => {
+		const sp = window.__stores.scenePost;
+		sp.setScenePostEnabled(true);
+		const id = sp.addPostEffect('fluid');
+		sp.setPostEffectParams(id, { auto: false, fade: 0.2 });
+	});
+	await h.eventually(() => fl(B), (s) => s.presenter === 'post', 'B smoke', 15000).catch(() => {});
+	h.check((await fl(B)).presenter === 'post', '4.1 B receives the look entry and composites the smoke');
+	await A.page.waitForTimeout(600);
+	const a0 = await dye(A);
+	const b0 = await dye(B);
+	const ra = await rectOf(A);
+	await A.page.mouse.move(ra.x + ra.w * 0.2, ra.y + ra.h * 0.5);
+	for (let i = 1; i <= 30; i++) {
+		await A.page.mouse.move(ra.x + ra.w * (0.2 + 0.6 * (i / 30)), ra.y + ra.h * (0.5 + 0.1 * Math.sin(i / 4)));
+		await A.page.waitForTimeout(16);
+	}
+	await A.page.waitForTimeout(200);
+	const a1 = await dye(A);
+	const b1 = await dye(B);
+	h.check(a1.total > a0.total + 5, '4.2 A\'s pointer stirs A\'s smoke (' + a0.total.toFixed(1) + ' -> ' + a1.total.toFixed(1) + ')');
+	h.check(b1.total <= b0.total + 1, '4.3 ...and none of it reaches B (' + b0.total.toFixed(1) + ' -> ' + b1.total.toFixed(1) + ')');
+
+	console.log('\n=== 5. the background pointer is local ===');
+	const pB0 = (await bg(B)).pointer;
+	await A.page.mouse.move(ra.x + ra.w * 0.9, ra.y + ra.h * 0.1);
+	await A.page.waitForTimeout(800);
+	const pA = (await bg(A)).pointer;
+	const pB1 = (await bg(B)).pointer;
+	h.check(pA.x > 0.7, '5.1 A\'s pointer moves A\'s background pointer (x ' + pA.x.toFixed(3) + ')');
+	h.check(Math.abs(pB1.x - pB0.x) < 1e-6 && Math.abs(pB1.y - pB0.y) < 1e-6, '5.2 ...B\'s does not move (' + JSON.stringify([pB0.x, pB1.x]) + ')');
+
+	await A.page.evaluate(() => window.__stores.backgroundLayer.removeBackground());
+	await h.eventually(() => bg(B), (s) => !s.preset && s.draw === 'none', 'B removed', 10000).catch(() => {});
+	b = await bg(B);
+	h.check(b.preset === null && b.draw === 'none', '5.3 A removes the background: B\'s is gone too: ' + JSON.stringify({ preset: b.preset, draw: b.draw }));
+	await h.finish(browser);
+});
diff --git a/tests/e2e/visuals-xr-iwer.test.cjs b/tests/e2e/visuals-xr-iwer.test.cjs
new file mode 100644
index 000000000..53fee094a
--- /dev/null
+++ b/tests/e2e/visuals-xr-iwer.test.cjs
@@ -0,0 +1,115 @@
+// 65 M2 + M6 — THE QUEST PROFILE: the shader background and the smoke layer in a headset, on IWER
+// (48 G2: the app's own XR path, a Quest 3 emulated).
+//   1. on the screen first: the background draws full screen at the high tier (octave cap 8), the
+//      smoke is a look entry composited by the post stack
+//   2. in the headset: the background becomes the big SPHERE at the LOW tier (octave cap 2 — the
+//      budget fallback), the smoke becomes a world PANEL ahead of the viewer on the low grid
+//      (64 / 256 / 8), under background-root (never a scene object)
+//   3. the right controller's ray moves the background's pointer (aim left vs right)
+//   4. sweeping a controller ray across the panel stirs it (splats + dye)
+//   5. the Quest budget: once the governor caps particles, the headset gives up the smoke entirely
+//      (panel hidden, nothing steps); the background stays (at low)
+//   6. leaving the headset: the screen effect takes over again, the background back to full screen
+// Run: APP_URL=https://localhost:5461/ node tests/e2e/visuals-xr-iwer.test.cjs
+const fs = require('fs');
+const path = require('path');
+const h = require('./helpers.cjs');
+const iwer = require('./iwer.cjs');
+
+const EVIDENCE = process.env.EVIDENCE_DIR || path.join(process.env.HOME, '.code/lanes-30/after-65/65-visuals');
+const bg = (page) => page.evaluate(() => window.__stores.backgroundLayer.backgroundLayerDebug());
+const fl = (page) => page.evaluate(() => window.__stores.fluidLayer.fluidLayerDebug());
+
+h.run(async () => {
+	fs.mkdirSync(EVIDENCE, { recursive: true });
+	const browser = await h.launch({ args: h.GPU_ARGS });
+	const A = await h.setupPage(browser, 'A', { init: iwer.initScript(), context: { viewport: { width: 1280, height: 720 } } });
+	const page = A.page;
+	await h.answerRestore(A).catch(() => {});
+
+	console.log('\n=== 1. on the screen ===');
+	const applied = await page.evaluate(async () => {
+		const s = window.__stores;
+		s.qualityGovernor.setAutoQuality(false);
+		s.qualityGovernor.governorForTest.reset();
+		const r = await s.backgroundPresets.applyBackgroundPreset('soft-gradient');
+		s.scenePost.setScenePostEnabled(true);
+		s.scenePost.addPostEffect('fluid');
+		return r;
+	});
+	h.check(applied.ok, '1.0 the built-in background applies: ' + JSON.stringify(applied));
+	await h.eventually(() => bg(page), (s) => s.draw === 'screen' && s.compiled, 'bg compiled', 8000).catch(() => {});
+	let b = await bg(page);
+	h.check(b.draw === 'screen' && b.tier === 'high' && b.octaveCap === 8, '1.1 full screen at the high tier, octave cap 8: ' + JSON.stringify({ draw: b.draw, tier: b.tier, cap: b.octaveCap }));
+	await h.eventually(() => fl(page), (s) => s.presenter === 'post', 'fluid post', 8000).catch(() => {});
+	let f = await fl(page);
+	h.check(f.presenter === 'post' && f.tier === 'high', '1.2 the smoke composites as a look entry at the high tier: ' + JSON.stringify({ presenter: f.presenter, tier: f.tier }));
+
+	console.log('\n=== 2. in the headset ===');
+	await iwer.enter(page);
+	await iwer.pose(page, 'head', [0, 1.6, 0], { yaw: 0 });
+	await iwer.frames(page, 20);
+	await page.evaluate(() => window.__stores.qualityGovernor.governorForTest.reset());
+	await iwer.frames(page, 20);
+	b = await bg(page);
+	h.check(b.draw === 'sphere' && b.visible.sphere && !b.visible.screen, '2.1 the background becomes the sphere around you (never a head-locked quad): ' + JSON.stringify({ draw: b.draw, visible: b.visible }));
+	h.check(b.tier === 'low' && b.octaveCap === 2, '2.2 ...at the LOW tier, octave cap 2 (the Quest budget): ' + JSON.stringify({ tier: b.tier, cap: b.octaveCap }));
+	f = await fl(page);
+	h.check(f.presenter === 'panel' && f.panel?.visible && f.panel?.parent === 'background-root', '2.3 the smoke becomes a world panel under background-root: ' + JSON.stringify({ presenter: f.presenter, panel: f.panel }));
+	h.check(f.tier === 'low' && f.simRes === 64 && f.dyeRes === 256 && f.iterations === 8, '2.4 ...on the low grid (64 / 256 / 8): ' + JSON.stringify({ tier: f.tier, simRes: f.simRes, dyeRes: f.dyeRes, it: f.iterations }));
+	const s0 = f.steps;
+	await iwer.frames(page, 20);
+	f = await fl(page);
+	h.check(f.steps > s0 + 10, '2.5 ...stepped by the XR frame loop (' + s0 + ' -> ' + f.steps + ')');
+
+	console.log('\n=== 3. the controller moves the background pointer ===');
+	const aim = async (yaw) => {
+		await iwer.pose(page, 'right', [0.2, 1.4, -0.3], { yaw, pitch: 0.05 });
+		await iwer.pose(page, 'left', [-0.2, 1.4, -0.3], { yaw, pitch: 0.05 });
+		await iwer.frames(page, 40);
+		return (await bg(page)).pointer;
+	};
+	const pl = await aim(0.6);
+	const pr = await aim(-0.6);
+	h.check(Math.abs(pl.x - pr.x) > 0.05, '3.1 aiming left vs right moves the pointer on the sphere (x ' + pl.x.toFixed(3) + ' vs ' + pr.x.toFixed(3) + ')');
+
+	console.log('\n=== 4. a controller ray stirs the panel ===');
+	await page.evaluate(() => window.__stores.fluidLayer.holdFluidAutoForTest(true));
+	const splats0 = (await fl(page)).splats;
+	const dye0 = await page.evaluate(() => window.__stores.fluidLayer.readFluidDyeForTest());
+	for (let i = 0; i <= 20; i++) {
+		const yaw = 0.35 - (0.7 * i) / 20;
+		await iwer.pose(page, 'right', [0.2, 1.4, -0.3], { yaw, pitch: 0.05 });
+		await iwer.frames(page, 2);
+	}
+	f = await fl(page);
+	const dye1 = await page.evaluate(() => window.__stores.fluidLayer.readFluidDyeForTest());
+	h.check(f.splats > splats0 + 10, '4.1 sweeping the ray across the panel splats (' + (f.splats - splats0) + ')');
+	h.check(dye1 && dye0 && dye1.total > dye0.total + 2, '4.2 ...and puts dye in (' + dye0?.total.toFixed(1) + ' -> ' + dye1?.total.toFixed(1) + ')');
+	await page.evaluate(() => window.__stores.fluidLayer.holdFluidAutoForTest(false));
+	await page.screenshot({ path: path.join(EVIDENCE, 'xr-panel-mirror.png') }).catch(() => {});
+
+	console.log('\n=== 5. the Quest budget fallback ===');
+	await page.evaluate(() => window.__stores.qualityGovernor.governorForTest.setLevel(8, 1e9));
+	await iwer.frames(page, 20);
+	const s1 = (await fl(page)).steps;
+	await iwer.frames(page, 20);
+	f = await fl(page);
+	h.check(f.presenter === 'none' && !f.panel?.visible && f.steps === s1, '5.1 particles capped in a headset: the smoke is given up (panel hidden, no steps): ' + JSON.stringify({ presenter: f.presenter, panel: f.panel, steps: [s1, f.steps] }));
+	b = await bg(page);
+	h.check(b.draw === 'sphere' && b.tier === 'low', '5.2 ...the background stays, at low: ' + JSON.stringify({ draw: b.draw, tier: b.tier }));
+	await page.evaluate(() => window.__stores.qualityGovernor.governorForTest.reset());
+	await iwer.frames(page, 20);
+	f = await fl(page);
+	h.check(f.presenter === 'panel' && f.panel?.visible, '5.3 full quality again: the panel is back: ' + f.presenter);
+
+	console.log('\n=== 6. out of the headset ===');
+	await iwer.exit(page);
+	await page.waitForTimeout(800);
+	b = await bg(page);
+	h.check(b.draw === 'screen' && b.tier === 'high' && b.octaveCap === 8, '6.1 the background is full screen again, high tier: ' + JSON.stringify({ draw: b.draw, tier: b.tier, cap: b.octaveCap }));
+	await h.eventually(() => fl(page), (s) => s.presenter === 'post', 'post again', 5000).catch(() => {});
+	f = await fl(page);
+	h.check(f.presenter === 'post' && !f.panel?.visible, '6.2 the screen effect takes the smoke back, the panel hides: ' + JSON.stringify({ presenter: f.presenter, panel: f.panel }));
+	await h.finish(browser);
+});
diff --git a/tests/unit/backgroundGraph.test.js b/tests/unit/backgroundGraph.test.js
new file mode 100644
index 000000000..b81d37677
--- /dev/null
+++ b/tests/unit/backgroundGraph.test.js
@@ -0,0 +1,175 @@
+// @ts-nocheck — fixture-shaped test data (the tests/unit convention for graph fixtures)
+// 65 M2 — the BACKGROUND shader domain: catalog + compiler, no browser (both modules are
+// pure). The GLSL itself is compiled for real by tests/e2e/background-glsl.test.cjs
+// (glslangValidator) and rendered by tests/e2e/background-layer.test.cjs.
+import { describe, it, expect } from 'vitest';
+import {
+	compileBackgroundGraphToIR,
+	compileShaderGraphToIR,
+	BACKGROUND_BUILTIN_UNIFORMS
+} from '../../src/lib/shaderCompile.js';
+import {
+	shaderNodeDef,
+	shaderNodeDefs,
+	outputNodeFor,
+	stageForDomain,
+	BACKGROUND_OUTPUT_NODE
+} from '../../src/lib/shaderCatalog.js';
+
+let seq = 0;
+const node = (type, data = {}) => ({
+	id: type + '_' + ++seq,
+	type,
+	data,
+	position: { x: 0, y: 0 }
+});
+const edge = (from, to, targetHandle, sourceHandle = 'out') => ({
+	id: 'e' + ++seq,
+	source: from.id,
+	sourceHandle,
+	target: to.id,
+	targetHandle
+});
+/** count whole-word occurrences of a GLSL function DEFINITION */
+const defs = (glsl, name) =>
+	(glsl.match(new RegExp('\\b(?:float|vec2|vec3|vec4) ' + name + '\\(', 'g')) ?? []).length;
+
+describe('background domain plumbing', () => {
+	it('names its terminal and stage', () => {
+		expect(outputNodeFor('background')).toBe(BACKGROUND_OUTPUT_NODE);
+		expect(outputNodeFor('post')).toBe('postOutput');
+		expect(outputNodeFor('surface')).toBe('surface');
+		expect(stageForDomain('background')).toBe('background');
+		expect(stageForDomain('surface')).toBe('fragment');
+	});
+	it('documents every new node', () => {
+		for (const key of [
+			'fbm',
+			'domainWarp',
+			'meshGradient',
+			'blobs',
+			'smoothMin',
+			'grain',
+			'rotateUv',
+			'pointer',
+			'scroll',
+			'aspectUv',
+			BACKGROUND_OUTPUT_NODE
+		])
+			expect(shaderNodeDef(key)?.doc?.length ?? 0, key).toBeGreaterThan(12);
+		expect(shaderNodeDefs().filter((d) => !d.doc)).toEqual([]);
+	});
+});
+
+describe('compileBackgroundGraphToIR', () => {
+	it('refuses a graph with no output, and one with nothing wired', () => {
+		expect(compileBackgroundGraphToIR({ nodes: [node('color')], edges: [] }).ok).toBe(false);
+		const r = compileBackgroundGraphToIR({ nodes: [node(BACKGROUND_OUTPUT_NODE)], edges: [] });
+		expect(r.ok).toBe(false);
+		expect(r.errors?.[0]).toMatch(/colour/);
+	});
+
+	it('compiles the smallest graph into a whole fragment shader', () => {
+		const c = node('color', { value: '#ff0000' });
+		const out = node(BACKGROUND_OUTPUT_NODE);
+		const r = compileBackgroundGraphToIR({ nodes: [c, out], edges: [edge(c, out, 'color')] });
+		expect(r.ok).toBe(true);
+		const f = r.ir?.fragment ?? '';
+		expect(f).toMatch(/varying vec2 vUv;/);
+		expect(f).toMatch(/void main\(\)/);
+		expect(f).toMatch(/gl_FragColor = vec4\(/);
+		expect(f).toMatch(/#include <colorspace_fragment>/);
+		// opaque unless alpha is wired
+		expect(f).toMatch(/clamp\(1\.0, 0\.0, 1\.0\)/);
+		expect(r.ir?.usesPointer).toBe(false);
+	});
+
+	it('declares the layer uniforms exactly once (the material owns them)', () => {
+		const p = node('pointer');
+		const t = node('time');
+		const b = node('blobs');
+		const out = node(BACKGROUND_OUTPUT_NODE);
+		const r = compileBackgroundGraphToIR({
+			nodes: [p, t, b, out],
+			edges: [edge(p, b, 'attract', 'position'), edge(b, out, 'color', 'mask')]
+		});
+		expect(r.ok, String(r.errors)).toBe(true);
+		const f = r.ir?.fragment ?? '';
+		for (const name of BACKGROUND_BUILTIN_UNIFORMS)
+			expect(
+				f.split('uniform ').filter((s) => s.match(new RegExp('^\\w+ ' + name + ';'))).length,
+				name
+			).toBe(1);
+		expect(r.ir?.usesPointer).toBe(true);
+		expect(r.ir?.usesClock).toBe(true);
+		expect(r.ir?.uniforms.some((u) => u.name === 'uShaderTime')).toBe(false);
+	});
+
+	it('hoists a shared prelude ONCE when a graph holds the helper and its users', () => {
+		const n = node('noise');
+		const f = node('fbm');
+		const w = node('domainWarp');
+		const g = node('grain');
+		const add1 = node('add');
+		const add2 = node('add');
+		const out = node(BACKGROUND_OUTPUT_NODE);
+		const r = compileBackgroundGraphToIR({
+			nodes: [n, f, w, g, add1, add2, out],
+			edges: [
+				edge(w, f, 'uv'),
+				edge(n, add1, 'a'),
+				edge(f, add1, 'b'),
+				edge(add1, add2, 'a'),
+				edge(g, add2, 'b'),
+				edge(add2, out, 'color')
+			]
+		});
+		expect(r.ok, String(r.errors)).toBe(true);
+		const glsl = r.ir?.fragment ?? '';
+		expect(defs(glsl, 'tpHash21')).toBe(1);
+		expect(defs(glsl, 'tpFbm')).toBe(1);
+		expect(defs(glsl, 'tpWarp')).toBe(1);
+		// the helper comes BEFORE its users
+		expect(glsl.indexOf('float tpHash21(')).toBeLessThan(glsl.indexOf('float tpFbm('));
+		expect(glsl.indexOf('float tpFbm(')).toBeLessThan(glsl.indexOf('vec2 tpWarp('));
+		// the device-budget knob is a guarded define, so the layer can lower it
+		expect(glsl).toMatch(/#ifndef TP_OCTAVE_CAP/);
+	});
+
+	it('refuses a surface-only node by name', () => {
+		const nrm = node('normal');
+		const out = node(BACKGROUND_OUTPUT_NODE);
+		const r = compileBackgroundGraphToIR({ nodes: [nrm, out], edges: [edge(nrm, out, 'color')] });
+		expect(r.ok).toBe(false);
+		expect(r.errors?.[0]).toMatch(/only works in the surface stage, not in background/);
+	});
+
+	it('keeps background inputs out of the other domains', () => {
+		const p = node('pointer');
+		const s = node('surface');
+		const r = compileShaderGraphToIR({ nodes: [p, s], edges: [edge(p, s, 'albedo', 'position')] });
+		expect(r.ok).toBe(false);
+		expect(r.errors?.[0]).toMatch(/background stage/);
+	});
+
+	it('lets the new pattern nodes drive an ordinary SURFACE too', () => {
+		const f = node('fbm');
+		const m = node('meshGradient');
+		const mul = node('multiply');
+		const s = node('surface');
+		const r = compileShaderGraphToIR({
+			nodes: [f, m, mul, s],
+			edges: [edge(m, mul, 'a'), edge(f, mul, 'b'), edge(mul, s, 'albedo')]
+		});
+		expect(r.ok, String(r.errors)).toBe(true);
+		expect(defs(r.ir.prelude, 'tpHash21')).toBe(1);
+	});
+
+	it('the Bayer node reads the pixel grid in a background', () => {
+		const b = node('bayer');
+		const out = node(BACKGROUND_OUTPUT_NODE);
+		const r = compileBackgroundGraphToIR({ nodes: [b, out], edges: [edge(b, out, 'color')] });
+		expect(r.ok, String(r.errors)).toBe(true);
+		expect(r.ir?.fragment).toMatch(/tpBayer4\(gl_FragCoord\.xy/);
+	});
+});
diff --git a/tests/unit/backgroundLayer.test.js b/tests/unit/backgroundLayer.test.js
new file mode 100644
index 000000000..331e5ece6
--- /dev/null
+++ b/tests/unit/backgroundLayer.test.js
@@ -0,0 +1,192 @@
+// @ts-nocheck — fixture-shaped test data (the tests/unit convention for graph fixtures)
+// 65 M2 — the background layer's pure rules and the packs preset format (no browser).
+import { describe, it, expect } from 'vitest';
+import {
+	normalizeLayer,
+	drawModeFor,
+	tierFor,
+	octaveCapFor,
+	sphereUv,
+	easePointer,
+	pageScrollProgress
+} from '../../src/lib/backgroundLayerCore.js';
+import {
+	normalizePresetIndex,
+	normalizePresetDoc,
+	builtinPresetDoc,
+	PRESET_FORMAT,
+	BUILTIN_PRESET_KEY
+} from '../../src/lib/backgroundPresetsCore.js';
+import { compileBackgroundGraphToIR } from '../../src/lib/shaderCompile.js';
+
+describe('normalizeLayer', () => {
+	it('defaults to full screen with the pointer on and scroll off', () => {
+		expect(normalizeLayer(undefined)).toEqual({
+			mode: 'screen',
+			target: null,
+			pointer: true,
+			scroll: false
+		});
+	});
+	it('keeps known values and rejects unknown modes', () => {
+		expect(normalizeLayer({ mode: 'plane', target: 'u1', pointer: false, scroll: true })).toEqual({
+			mode: 'plane',
+			target: 'u1',
+			pointer: false,
+			scroll: true
+		});
+		expect(normalizeLayer({ mode: 'sideways' }).mode).toBe('screen');
+	});
+});
+
+describe('drawModeFor', () => {
+	const L = (mode) => normalizeLayer({ mode });
+	it('never draws the head-locked screen triangle in XR', () => {
+		expect(drawModeFor(L('screen'), { xr: false, targetFound: false })).toBe('screen');
+		expect(drawModeFor(L('screen'), { xr: true, targetFound: false })).toBe('sphere');
+	});
+	it('draws a plane only when its object exists, in or out of XR', () => {
+		expect(drawModeFor(L('plane'), { xr: false, targetFound: true })).toBe('plane');
+		expect(drawModeFor(L('plane'), { xr: true, targetFound: true })).toBe('plane');
+		expect(drawModeFor(L('plane'), { xr: false, targetFound: false })).toBe('none');
+		expect(drawModeFor(L('off'), { xr: false, targetFound: true })).toBe('none');
+	});
+});
+
+describe('the device budget', () => {
+	it('is low on a headset, a phone, or once the governor drops the look', () => {
+		expect(tierFor({})).toBe('high');
+		expect(tierFor({ xr: true })).toBe('low');
+		expect(tierFor({ phone: true })).toBe('low');
+		expect(tierFor({ postOff: true })).toBe('low');
+		expect(tierFor({ dprScale: 0.72 })).toBe('high');
+		expect(tierFor({ dprScale: 0.61 })).toBe('low');
+		expect(octaveCapFor('low')).toBe(2);
+		expect(octaveCapFor('high')).toBe(8);
+	});
+	it('the low tier really changes the compiled program (the cap is a define the shader reads)', () => {
+		const r = compileBackgroundGraphToIR(normalizePresetDoc(builtinPresetDoc()).doc);
+		expect(r.ok).toBe(true);
+	});
+});
+
+describe('sphereUv', () => {
+	it('puts straight ahead (-Z) at the centre, right at 0, left at 1, up at the top', () => {
+		const close = (a, b) => expect(Math.abs(a - b)).toBeLessThan(1e-9);
+		let [u, v] = sphereUv(0, 0, -1);
+		close(u, 0.5);
+		close(v, 0.5);
+		[u] = sphereUv(1, 0, 0);
+		close(u, 0);
+		[u] = sphereUv(-1, 0, 0);
+		close(u, 1);
+		[, v] = sphereUv(0, 1, 0);
+		close(v, 1);
+		[, v] = sphereUv(0, -5, 0);
+		close(v, 0);
+	});
+	it('mirrors the back half onto the front, so there is no seam behind you', () => {
+		const [a] = sphereUv(0.3, 0, -1);
+		const [b] = sphereUv(0.3, 0, 1);
+		expect(Math.abs(a - b)).toBeLessThan(1e-9);
+	});
+});
+
+describe('easePointer', () => {
+	it('converges on the target at the same rate whatever the frame rate', () => {
+		const run = (hz) => {
+			const s = { x: 0, y: 0, vx: 0, vy: 0 };
+			for (let i = 0; i < hz / 4; i++) easePointer(s, 1, 0.5, 1 / hz);
+			return s;
+		};
+		const a = run(60);
+		const b = run(90);
+		expect(Math.abs(a.x - b.x)).toBeLessThan(0.01);
+		expect(a.x).toBeGreaterThan(0.85);
+		expect(a.vx).toBeGreaterThan(0);
+	});
+	it('ignores a zero or negative step and caps a long stall', () => {
+		const s = { x: 0, y: 0, vx: 0, vy: 0 };
+		easePointer(s, 1, 1, 0);
+		expect(s.x).toBe(0);
+		easePointer(s, 1, 1, 30);
+		expect(s.x).toBeLessThan(1);
+	});
+});
+
+describe('pageScrollProgress', () => {
+	it('is null for a page that does not scroll (the editor), else 0..1', () => {
+		expect(pageScrollProgress(null)).toBe(null);
+		expect(pageScrollProgress({ scrollTop: 0, scrollHeight: 800, clientHeight: 800 })).toBe(null);
+		expect(pageScrollProgress({ scrollTop: 300, scrollHeight: 1400, clientHeight: 800 })).toBe(0.5);
+		expect(pageScrollProgress({ scrollTop: 9000, scrollHeight: 1400, clientHeight: 800 })).toBe(1);
+	});
+});
+
+describe('preset loading', () => {
+	it('reads an index, dropping bad and duplicate rows', () => {
+		const r = normalizePresetIndex({
+			format: 1,
+			presets: [
+				{ key: 'mesh-gradient', label: 'Mesh gradient', hint: 'x', file: 'mesh-gradient.json' },
+				{ key: 'mesh-gradient', label: 'dupe' },
+				{ key: '../evil', label: 'path' },
+				{ key: 'no-file', label: 'No file' },
+				{ key: 'bad-file', file: '../../x.json' },
+				null
+			]
+		});
+		expect(r.ok).toBe(true);
+		expect(r.presets.map((p) => p.key)).toEqual(['mesh-gradient', 'no-file', 'bad-file']);
+		expect(r.presets[1].file).toBe('no-file.json');
+		expect(r.presets[2].file).toBe('bad-file.json');
+	});
+	it('refuses a NEWER format by name instead of half-reading it', () => {
+		const r = normalizePresetIndex({ format: PRESET_FORMAT + 1, presets: [] });
+		expect(r.ok).toBe(false);
+		expect(r.error).toMatch(/newer format/);
+		const d = normalizePresetDoc(
+			{ format: PRESET_FORMAT + 1, domain: 'background', nodes: [] },
+			'x'
+		);
+		expect(d.ok).toBe(false);
+	});
+	it('refuses a document that is not a background graph or has no output', () => {
+		expect(normalizePresetDoc({ domain: 'post', nodes: [] }, 'a').ok).toBe(false);
+		expect(
+			normalizePresetDoc({ domain: 'background', nodes: [{ id: 'c', type: 'color' }] }, 'a').ok
+		).toBe(false);
+		expect(normalizePresetDoc('nope', 'a').ok).toBe(false);
+	});
+	it('drops an edge into a node that is not there, and fills missing data', () => {
+		const r = normalizePresetDoc(
+			{
+				domain: 'background',
+				nodes: [
+					{ id: 'c', type: 'color' },
+					{ id: 'o', type: 'backgroundOutput', data: { x: 1 } }
+				],
+				edges: [
+					{ id: 'e1', source: 'c', sourceHandle: 'out', target: 'o', targetHandle: 'color' },
+					{ id: 'e2', source: 'ghost', sourceHandle: 'out', target: 'o', targetHandle: 'alpha' }
+				],
+				layer: { scroll: true }
+			},
+			'k'
+		);
+		expect(r.ok).toBe(true);
+		if (!r.ok) return;
+		expect(r.doc.edges.map((e) => e.id)).toEqual(['e1']);
+		expect(r.doc.nodes[0].data).toEqual({});
+		expect(r.doc.layer).toEqual({ pointer: true, scroll: true });
+		expect(r.doc.preset).toBe('k');
+	});
+	it('the built-in preset is valid and compiles', () => {
+		const r = normalizePresetDoc(builtinPresetDoc(), BUILTIN_PRESET_KEY);
+		expect(r.ok).toBe(true);
+		if (!r.ok) return;
+		const c = compileBackgroundGraphToIR(r.doc);
+		expect(c.ok, String(c.errors)).toBe(true);
+		expect(c.ir?.usesPointer).toBe(true);
+	});
+});
diff --git a/tests/unit/fluidLayer.test.js b/tests/unit/fluidLayer.test.js
new file mode 100644
index 000000000..a149dad40
--- /dev/null
+++ b/tests/unit/fluidLayer.test.js
@@ -0,0 +1,116 @@
+// @ts-nocheck
+// 65 M6 — the smoke / ink fluid layer's pure rules (fluidLayerCore): params, budget, colour, stirrer.
+import { describe, it, expect } from 'vitest';
+import {
+	FLUID_DEFAULTS,
+	normalizeFluidParams,
+	fluidTierFor,
+	physicsFor,
+	dyeColor,
+	autoStir,
+	pointerSplat
+} from '../../src/lib/fluidLayerCore.js';
+
+describe('normalizeFluidParams', () => {
+	it('fills the defaults from nothing', () => {
+		expect(normalizeFluidParams(undefined)).toEqual({ ...FLUID_DEFAULTS });
+	});
+	it('clamps numbers and refuses unknown choices', () => {
+		const p = normalizeFluidParams({ style: 'lava', palette: 'nope', intensity: 99, curl: -5, fade: 'x', radius: 0, auto: 0 });
+		expect(p.style).toBe('smoke');
+		expect(p.palette).toBe('rainbow');
+		expect(p.intensity).toBe(3);
+		expect(p.curl).toBe(0);
+		expect(p.fade).toBe(FLUID_DEFAULTS.fade);
+		expect(p.radius).toBe(0.05);
+		expect(p.auto).toBe(false);
+	});
+	it('keeps valid values', () => {
+		const p = normalizeFluidParams({ style: 'ink', palette: 'ocean', intensity: 0.5, curl: 40, fade: 2, radius: 0.5, auto: true });
+		expect(p).toEqual({ style: 'ink', palette: 'ocean', intensity: 0.5, curl: 40, fade: 2, radius: 0.5, auto: true });
+	});
+});
+
+describe('fluidTierFor (the device budget)', () => {
+	it('desktop gets the full grid', () => {
+		expect(fluidTierFor({})).toMatchObject({ tier: 'high', simRes: 128, dyeRes: 512, iterations: 20 });
+	});
+	it('a governor-shrunk desktop drops to medium', () => {
+		expect(fluidTierFor({ dprScale: 0.72 })).toMatchObject({ tier: 'medium', simRes: 96, iterations: 14 });
+		expect(fluidTierFor({ dprScale: 0.8 }).tier).toBe('high');
+	});
+	it('a phone or a headset drops to low', () => {
+		expect(fluidTierFor({ phone: true })).toMatchObject({ tier: 'low', simRes: 64, dyeRes: 256, iterations: 8 });
+		expect(fluidTierFor({ xr: true }).tier).toBe('low');
+	});
+	it('a headset already capping particles gets no fluid', () => {
+		expect(fluidTierFor({ xr: true, particlesCapped: true })).toBeNull();
+		// a desktop capping particles still has it (the cap is about particle count)
+		expect(fluidTierFor({ particlesCapped: true })).not.toBeNull();
+	});
+	it('every tier costs less than the one above', () => {
+		const cost = (t) => t.simRes * t.simRes * t.iterations + t.dyeRes * t.dyeRes;
+		expect(cost(fluidTierFor({ dprScale: 0.5 }))).toBeLessThan(cost(fluidTierFor({})));
+		expect(cost(fluidTierFor({ xr: true }))).toBeLessThan(cost(fluidTierFor({ dprScale: 0.5 })));
+	});
+});
+
+describe('physicsFor', () => {
+	it('the velocity always fades, even when the dye never does', () => {
+		const still = physicsFor(normalizeFluidParams({ fade: 0 }));
+		expect(still.dyeFade).toBe(0);
+		expect(still.velocityFade).toBeGreaterThan(0);
+		expect(physicsFor(normalizeFluidParams({ fade: 5 })).velocityFade).toBeGreaterThan(still.velocityFade);
+	});
+});
+
+describe('dyeColor', () => {
+	it('is small positive linear RGB for every palette', () => {
+		for (const palette of ['rainbow', 'ember', 'ocean', 'mono'])
+			for (const t of [0, 3.3, 11]) {
+				const c = dyeColor(palette, t);
+				expect(c).toHaveLength(3);
+				for (const v of c) {
+					expect(v).toBeGreaterThanOrEqual(0);
+					expect(v).toBeLessThanOrEqual(0.15 + 1e-9);
+				}
+			}
+	});
+	it('rainbow drifts with time, mono does not', () => {
+		expect(dyeColor('rainbow', 0)).not.toEqual(dyeColor('rainbow', 4));
+		expect(dyeColor('mono', 0)).toEqual(dyeColor('mono', 4));
+	});
+});
+
+describe('autoStir', () => {
+	it('stays inside the layer and its velocity matches its path', () => {
+		for (let t = 0; t < 30; t += 0.7) {
+			const s = autoStir(t);
+			expect(s.x).toBeGreaterThan(0.1);
+			expect(s.x).toBeLessThan(0.9);
+			expect(s.y).toBeGreaterThan(0.1);
+			expect(s.y).toBeLessThan(0.9);
+			const h = 1e-4;
+			const n = autoStir(t + h);
+			expect((n.x - s.x) / h).toBeCloseTo(s.vx, 2);
+			expect((n.y - s.y) / h).toBeCloseTo(s.vy, 2);
+		}
+	});
+});
+
+describe('pointerSplat', () => {
+	it('is null for no movement', () => {
+		expect(pointerSplat({ x: 0.5, y: 0.5 }, { x: 0.5, y: 0.5 }, 0.016)).toBeNull();
+	});
+	it('turns a move into UV/s at the new position', () => {
+		const s = pointerSplat({ x: 0.4, y: 0.5 }, { x: 0.5, y: 0.5 }, 0.1);
+		expect(s.x).toBe(0.5);
+		expect(s.vx).toBeCloseTo(1, 6);
+		expect(s.vy).toBe(0);
+	});
+	it('clamps a frame hitch', () => {
+		const s = pointerSplat({ x: 0, y: 0 }, { x: 1, y: 1 }, 0);
+		expect(s.vx).toBe(6);
+		expect(s.vy).toBe(6);
+	});
+});