diff --git a/README.md b/README.md
index 80bca61..0e7daf8 100644
--- a/README.md
+++ b/README.md
@@ -2,13 +2,13 @@
 
 Personal website and blog of Aleksandr Albekov — live at **[bulbashenko.com](https://bulbashenko.com)**.
 
-A retro terminal-styled single page with a CRT filter and a weekly pre-rendered ASCII skull background, plus a small admin panel for editing everything on it.
+A retro terminal-styled single page with a CRT filter and an animated ASCII skull background, plus a small admin panel for editing everything on it.
 
 ## Features
 
 - Profile, blog posts (Markdown), projects, gallery and CV in English, Russian and Slovak.
 - Admin panel at `/admin`: content editing, image uploads, active session management. Sign-in goes through the single sign-on at `auth.bulbashenko.com` ([bulbashenko/auth](https://github.com/bulbashenko/auth)); members of the `site-admins` group get in.
-- Weekly ASCII skull video background, rendered in GitHub Actions with Playwright and ffmpeg (`scripts/skull-render`).
+- ASCII skull background drawn live with WebGL2 in the active palette (`src/components/public/background`); the skull under the pointer glitches. Browsers without WebGL2, or too slow to keep up, get a weekly video of the same scene, rendered in GitHub Actions with Playwright and ffmpeg (`scripts/skull-render`).
 - Dynamic Open Graph image, sitemap and robots.
 
 ## Stack
diff --git a/package-lock.json b/package-lock.json
index 2a31cca..341dee6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,6 +25,7 @@
         "react-markdown": "^10.1.0",
         "rehype-sanitize": "^6.0.0",
         "remark-gfm": "^4.0.1",
+        "three": "0.186.1",
         "zod": "^4.3.6"
       },
       "devDependencies": {
@@ -9554,6 +9555,12 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/three": {
+      "version": "0.186.1",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.186.1.tgz",
+      "integrity": "sha512-blFeqb49wRCSGUGj7gtpfnSGHy2lwDk94RhUmS1c/hTby70kvChbWpkJ4Pm1390LqzzvTmzgXKHPEafJwCb8jA==",
+      "license": "MIT"
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.16",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.16.tgz",
diff --git a/package.json b/package.json
index 4cc2118..c61107c 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "react-markdown": "^10.1.0",
     "rehype-sanitize": "^6.0.0",
     "remark-gfm": "^4.0.1",
+    "three": "0.186.1",
     "zod": "^4.3.6"
   },
   "devDependencies": {
diff --git a/scripts/skull-render/package-lock.json b/scripts/skull-render/package-lock.json
index ca21433..8f83d75 100644
--- a/scripts/skull-render/package-lock.json
+++ b/scripts/skull-render/package-lock.json
@@ -7,9 +7,9 @@
       "name": "skull-render",
       "dependencies": {
         "@aws-sdk/client-s3": "^3.1146.0",
-        "@fontsource/jetbrains-mono": "^5.2.5",
+        "@fontsource/ibm-plex-mono": "5.3.0",
         "playwright": "^1.55.0",
-        "three": "0.184.0"
+        "three": "0.186.1"
       }
     },
     "node_modules/@aws-sdk/checksums": {
@@ -320,10 +320,10 @@
         "node": ">=18.0.0"
       }
     },
-    "node_modules/@fontsource/jetbrains-mono": {
+    "node_modules/@fontsource/ibm-plex-mono": {
       "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/@fontsource/jetbrains-mono/-/jetbrains-mono-5.3.0.tgz",
-      "integrity": "sha512-fqDfB5I9f1p1TV486aUgB9t8zP84P0O1FtQR5Ol9vjwPy+S+EIGlVYm1cvj2W5shcZMTg2nZFdVMoH5wFu8a1A==",
+      "resolved": "https://registry.npmjs.org/@fontsource/ibm-plex-mono/-/ibm-plex-mono-5.3.0.tgz",
+      "integrity": "sha512-eTgnZjZEGk1QtD3ZstF+Vclo2HLAni8YMy34/DxllwZvyz1lR/1RF/xTiAquOBO7MvqBx8D2Ig2WCPMVfdZu7Q==",
       "license": "OFL-1.1",
       "funding": {
         "url": "https://github.com/sponsors/ayuhito"
@@ -444,9 +444,9 @@
       }
     },
     "node_modules/three": {
-      "version": "0.184.0",
-      "resolved": "https://registry.npmjs.org/three/-/three-0.184.0.tgz",
-      "integrity": "sha512-wtTRjG92pM5eUg/KuUnHsqSAlPM296brTOcLgMRqEeylYTh/CdtvKUvCyyCQTzFuStieWxvZb8mVTMvdPyUpxg==",
+      "version": "0.186.1",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.186.1.tgz",
+      "integrity": "sha512-blFeqb49wRCSGUGj7gtpfnSGHy2lwDk94RhUmS1c/hTby70kvChbWpkJ4Pm1390LqzzvTmzgXKHPEafJwCb8jA==",
       "license": "MIT"
     },
     "node_modules/tslib": {
diff --git a/scripts/skull-render/package.json b/scripts/skull-render/package.json
index 31c4d51..7b9815e 100644
--- a/scripts/skull-render/package.json
+++ b/scripts/skull-render/package.json
@@ -10,8 +10,8 @@
   },
   "dependencies": {
     "@aws-sdk/client-s3": "^3.1146.0",
-    "@fontsource/jetbrains-mono": "^5.2.5",
+    "@fontsource/ibm-plex-mono": "5.3.0",
     "playwright": "^1.55.0",
-    "three": "0.184.0"
+    "three": "0.186.1"
   }
 }
diff --git a/scripts/skull-render/serve.mjs b/scripts/skull-render/serve.mjs
index e15c033..b4f1d50 100644
--- a/scripts/skull-render/serve.mjs
+++ b/scripts/skull-render/serve.mjs
@@ -1,17 +1,21 @@
-// Minimal static server for skull.html (preview and headless rendering).
+// Minimal static server for skull.html (preview and headless rendering). Also serves the site's background elements.
 import { createServer } from "node:http";
 import { readFile } from "node:fs/promises";
 import { extname, join, normalize } from "node:path";
 import { fileURLToPath } from "node:url";
 
 const ROOT = fileURLToPath(new URL(".", import.meta.url));
+const SITE = fileURLToPath(new URL("../../", import.meta.url));
+// The elements skull.html renders, from the site's source tree.
+const SHARED = "/src/components/public/background/";
 const TYPES = { ".html": "text/html", ".js": "text/javascript", ".mjs": "text/javascript", ".woff2": "font/woff2", ".json": "application/json" };
 
 export function serve(port = 0) {
   const server = createServer(async (req, res) => {
     const path = normalize(decodeURIComponent(new URL(req.url, "http://x").pathname)).replace(/^(\.\.[/\\])+/, "");
+    const file = path.startsWith(SHARED) ? join(SITE, path) : join(ROOT, path === "/" ? "skull.html" : path);
     try {
-      const body = await readFile(join(ROOT, path === "/" ? "skull.html" : path));
+      const body = await readFile(file);
       res.writeHead(200, { "Content-Type": TYPES[extname(path)] ?? "application/octet-stream" });
       res.end(body);
     } catch {
diff --git a/scripts/skull-render/skull.html b/scripts/skull-render/skull.html
index 522a643..1fcf334 100644
--- a/scripts/skull-render/skull.html
+++ b/scripts/skull-render/skull.html
@@ -3,289 +3,59 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<title>ASCII Punk Skull — Render</title>
+<title>ASCII Skull — Render</title>
 <!--
+  The fallback for browsers that can't draw the background live: the site's own elements
+  (src/components/public/background/*.js), in loop mode so the video repeats seamlessly.
   Preview: npm run preview → http://localhost:5173/skull.html?seed=42
   Render:  ?render=1&seed=42 exposes window.ready and window.renderFrame(i) for render.mjs.
   Output is grayscale; the site tints it with the active palette.
 -->
 <script type="importmap">
-{ "imports": { "three": "./node_modules/three/build/three.module.js" } }
+{ "imports": { "three": "./node_modules/three/build/three.module.js", "three/addons/": "./node_modules/three/examples/jsm/" } }
 </script>
 <style>
-  @font-face { font-family: 'JetBrains Mono'; font-weight: 400; src: url(./node_modules/@fontsource/jetbrains-mono/files/jetbrains-mono-latin-400-normal.woff2) format('woff2'); }
+  @font-face { font-family: 'IBM Plex Mono'; font-weight: 400; src: url(./node_modules/@fontsource/ibm-plex-mono/files/ibm-plex-mono-latin-400-normal.woff2) format('woff2'); }
   html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }
-  canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
-  #info { position: fixed; left: 12px; bottom: 10px; font: 12px 'JetBrains Mono', monospace; color: #888; }
+  #stage { position: fixed; inset: 0; }
+  #info { position: fixed; left: 12px; bottom: 10px; font: 12px 'IBM Plex Mono', monospace; color: #888; }
   .render #info { display: none; }
 </style>
 </head>
 <body>
-<canvas id="out"></canvas>
+<div id="stage"></div>
 <div id="info"></div>
 
 <script type="module">
-import * as THREE from 'three';
-
 const params = new URLSearchParams(location.search);
 const RENDER = params.has('render');
 const SEED = (Number(params.get('seed')) >>> 0) || ((Math.random() * 2 ** 32) >>> 0);
-const LOOP = 20;            // seconds; every motion below is periodic over LOOP
+const LOOP = 20;            // seconds; the elements make every motion periodic over it
 const FPS = 30;
-const SKULLS = 11;
+// Grayscale stand-ins for bg, g1, g2, g3 (relative to g1 in the site palettes); the site multiplies by --g1.
+const COLORS = '#000000,#ffffff,#b3b3b3,#737373';
 if (RENDER) document.body.classList.add('render');
 
-const RAMP = " .'`^\",:;Il!i~+_-?][}{1)(|/tfjrxnuvczXYUJCLQ0OZmwqpdbkhao*#MW&8%B@";
-const NOISE = "01/\\|<>_-:;";
-const CELL_H = 10, CELL_W = CELL_H * 0.6;
-const TAU = Math.PI * 2;
-
-// ---------- seeded randomness
-function mulberry32(a) {
-  return () => {
-    a |= 0; a = (a + 0x6D2B79F5) | 0;
-    let t = Math.imul(a ^ (a >>> 15), 1 | a);
-    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
-    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
-  };
-}
-const rand = mulberry32(SEED);
-const rnd = (a, b) => a + rand() * (b - a);
-const rint = (a, b) => Math.floor(rnd(a, b + 1));
-const hash = (...n) => { let h = SEED ^ 0x9E3779B9; for (const v of n) h = Math.imul(h ^ v, 0x85EBCA6B) ^ (h >>> 13); return (h ^ (h >>> 16)) >>> 0; };
-
-// ---------- materials
-const bone = new THREE.MeshStandardMaterial({ color: 0xf2ffe0, roughness: 0.55, metalness: 0.05 });
-const voidM = new THREE.MeshStandardMaterial({ color: 0x020302, roughness: 1 });
-const neon = new THREE.MeshStandardMaterial({ color: 0xb6ff3a, emissive: 0x9aff1a, emissiveIntensity: 0.9, roughness: 0.4 });
-const chrome = new THREE.MeshStandardMaterial({ color: 0xd8e8d0, roughness: 0.2, metalness: 0.9 });
-
-// ---------- skull model (units ≈ decimeters, y-up)
-function buildSkull() {
-  const g = new THREE.Group();
-  const add = (geo, mat, pos, scale, rot) => {
-    const m = new THREE.Mesh(geo, mat);
-    m.position.set(...pos); if (scale) m.scale.set(...scale); if (rot) m.rotation.set(...rot);
-    g.add(m); return m;
-  };
-  const S = (r, w = 48, h = 32) => new THREE.SphereGeometry(r, w, h);
-  const side = (fn) => { for (const sx of [-1, 1]) fn(sx); };
-
-  // vault
-  add(S(1, 72, 56), bone, [0, 0.35, -0.1], [0.92, 0.95, 1.08]);
-  add(S(0.72), bone, [0, 0.5, 0.34], [1.05, 0.95, 0.78]);
-  add(S(0.62), bone, [0, 0.2, -0.78], [1.05, 0.95, 0.8]);
-  add(new THREE.CapsuleGeometry(0.06, 0.7, 6, 20), bone, [0, -0.08, -1.02], null, [0, 0, Math.PI / 2]);
-  add(new THREE.TorusGeometry(1.0, 0.012, 6, 96, Math.PI * 0.75), voidM, [0, 0.35, -0.1], [1.002, 0.952, 1.082], [0, Math.PI / 2, Math.PI * 0.2]);
-  add(new THREE.BoxGeometry(0.018, 0.42, 0.02), voidM, [-0.28, 0.78, 0.8], null, [0.6, 0.3, 0.5]);
-  add(new THREE.BoxGeometry(0.016, 0.22, 0.02), voidM, [-0.42, 0.66, 0.76], null, [0.4, 0.5, -0.4]);
-
-  // face
-  add(S(0.62), bone, [0, -0.3, 0.3], [1.05, 0.8, 0.9]);
-  add(new THREE.BoxGeometry(0.1, 0.22, 0.08), bone, [0, 0.04, 0.95], null, [-0.25, 0, 0]);
-  add(S(0.12), bone, [0, 0.2, 0.93], [1.3, 0.7, 0.6]);
-  side((sx) => {
-    add(new THREE.CapsuleGeometry(0.075, 0.3, 8, 24), bone, [sx * 0.31, 0.25, 0.86], [1, 1, 0.8], [0, -sx * 0.35, Math.PI / 2 + sx * 0.12]);
-    add(new THREE.TorusGeometry(0.25, 0.045, 12, 48), bone, [sx * 0.33, 0.0, 0.84], [1.05, 0.92, 1], [0, sx * 0.3, 0]);
-    add(S(0.26), voidM, [sx * 0.33, 0.0, 0.8], [1.02, 0.92, 0.55]);
-    add(S(0.035, 16, 12), neon, [sx * 0.31, -0.02, 0.83]);
-    add(S(0.2), bone, [sx * 0.55, -0.2, 0.52], [1.15, 0.75, 0.95]);
-    add(new THREE.CapsuleGeometry(0.055, 0.4, 6, 20), bone, [sx * 0.71, -0.2, 0.15], null, [Math.PI / 2, 0, 0]);
-    add(S(0.3), voidM, [sx * 0.84, 0.0, 0.15], [0.22, 0.75, 0.7]);
-    add(S(0.11), bone, [sx * 0.62, -0.42, -0.32], [1, 1.4, 1]);
-    add(new THREE.BoxGeometry(0.12, 0.5, 0.28), bone, [sx * 0.55, -0.58, -0.08], null, [0.15, 0, sx * 0.12]);
-    add(S(0.08), bone, [sx * 0.6, -0.34, -0.12]);
-    add(new THREE.ConeGeometry(0.06, 0.26, 3), voidM, [sx * 0.045, -0.26, 0.9], [1, 1, 0.6], [0.25, 0, Math.PI - sx * 0.12]);
-  });
-  add(new THREE.BoxGeometry(0.015, 0.18, 0.04), bone, [0, -0.28, 0.93]);
-
-  // jaw + teeth
-  add(S(0.6), bone, [0, -0.78, 0.12], [0.88, 0.48, 0.88]);
-  add(S(0.2), bone, [0, -0.98, 0.55], [1.4, 0.7, 0.8]);
-  add(new THREE.BoxGeometry(0.66, 0.03, 0.22), voidM, [0, -0.66, 0.72]);
-  const N = 12;
-  for (let i = 0; i < N; i++) {
-    const a = (i - (N - 1) / 2) * 0.14;
-    const canine = i === 3 || i === N - 4;
-    const tooth = new THREE.BoxGeometry(0.058, canine ? 0.15 : 0.12, 0.06);
-    add(tooth, bone, [Math.sin(a) * 0.48, -0.588 - (canine ? 0.015 : 0), 0.32 + Math.cos(a) * 0.45], null, [0, a, 0]);
-    add(tooth, bone, [Math.sin(a) * 0.46, -0.732 + (canine ? 0.015 : 0), 0.32 + Math.cos(a) * 0.43], null, [0, a, 0]);
-  }
-
-  // punk mohawk
-  for (let i = 0; i < 11; i++) {
-    const phi = 0.5 + i * 0.18;
-    const h = 0.7 - Math.abs(i - 3) * 0.045;
-    add(new THREE.ConeGeometry(0.06, h, 24), neon,
-      [0, 0.35 + 0.95 * Math.sin(phi) + Math.sin(phi) * h * 0.42, -0.1 + 1.08 * Math.cos(phi) + Math.cos(phi) * h * 0.42],
-      null, [Math.PI / 2 - phi, 0, 0]);
-  }
-  // hacker implant
-  add(new THREE.CylinderGeometry(0.2, 0.2, 0.05, 32), chrome, [0.84, 0.45, -0.05], null, [0, 0, Math.PI / 2 - 0.3]);
-  add(new THREE.TorusGeometry(0.13, 0.025, 12, 48), neon, [0.87, 0.46, -0.05], null, [0, Math.PI / 2, -0.3]);
-  add(S(0.05, 16, 12), neon, [0.88, 0.46, -0.05]);
-  add(new THREE.TorusGeometry(0.55, 0.018, 8, 64, Math.PI * 0.6), chrome, [0.55, 0.05, -0.35], null, [0, Math.PI / 2, Math.PI * 1.1]);
-  for (let i = 0; i < 3; i++) add(S(0.03, 12, 8), chrome, [0.8 - i * 0.02, 0.72 - i * 0.12, 0.25 + i * 0.05]);
-  add(new THREE.TorusGeometry(0.1, 0.018, 12, 40), chrome, [-0.72, -0.62, -0.1], null, [0, Math.PI / 2, 0]);
-  return g;
-}
-
-// ---------- scene
-const renderer = new THREE.WebGLRenderer({ antialias: false, preserveDrawingBuffer: true });
-const scene = new THREE.Scene();
-const camera = new THREE.PerspectiveCamera(36, 1, 0.1, 80);
-camera.position.set(0, 0.05, 6);
-
-const master = buildSkull();
-const skulls = [master];
-for (let i = 1; i < SKULLS; i++) skulls.push(master.clone());
-skulls.forEach(s => scene.add(s));
-
-const key = new THREE.PointLight(0xd9ff9a, 70, 0, 2); key.position.set(3.5, 3, 4.5);
-const fill = new THREE.PointLight(0x5cff5c, 25, 0, 2); fill.position.set(-4, -1, 3);
-const rim = new THREE.PointLight(0xb6ff3a, 50, 0, 2); rim.position.set(0, 3, -5);
-scene.add(key, fill, rim, new THREE.AmbientLight(0x1c2a12, 0.5));
-
-// ---------- seeded, loop-periodic choreography
-// Each skull crosses the screen once per LOOP; a crossing's lane/depth/axis only change while it is off-screen.
-const tracks = skulls.map(() => {
-  const crossings = rand() < 0.15 ? 2 : 1;
-  return {
-    crossings,
-    phase: rand(),
-    span: rnd(1.3, 1.45) * crossings,       // progress covered per loop; on-screen part is 0..1
-    spin: rint(2, 7) * (rand() < 0.5 ? -1 : 1),
-    spin0: rnd(0, TAU),
-    legs: Array.from({ length: crossings }, () => ({
-      lane: rnd(-0.85, 0.85), z: rnd(-6, 1.5), sc: rnd(0.55, 1.0),
-      ax: new THREE.Vector3(rnd(-1, 1), rnd(-1, 1), rnd(-0.5, 0.5)).normalize(),
-    })),
-  };
-});
-
-const glitches = [];
-for (let t = rnd(1.2, 3); t < LOOP - 0.4; t += rnd(1.6, 5.8)) {
-  glitches.push({
-    t0: t, t1: t + rnd(0.08, 0.28),
-    bands: Array.from({ length: rint(2, 6) }, () => ({ y0: rand(), h: rint(1, 8), dx: Math.round(rnd(-18, 18)) })),
-  });
-}
-const lightHz = Math.round(13 / TAU * LOOP) / LOOP;   // ≈ original 13 rad/s flicker, snapped to the loop
-
-// ---------- canvases
-const out = document.getElementById('out'), octx = out.getContext('2d');
-const cv = document.createElement('canvas'), ctx = cv.getContext('2d');
-const gv = document.createElement('canvas'), gtx = gv.getContext('2d');
-let W, H, cols, rows, rt, buf, dpr;
-function resize() {
-  dpr = RENDER ? 1 : Math.min(window.devicePixelRatio || 1, 2);
-  W = innerWidth; H = innerHeight;
-  cols = Math.ceil(W / CELL_W); rows = Math.ceil(H / CELL_H);
-  out.width = cv.width = W * dpr; out.height = cv.height = H * dpr;
-  gv.width = W * dpr / 2; gv.height = H * dpr / 2;
-  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-  ctx.font = `${CELL_H}px 'JetBrains Mono', monospace`; ctx.textBaseline = 'top';
-  gtx.filter = `blur(${3 * dpr}px)`;
-  rt?.dispose(); rt = new THREE.WebGLRenderTarget(cols, rows);
-  buf = new Uint8Array(cols * rows * 4);
-  camera.aspect = (cols * CELL_W) / (rows * CELL_H);
-  camera.fov = camera.aspect < 1 ? 36 / camera.aspect * 0.85 : 36;
-  camera.updateProjectionMatrix();
-}
-const viewHalf = (z) => { const h = Math.tan(THREE.MathUtils.degToRad(camera.fov / 2)) * (camera.position.z - z); return [h * camera.aspect, h]; };
-
-function place(s) {
-  const u = s / LOOP;
-  skulls.forEach((k, i) => {
-    const tr = tracks[i];
-    const prog = (tr.phase + u) * tr.span;
-    const leg = tr.legs[Math.floor(prog / (tr.span / tr.crossings)) % tr.crossings];
-    const p = -0.15 + (prog % (tr.span / tr.crossings));   // > 1.15 means parked off-screen
-    const [hw, hh] = viewHalf(leg.z), m = 2.2;
-    // travel from top-left to bottom-right; lanes spread perpendicular to cover the screen
-    const sx = -hw - m, sy = hh + m, ex = hw + m, ey = -hh - m;
-    const dx = ex - sx, dy = ey - sy, L = Math.hypot(dx, dy);
-    const px = -dy / L, py = dx / L, spread = Math.max(hw, hh) * 1.1;
-    k.visible = p < 1.15;
-    k.position.set(sx + dx * p + px * leg.lane * spread, sy + dy * p + py * leg.lane * spread, leg.z);
-    k.scale.setScalar(leg.sc);
-    k.quaternion.setFromAxisAngle(leg.ax, tr.spin0 + TAU * tr.spin * u);
-  });
-}
-
-const q = v => Math.min(255, Math.round(v / 24) * 24);
-
-// Draws the frame at loop time s (seconds). Pure function of s, so frames can be rendered in any order.
-function draw(s) {
-  s = ((s % LOOP) + LOOP) % LOOP;
-  const frame = Math.round(s * FPS);
-  place(s);
-  key.intensity = 70 + Math.sin(TAU * lightHz * s) * 3;
-
-  renderer.setRenderTarget(rt); renderer.render(scene, camera);
-  renderer.readRenderTargetPixels(rt, 0, 0, cols, rows, buf);
-
-  const gl = glitches.find(g => s >= g.t0 && s < g.t1);
-  const bands = gl ? gl.bands.map(b => ({ y0: Math.floor(b.y0 * rows), y1: Math.floor(b.y0 * rows) + b.h, dx: b.dx })) : [];
-
-  ctx.fillStyle = '#000'; ctx.fillRect(0, 0, W, H);
-  let cur = '';
-  const tick = Math.floor(s * 2) % (LOOP * 2), RL = RAMP.length;
-  for (let y = 0; y < rows; y++) {
-    let dx = 0;
-    for (const b of bands) if (y >= b.y0 && y < b.y1) dx = b.dx;
-    const src = (rows - 1 - y) * cols;
-    for (let x = 0; x < cols; x++) {
-      const sx = Math.min(cols - 1, Math.max(0, x - dx));
-      const i = (src + sx) * 4;
-      const lum = Math.max(buf[i], buf[i + 1], buf[i + 2]) / 255;
-      let ch, fillS;
-      if (lum > 0.04) {
-        if (dx) {
-          const h = hash(x, y, frame);
-          ch = RAMP[h % RL];
-          fillS = h & 0x100 ? '#fff' : '#999';
-        } else {
-          ch = RAMP[Math.min(RL - 1, Math.floor(Math.pow(lum, 0.85) * RL))];
-          const v = q(255 * (0.35 + 0.65 * lum));
-          fillS = `rgb(${v},${v},${v})`;
-        }
-      } else {
-        const h = ((x * 73856093) ^ (y * 19349663) ^ (tick * 83492791) ^ SEED) >>> 0;
-        if (h % 97 !== 0) continue;
-        ch = NOISE[h % NOISE.length];
-        fillS = 'rgba(255,255,255,0.16)';
-      }
-      if (ch === ' ') continue;
-      if (fillS !== cur) { ctx.fillStyle = fillS; cur = fillS; }
-      ctx.fillText(ch, x * CELL_W, y * CELL_H);
-    }
-  }
-
-  // composite: ascii (+ horizontal jitter while glitching) and a blurred glow pass on top
-  gtx.clearRect(0, 0, gv.width, gv.height);
-  gtx.drawImage(cv, 0, 0, gv.width, gv.height);
-  const jx = gl ? ((hash(frame) % 9) - 4) * dpr : 0;
-  octx.globalCompositeOperation = 'source-over'; octx.globalAlpha = 1;
-  octx.fillStyle = '#000'; octx.fillRect(0, 0, out.width, out.height);
-  octx.drawImage(cv, jx, 0);
-  octx.globalCompositeOperation = 'screen'; octx.globalAlpha = 0.8;
-  octx.drawImage(gv, 0, 0, out.width, out.height);
-}
-
+let field, skulls;
+// Set synchronously: render.mjs reads it right after the page loads.
 window.ready = (async () => {
-  await document.fonts.load(`${CELL_H}px 'JetBrains Mono'`);
-  resize();
+  await import('/src/components/public/background/ascii-bg.js');
+  await import('/src/components/public/background/skull-ascii.js');
+  const stage = document.getElementById('stage');
+  stage.innerHTML = `<ascii-bg dim="0.35" colors="${COLORS}" loop="${LOOP}" manual></ascii-bg>`
+    + `<skull-ascii colors="${COLORS}" seed="${SEED}" loop="${LOOP}" manual></skull-ascii>`;
+  [field, skulls] = stage.children;
+  await document.fonts.load(`12px 'IBM Plex Mono'`);
+  if (!(await skulls.ready)) throw new Error('WebGL2 is not available');
   return { seed: SEED, loop: LOOP, fps: FPS, frames: LOOP * FPS };
 })();
-window.renderFrame = (i) => draw(i / FPS);
+window.renderFrame = (i) => { field.renderAt(i / FPS); skulls.renderAt(i / FPS); };
 
 if (!RENDER) {
   document.getElementById('info').textContent = `seed ${SEED}`;
-  addEventListener('resize', resize);
   window.ready.then(() => {
     const t0 = performance.now();
-    const loop = (t) => { draw((t - t0) / 1000); requestAnimationFrame(loop); };
+    const loop = (t) => { window.renderFrame(((t - t0) / 1000) * FPS); requestAnimationFrame(loop); };
     requestAnimationFrame(loop);
   });
 }
diff --git a/src/components/public/PublicSite.module.css b/src/components/public/PublicSite.module.css
index ebccb82..a0d9ab9 100644
--- a/src/components/public/PublicSite.module.css
+++ b/src/components/public/PublicSite.module.css
@@ -20,7 +20,7 @@
 
 .app.pin { filter: url(#crt-pincushion); }
 
-/* weekly skull video behind the column (SkullBackground); the column only dims it */
+/* skull background behind the column (SkullBackground, live or the weekly video); the column only dims it */
 .app[data-bg="on"] {
   z-index: 1;
   background: color-mix(in srgb, var(--bg) var(--app-alpha, 80%), transparent);
diff --git a/src/components/public/PublicSite.tsx b/src/components/public/PublicSite.tsx
index 16350f1..ecf097f 100644
--- a/src/components/public/PublicSite.tsx
+++ b/src/components/public/PublicSite.tsx
@@ -30,7 +30,8 @@ export function PublicSite({ data, background }: { data: SiteData; background: S
   const [tweaksOpen, setTweaksOpen] = useState(false);
   const [tweaks, setTweaks] = useState<TweakState>({ scanline: 6, glow: 31, palette: "green", pincushion: false, bg: true, bgDim: 80 });
   const bgMode = useSkullBackgroundMode();
-  const bgOn = background !== null && tweaks.bg && bgMode !== "off";
+  // live needs nothing from the server; the video and poster need this week's render
+  const bgOn = tweaks.bg && (bgMode === "live" || (bgMode !== "off" && background !== null));
 
   useEffect(() => {
     try {
@@ -83,7 +84,7 @@ export function PublicSite({ data, background }: { data: SiteData; background: S
 
   return (
     <>
-      {bgOn && background && <SkullBackground data={background} mode={bgMode} />}
+      {bgOn && <SkullBackground data={background} mode={bgMode} palette={PALETTES[tweaks.palette]} />}
       <div className={cn(styles.app, tweaks.pincushion && styles.pin)} data-bg={bgOn ? "on" : undefined}>
         <CRTFilter />
         <span className={styles.vhsNoise}   aria-hidden="true" />
diff --git a/src/components/public/SkullBackground.module.css b/src/components/public/SkullBackground.module.css
index 09a7ffd..8039b13 100644
--- a/src/components/public/SkullBackground.module.css
+++ b/src/components/public/SkullBackground.module.css
@@ -5,6 +5,12 @@
   pointer-events: none;
   background: #000;
   isolation: isolate;
+  overflow: hidden;
+}
+
+/* the live canvases are transparent between glyphs */
+.live {
+  background: var(--bg);
 }
 
 .media {
@@ -21,3 +27,28 @@
   background: var(--g1);
   mix-blend-mode: multiply;
 }
+
+/* rolling bright band of a CRT, as in the design: 9vh/s from -18vh down to 112vh */
+.roll {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: 18vh;
+  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--g1) 5%, transparent), transparent);
+  animation: roll 14.4s linear infinite;
+  will-change: transform;
+}
+
+@keyframes roll {
+  from { transform: translateY(-18vh); }
+  to   { transform: translateY(112vh); }
+}
+
+/* the design's scanlines and vignette, over the background only */
+.scan {
+  position: absolute;
+  inset: 0;
+  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, 0.32) 2px 3px);
+  box-shadow: inset 0 0 20vmin rgba(0, 0, 0, 0.9);
+}
diff --git a/src/components/public/SkullBackground.tsx b/src/components/public/SkullBackground.tsx
index 48e6ad7..87e41ed 100644
--- a/src/components/public/SkullBackground.tsx
+++ b/src/components/public/SkullBackground.tsx
@@ -1,32 +1,136 @@
 "use client";
 
-import { useEffect, useRef, useSyncExternalStore } from "react";
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
 import type { SkullBackgroundData } from "@/types";
 import styles from "./SkullBackground.module.css";
 
-export type SkullBackgroundMode = "off" | "poster" | "video";
+// live:   rendered in the browser with WebGL2 (./background/*.js), in the active palette, reacts to the pointer.
+// video:  the weekly pre-render of the same scene (scripts/skull-render) for devices without WebGL2, with software-only
+//         WebGL, or too slow to hold the frame rate.
+// poster: one still frame of it for reduced motion and Save-Data.
+// off:    phones and touch devices; not a single byte is fetched.
+export type SkullBackgroundMode = "off" | "poster" | "video" | "live";
+export type BackgroundPalette = { bg: string; g1: string; g2: string; g3: string };
 
 const DESKTOP = "(min-width: 1024px) and (pointer: fine)";
 const REDUCED = "(prefers-reduced-motion: reduce)";
+// Set when WebGL failed or frames were too slow; kept for the tab session so later pages don't try again.
+const DOWNGRADED = "bg:video";
+
+const listeners = new Set<() => void>();
+let downgraded: boolean | undefined;
+
+function isDowngraded() {
+  if (downgraded === undefined) {
+    try {
+      downgraded = sessionStorage.getItem(DOWNGRADED) === "1";
+    } catch {
+      downgraded = false;
+    }
+  }
+  return downgraded;
+}
+
+function downgrade() {
+  if (isDowngraded()) return;
+  downgraded = true;
+  try {
+    sessionStorage.setItem(DOWNGRADED, "1");
+  } catch {}
+  listeners.forEach((l) => l());
+}
 
 function subscribe(onChange: () => void) {
   const queries = [DESKTOP, REDUCED].map((q) => window.matchMedia(q));
   queries.forEach((m) => m.addEventListener("change", onChange));
-  return () => queries.forEach((m) => m.removeEventListener("change", onChange));
+  // The custom elements report a missing, software-only or lost WebGL2 context with this event.
+  if (listeners.size === 0) window.addEventListener("background:fail", downgrade);
+  listeners.add(onChange);
+  return () => {
+    queries.forEach((m) => m.removeEventListener("change", onChange));
+    listeners.delete(onChange);
+    if (listeners.size === 0) window.removeEventListener("background:fail", downgrade);
+  };
 }
 
 function getMode(): SkullBackgroundMode {
   if (!window.matchMedia(DESKTOP).matches) return "off";
   const saveData = (navigator as Navigator & { connection?: { saveData?: boolean } }).connection?.saveData;
-  return window.matchMedia(REDUCED).matches || saveData ? "poster" : "video";
+  if (saveData || window.matchMedia(REDUCED).matches) return "poster";
+  return isDowngraded() || typeof WebGL2RenderingContext === "undefined" ? "video" : "live";
 }
 
-// Mobile and touch devices get nothing (not a single byte is fetched); reduced motion / Save-Data get the poster.
 export function useSkullBackgroundMode(): SkullBackgroundMode {
   return useSyncExternalStore(subscribe, getMode, () => "off");
 }
 
-export function SkullBackground({ data, mode }: { data: SkullBackgroundData; mode: SkullBackgroundMode }) {
+/**
+ * Falls back to the video when the page can't hold its frame rate: the mean interval between animation frames stays
+ * above 35 ms (under ~28 fps) over a 3 s window. The first second after load and hidden tabs don't count.
+ */
+function useFrameWatchdog() {
+  useEffect(() => {
+    let raf = 0, prev = 0, sum = 0, count = 0;
+    const start = performance.now();
+    const tick = (now: number) => {
+      raf = requestAnimationFrame(tick);
+      const dt = now - prev;
+      prev = now;
+      // Gaps over 250 ms are a backgrounded tab or a one-off hitch, not a slow device.
+      if (now - start < 1000 || document.hidden || dt > 250) return;
+      sum += dt;
+      count++;
+      if (sum < 3000) return;
+      if (sum / count > 35) downgrade();
+      sum = count = 0;
+    };
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, []);
+}
+
+export function SkullBackground({ data, mode, palette }: {
+  data: SkullBackgroundData | null;
+  mode: SkullBackgroundMode;
+  palette: BackgroundPalette;
+}) {
+  if (mode === "live") return <LiveBackground palette={palette} />;
+  if (mode === "off" || !data) return null;
+  return <RenderedBackground data={data} mode={mode} />;
+}
+
+function LiveBackground({ palette }: { palette: BackgroundPalette }) {
+  const [ready, setReady] = useState(false);
+  useFrameWatchdog();
+
+  useEffect(() => {
+    let alive = true;
+    // three.js comes with the skull element: only this mode downloads it.
+    Promise.all([import("./background/ascii-bg.js"), import("./background/skull-ascii.js")]).then(
+      () => alive && setReady(true),
+      downgrade,
+    );
+    return () => {
+      alive = false;
+    };
+  }, []);
+
+  const colors = `${palette.bg},${palette.g1},${palette.g2},${palette.g3}`;
+  return (
+    <div className={`${styles.bg} ${styles.live}`} aria-hidden="true">
+      {ready && (
+        <>
+          <ascii-bg dim="0.35" colors={colors} />
+          <skull-ascii colors={colors} />
+        </>
+      )}
+      <span className={styles.roll} />
+      <span className={styles.scan} />
+    </div>
+  );
+}
+
+function RenderedBackground({ data, mode }: { data: SkullBackgroundData; mode: "poster" | "video" }) {
   const videoRef = useRef<HTMLVideoElement>(null);
 
   useEffect(() => {
@@ -40,8 +144,6 @@ export function SkullBackground({ data, mode }: { data: SkullBackgroundData; mod
     return () => document.removeEventListener("visibilitychange", onVisibility);
   }, [mode, data.mp4]);
 
-  if (mode === "off") return null;
-
   return (
     <div className={styles.bg} aria-hidden="true">
       {mode === "video" ? (
@@ -65,6 +167,8 @@ export function SkullBackground({ data, mode }: { data: SkullBackgroundData; mod
       )}
       {/* the render is grayscale; multiply tints it with the active palette */}
       <span className={styles.tint} />
+      {mode === "video" && <span className={styles.roll} />}
+      <span className={styles.scan} />
     </div>
   );
 }
diff --git a/src/components/public/background/ascii-bg.js b/src/components/public/background/ascii-bg.js
new file mode 100644
index 0000000..92f7298
--- /dev/null
+++ b/src/components/public/background/ascii-bg.js
@@ -0,0 +1,208 @@
+// <ascii-bg dim="0..1" colors="bg,g1,g2,g3" loop="0" manual> — dim drifting ASCII field + sparse glyph rain.
+// Ported from bulbashenko-com/auth (ui/src/components/visual/ascii-bg.js): one fragment shader in plain WebGL2, no
+// three.js. Changes: colours come from the site palette (`colors`), and loop="N" makes every motion repeat after N
+// seconds (the pre-rendered fallback video, scripts/skull-render). `manual` disables the animation loop: the caller
+// draws with renderAt(t). Dispatches "background:fail" on window when WebGL2 is unavailable, software-only or lost.
+const RAMP = ' .·:-=+*#%';
+const RAIN = '01<>/\\|=+*:;$#ABCDEF';
+const CW = 10, CH = 16;
+const TAU = Math.PI * 2;
+// Atlas: one tile per distinct glyph; RAMP and RAIN index into it.
+const GLYPHS = [...new Set([...RAMP, ...RAIN])];
+const ids = (s) => [...s].map((c) => GLYPHS.indexOf(c));
+const rgb = (hex) => [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16) / 255);
+
+const VERT = `#version 300 es
+in vec2 aPos;
+void main() { gl_Position = vec4(aPos, 0.0, 1.0); }`;
+
+const FRAG = `#version 300 es
+precision highp float;
+precision highp int;
+uniform sampler2D uAtlas;
+uniform vec2 uTile;
+uniform float uDpr;
+uniform float uBufH;
+uniform vec2 uGrid;
+uniform float uT;
+uniform float uK;
+uniform float uLoop;
+uniform vec4 uW;
+uniform vec3 uField;
+uniform vec3 uHead;
+uniform vec3 uTail;
+uniform int uRamp[${RAMP.length}];
+uniform int uRain[${RAIN.length}];
+out vec4 o;
+float h(float a, float b) { return fract(sin(a * 127.1 + b * 311.7) * 43758.5453); }
+float glyph(int g, vec2 local) { return texture(uAtlas, (vec2(float(g) * uTile.x, 0.0) + local * uDpr) / vec2(float(${GLYPHS.length}) * uTile.x, uTile.y)).a; }
+void over(inout vec4 o, vec3 c, float a) { o = vec4(c * a, a) + o * (1.0 - a); }
+void main() {
+  vec2 p = vec2(gl_FragCoord.x, uBufH - gl_FragCoord.y) / uDpr;
+  vec2 cell = floor(p / vec2(${CW}.0, ${CH}.0)), local = p - cell * vec2(${CW}.0, ${CH}.0);
+  float x = cell.x, y = cell.y, t = uT;
+  o = vec4(0.0);
+  float u = x * 0.11, v = y * 0.19;
+  float n = sin(u + v * 0.8 - t * uW.x) * 0.5
+          + sin(u * 0.53 - v * 1.3 + t * uW.y + sin(t * uW.z) * 3.0) * 0.32
+          + sin((u + v) * 0.27 + t * uW.w) * 0.18;
+  n = (n + 1.0) / 2.0; n = n * n * n;
+  if (n >= 0.18) {
+    int rl = ${RAMP.length - 1};
+    int ri = min(rl, int(floor(n * float(rl) + 0.5)));
+    if (ri > 0) over(o, uField, glyph(uRamp[ri], local) * (0.06 + n * 0.32) * uK);
+  }
+  // Rain: each column runs drops in slots of its own length; a slot holds at most one drop, and some slots none.
+  // In loop mode a slot divides the loop, and slot k reuses the dice of slot k mod (slots per loop).
+  float slot = 6.0 + 3.0 * h(x, 1.0);
+  float per = max(1.0, floor(uLoop / slot + 0.5));
+  if (uLoop > 0.0) slot = uLoop / per;
+  float tt = t + h(x, 2.0) * slot, k = floor(tt / slot), lt = tt - k * slot;
+  if (uLoop > 0.0) k = mod(k, per);
+  if (h(x + k * 0.37, 3.0) < 0.34) {
+    float speed = (4.0 + 10.0 * h(x, k + 4.0)) * 4.2, len = 5.0 + floor(12.0 * h(x, k + 5.0));
+    float head = floor(-h(x, k + 6.0) * uGrid.y * 0.5 + lt * speed);
+    float j = head - y;
+    if (j >= 0.0 && j < len) {
+      uint hs = (uint(x) * 73856093u) ^ (uint(y) * 19349663u);
+      int g = uRain[(hs + (j == 0.0 ? uint(t * 8.0) : 0u)) % ${RAIN.length}u];
+      float f = 1.0 - j / len;
+      if (j == 0.0) over(o, uHead, glyph(g, local) * 0.55 * uK);
+      else over(o, uTail, glyph(g, local) * (0.05 + 0.2 * f * f) * uK);
+    }
+  }
+}`;
+
+class AsciiBg extends HTMLElement {
+  static get observedAttributes() { return ['colors', 'loop']; }
+  get _manual() { return this.hasAttribute('manual'); }
+  get _loop() { return Math.max(0, parseFloat(this.getAttribute('loop') || '0') || 0); }
+  attributeChangedCallback() { if (this._gl) this._uniforms(); }
+  connectedCallback() {
+    Object.assign(this.style, { display: 'block', position: 'absolute', inset: '0', width: '100%', height: '100%', pointerEvents: 'none' });
+    if (!this._gl && !this._init()) { window.dispatchEvent(new Event('background:fail')); return; }
+    this._ro = new ResizeObserver(() => this._resize()); this._ro.observe(this);
+    this._io = new IntersectionObserver((es) => { this._vis = es[es.length - 1].isIntersecting; }); this._io.observe(this);
+    this._last = performance.now(); this._t = this._t || 0;
+    if (this._manual) return;
+    const loop = (now) => { this._raf = requestAnimationFrame(loop); this._draw(now); };
+    this._raf = requestAnimationFrame(loop);
+  }
+  disconnectedCallback() {
+    cancelAnimationFrame(this._raf);
+    this._ro?.disconnect(); this._io?.disconnect();
+    if (this._gl) {
+      this._c.removeEventListener('webglcontextlost', this._onLost);
+      const lose = this._gl.getExtension('WEBGL_lose_context');
+      lose?.loseContext();
+      this._c.remove(); this._c = this._gl = null;
+    }
+  }
+  _init() {
+    const c = document.createElement('canvas');
+    Object.assign(c.style, { position: 'absolute', inset: '0', width: '100%', height: '100%', display: 'block' });
+    // Live: refuse software rendering, which would cost more than the fallback video. The headless renderer has no GPU.
+    const gl = c.getContext('webgl2', {
+      alpha: true, premultipliedAlpha: true, antialias: false, depth: false, powerPreference: 'low-power',
+      failIfMajorPerformanceCaveat: !this._manual, preserveDrawingBuffer: this._manual,
+    });
+    if (!gl) return false;
+    const sh = (type, src) => { const s = gl.createShader(type); gl.shaderSource(s, src); gl.compileShader(s); return s; };
+    const prog = gl.createProgram();
+    gl.attachShader(prog, sh(gl.VERTEX_SHADER, VERT));
+    gl.attachShader(prog, sh(gl.FRAGMENT_SHADER, FRAG));
+    gl.linkProgram(prog);
+    if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) return false;
+    gl.useProgram(prog);
+    gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
+    const loc = gl.getAttribLocation(prog, 'aPos');
+    gl.enableVertexAttribArray(loc); gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);
+    gl.bindTexture(gl.TEXTURE_2D, gl.createTexture());
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    const U = {};
+    for (const n of ['uAtlas', 'uTile', 'uDpr', 'uBufH', 'uGrid', 'uT', 'uK', 'uLoop', 'uW', 'uField', 'uHead', 'uTail', 'uRamp', 'uRain']) U[n] = gl.getUniformLocation(prog, n);
+    gl.uniform1i(U.uAtlas, 0);
+    gl.uniform1iv(U.uRamp, ids(RAMP));
+    gl.uniform1iv(U.uRain, ids(RAIN));
+    this._onLost = (e) => { e.preventDefault(); cancelAnimationFrame(this._raf); window.dispatchEvent(new Event('background:fail')); };
+    c.addEventListener('webglcontextlost', this._onLost);
+    this.appendChild(c);
+    this._c = c; this._gl = gl; this._U = U; this._dpr = 0;
+    this._uniforms();
+    document.fonts?.load('12px "IBM Plex Mono"').then(() => { this._dpr = 0; this._resize(); });
+    return true;
+  }
+  // Palette and loop. colors = "bg,g1,g2,g3": the field is g2, a drop's head g1 and its tail between the two.
+  _uniforms() {
+    const gl = this._gl, U = this._U;
+    const [, g1 = '#b8f0a4', g2 = '#78b864'] = (this.getAttribute('colors') || '').split(',').map((s) => s.trim());
+    const c1 = rgb(g1), c2 = rgb(g2);
+    gl.uniform3fv(U.uField, c2);
+    gl.uniform3fv(U.uHead, c1);
+    gl.uniform3fv(U.uTail, c2.map((v, i) => v + (c1[i] - v) * 0.7));
+    // In loop mode each drift frequency is snapped to a whole number of cycles per loop.
+    const L = this._loop, snap = (w) => (L ? (Math.round((w * L) / TAU) * TAU) / L : w);
+    gl.uniform4f(U.uW, snap(0.55), snap(0.31), snap(0.07), snap(0.9));
+    gl.uniform1f(U.uLoop, L);
+    this._lastPaint = 0;
+  }
+  _atlas(dpr) {
+    const tw = Math.ceil(CW * dpr), th = Math.ceil(CH * dpr);
+    const a = document.createElement('canvas');
+    a.width = GLYPHS.length * tw; a.height = th;
+    const ctx = a.getContext('2d');
+    ctx.font = `${12 * dpr}px "IBM Plex Mono", ui-monospace, monospace`;
+    ctx.textBaseline = 'top';
+    ctx.fillStyle = '#fff';
+    GLYPHS.forEach((ch, i) => ctx.fillText(ch, i * tw, 0));
+    const gl = this._gl;
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, a);
+    gl.uniform2f(this._U.uTile, tw, th);
+    this._dpr = dpr;
+  }
+  _resize() {
+    if (!this._gl) return;
+    const W = this.clientWidth, H = this.clientHeight; if (!W || !H) return;
+    const dpr = Math.min(window.devicePixelRatio || 1, 2), gl = this._gl;
+    this._W = W; this._H = H;
+    this._c.width = Math.round(W * dpr); this._c.height = Math.round(H * dpr);
+    gl.viewport(0, 0, this._c.width, this._c.height);
+    if (dpr !== this._dpr) this._atlas(dpr);
+    gl.uniform1f(this._U.uDpr, this._c.height / H);
+    gl.uniform1f(this._U.uBufH, this._c.height);
+    gl.uniform2f(this._U.uGrid, Math.ceil(W / CW), Math.ceil(H / CH));
+    this._lastPaint = 0;
+  }
+  _draw(now) {
+    if (this._vis === false) { this._last = now; return; }
+    if (!this._W) { this._resize(); if (!this._W) return; }
+    const dt = Math.min(0.1, (now - this._last) / 1000); this._last = now;
+    const sp = parseFloat(this.getAttribute('speed') || '1');
+    this._t += dt * sp;
+    if (now - (this._lastPaint || 0) < 66) return; // ~15fps: quiet, cheap
+    this._lastPaint = now;
+    this._paint(this._t);
+  }
+  _paint(t) {
+    const dim = Math.max(0, Math.min(1, parseFloat(this.getAttribute('dim') ?? '0.5')));
+    const gl = this._gl;
+    gl.uniform1f(this._U.uT, t);
+    gl.uniform1f(this._U.uK, 1 - dim);
+    gl.drawArrays(gl.TRIANGLES, 0, 3);
+  }
+  /** Draws the field at time t (seconds); in loop mode t wraps around the loop. For `manual` elements. */
+  renderAt(t) {
+    if (!this._gl) return;
+    if (!this._W) { this._resize(); if (!this._W) return; }
+    const L = this._loop;
+    this._paint(L ? ((t % L) + L) % L : t);
+  }
+}
+if (!customElements.get('ascii-bg')) customElements.define('ascii-bg', AsciiBg);
+
+// Side-effect module: registers the custom element.
+export {}
diff --git a/src/components/public/background/skull-ascii.js b/src/components/public/background/skull-ascii.js
new file mode 100644
index 0000000..64a2c74
--- /dev/null
+++ b/src/components/public/background/skull-ascii.js
@@ -0,0 +1,532 @@
+// <skull-ascii colors="bg,g1,g2,g3" seed="N" loop="0" manual> — punk skulls drifting diagonally, drawn as ASCII.
+// Ported from the Claude Design page "ASCII Skull A Block Field Diagonal" (skull A, block ramp, field, diagonal mode)
+// the way bulbashenko-com/auth ported its eye drone (ui/src/components/visual/eye-ascii.js). Changes:
+// - the ASCII pass runs in shaders: the design read every frame back and drew each cell with fillText;
+// - colours come from the site palette (`colors`) instead of the design's acid green;
+// - the choreography is a seeded pure function of time; with loop="N" every motion repeats after N seconds, which the
+//   pre-rendered fallback video needs (scripts/skull-render renders this element);
+// - the skull under the pointer glitches.
+// `manual` disables the animation loop and the pointer: the caller draws with renderAt(t) once `ready` resolves to true.
+// Dispatches "background:fail" on window when WebGL2 is unavailable, software-only or lost.
+import {
+  AmbientLight, BoxGeometry, Camera, CanvasTexture, CapsuleGeometry, ConeGeometry, CylinderGeometry, Group, InstancedMesh,
+  LinearFilter, Mesh, MeshStandardMaterial, NearestFilter, NoBlending, Object3D, PerspectiveCamera, PlaneGeometry,
+  PointLight, Scene, ShaderMaterial, SphereGeometry, TorusGeometry, Vector2, Vector3, Vector4, WebGLRenderer,
+  WebGLRenderTarget,
+} from 'three';
+import { mergeGeometries } from 'three/addons/utils/BufferGeometryUtils.js';
+
+const RAMP = ' ░▒▓█';
+const GLITCH = '01<>/\\|=+*:;$#ABCDEF';
+// Every glyph in the atlas; a cell's glyph id is its index here + 1, and 0 means an empty cell.
+const GLYPHS = [...new Set([...RAMP, ...GLITCH])].filter((c) => c !== ' ');
+const gid = (c) => GLYPHS.indexOf(c) + 1;
+const FONT = 10, CW = 6, CH = 10;
+// Glyphs may spill into the rows below theirs, so atlas tiles are three rows high with the glyph in the middle row.
+const TILE_ROWS = 3;
+// Atlas tiles also carry this many device pixels on each side for the anti-aliased glyph edges.
+const PAD = 2;
+const SKULLS = 11;
+const TAU = Math.PI * 2;
+
+// ---------- deterministic randomness
+function mulberry32(a) {
+  return () => {
+    a |= 0; a = (a + 0x6d2b79f5) | 0;
+    let t = Math.imul(a ^ (a >>> 15), 1 | a);
+    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+// Integer hash of a few ints → [0, 1).
+function hashf(...n) {
+  let h = 0x9e3779b9;
+  for (const v of n) { h = Math.imul(h ^ (v | 0), 0x85ebca6b); h ^= h >>> 13; }
+  h = Math.imul(h ^ (h >>> 16), 0xc2b2ae35);
+  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;
+}
+const rgb = (hex) => [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16));
+// 16-entry palette over luminance from colour stops [[l, [r, g, b]], ...]; sRGB 0..1, flat for a vec3[16] uniform.
+const mkPal = (stops) => new Float32Array(Array.from({ length: 16 }, (_, k) => {
+  const l = k / 15;
+  let i = 0; while (i < stops.length - 2 && l > stops[i + 1][0]) i++;
+  const [a, ca] = stops[i], [b, cb] = stops[i + 1], f = Math.min(1, Math.max(0, (l - a) / (b - a)));
+  return ca.map((v, j) => Math.round(v + (cb[j] - v) * f) / 255);
+}).flat());
+
+const VERT = 'void main() { gl_Position = vec4(position.xy, 0.0, 1.0); }';
+
+// Pass 1, one fragment per cell: the scene is rendered at one pixel per cell (as in the design); pick glyph and colour.
+// Output: rgb = glyph colour (sRGB), a = glyph id / 255.
+const CELL_FRAG = `
+uniform sampler2D uScene;
+uniform vec2 uGrid;
+uniform int uRamp[8];
+uniform int uRampLen;
+uniform int uGlitchGlyphs[32];
+uniform int uGlitchLen;
+uniform vec3 uPal[16];
+uniform bool uGlitch;
+uniform vec3 uBands[6];
+uniform int uBandCount;
+uniform float uSeed;
+uniform vec4 uHover[3];
+float hash(uvec3 v) {
+  v = v * 1664525u + 1013904223u;
+  v.x += v.y * v.z; v.y += v.z * v.x; v.z += v.x * v.y;
+  v ^= v >> 16u;
+  v.x += v.y * v.z;
+  return float(v.x) / 4294967295.0;
+}
+void main() {
+  ivec2 cell = ivec2(gl_FragCoord.xy);
+  int cols = int(uGrid.x), rows = int(uGrid.y);
+  int y = rows - 1 - cell.y, off = 0;
+  if (uGlitch) for (int i = 0; i < 6; i++) {
+    if (i >= uBandCount) break;
+    if (y >= int(uBands[i].x) && y < int(uBands[i].y)) off = int(uBands[i].z);
+  }
+  // Hovered skulls (centre and radius in px, strength): rows tear sideways and glyphs swap, re-rolled at 15 Hz.
+  vec2 cp = (vec2(float(cell.x), float(y)) + 0.5) * vec2(${CW}.0, ${CH}.0);
+  float hv = 0.0;
+  for (int i = 0; i < 3; i++) if (uHover[i].w > 0.0 && distance(cp, uHover[i].xy) < uHover[i].z) hv = max(hv, uHover[i].w);
+  uint tick = uint(uSeed) / 2u;
+  if (hv > 0.0 && hash(uvec3(uint(y), tick, 77u)) < 0.35 * hv) off += int((hash(uvec3(uint(y), tick, 78u)) - 0.5) * 14.0);
+  int sx = cell.x - off;
+  sx -= cols * int(floor(float(sx) / float(cols)));
+  vec3 c = texelFetch(uScene, ivec2(sx, cell.y), 0).rgb;
+  float lum = max(c.r, max(c.g, c.b));
+  if (lum <= 0.04) { gl_FragColor = vec4(0.0); return; }
+  int g = uRamp[1 + min(uRampLen - 2, int(floor(pow(lum, 0.85) * float(uRampLen - 1))))];
+  uint s = uint(uSeed);
+  if (hash(uvec3(cell, s)) < (uGlitch ? 0.04 : 0.0) + 0.2 * hv) g = uGlitchGlyphs[min(uGlitchLen - 1, int(hash(uvec3(cell, s + 7919u)) * float(uGlitchLen)))];
+  gl_FragColor = vec4(uPal[min(15, int(lum * 16.0))], float(g) / 255.0);
+}`;
+
+// Pass 2, one fragment per cell: the glow layer (the design's blurred, saturated copy of the ASCII canvas). Each cell's
+// colour weighted by its glyph's ink coverage, Gaussian-blurred over its neighbours (σ = 6px: 1 column, 0.6 rows).
+const GLOW_FRAG = `
+uniform sampler2D uCells;
+uniform vec2 uGrid;
+uniform float uCover[32];
+void main() {
+  ivec2 cell = ivec2(gl_FragCoord.xy), grid = ivec2(uGrid);
+  vec3 acc = vec3(0.0);
+  for (int dy = -1; dy <= 1; dy++) for (int dx = -2; dx <= 2; dx++) {
+    ivec2 q = cell + ivec2(dx, dy);
+    if (q.x < 0 || q.y < 0 || q.x >= grid.x || q.y >= grid.y) continue;
+    vec4 c = texelFetch(uCells, q, 0);
+    int g = int(c.a * 255.0 + 0.5);
+    if (g == 0) continue;
+    acc += c.rgb * uCover[g] * exp(-0.5 * float(dx * dx) - 1.389 * float(dy * dy));
+  }
+  acc /= 3.7226;
+  float l = dot(acc, vec3(0.2126, 0.7152, 0.0722));
+  gl_FragColor = vec4(clamp(mix(vec3(l), acc, 1.3), 0.0, 1.0), 1.0);
+}`;
+
+// Pass 3, per screen pixel. A lit cell is first filled with the background colour (the design masks the field under the
+// skulls), then the glyphs of the own row and the rows above and below are composited, top row first, in the order
+// fillText drew them; neighbour columns count within the atlas padding, so anti-aliased edges meet without seams.
+// Last, the glow is screened on top at half strength.
+const OUT_FRAG = `
+uniform sampler2D uCells;
+uniform sampler2D uGlow;
+uniform sampler2D uAtlas;
+uniform vec2 uGrid;
+uniform float uDpr;
+uniform float uBufH;
+uniform vec2 uTile;
+uniform vec2 uAtlasSize;
+uniform vec3 uBg;
+uniform float uFlick;
+uniform float uGlowK;
+void main() {
+  vec2 p = vec2(gl_FragCoord.x, uBufH - gl_FragCoord.y) / uDpr;
+  int col = int(floor(p.x / ${CW}.0)), rc = int(floor(p.y / ${CH}.0)), cols = int(uGrid.x), rows = int(uGrid.y);
+  vec4 o = vec4(0.0);
+  if (col < cols && rc < rows && texelFetch(uCells, ivec2(col, rows - 1 - rc), 0).a > 0.0) o = vec4(uBg, 1.0);
+  for (int k = -1; k <= 1; k++) {
+    int r = rc + k;
+    if (r < 0 || r >= rows) continue;
+    float ly = (p.y - float(r) * ${CH}.0 + ${CH}.0) * uDpr;
+    for (int m = -1; m <= 1; m++) {
+      int c = col + m;
+      float lx = (p.x - float(c) * ${CW}.0) * uDpr + ${PAD}.0;
+      if (c < 0 || c >= cols || lx < 0.0 || lx >= uTile.x) continue;
+      vec4 cell = texelFetch(uCells, ivec2(c, rows - 1 - r), 0);
+      int g = int(cell.a * 255.0 + 0.5);
+      if (g == 0) continue;
+      float a = texture2D(uAtlas, vec2(float(g - 1) * uTile.x + lx, ly) / uAtlasSize).a * uFlick;
+      o = vec4(cell.rgb * a, a) + o * (1.0 - a);
+    }
+  }
+  vec3 glow = texture2D(uGlow, vec2(p.x / (${CW}.0 * uGrid.x), 1.0 - p.y / (${CH}.0 * uGrid.y))).rgb * uGlowK;
+  float a = o.a + max(glow.r, max(glow.g, glow.b)) * (1.0 - o.a);
+  gl_FragColor = vec4(min(o.rgb + glow * (1.0 - o.rgb), vec3(a)), a);
+}`;
+
+// ---------- skull A (the design's v1)
+function buildSkull() {
+  const bone = new MeshStandardMaterial({ color: 0xf2ffe0, roughness: 0.55, metalness: 0.05 });
+  const voidM = new MeshStandardMaterial({ color: 0x020302, roughness: 1 });
+  const neon = new MeshStandardMaterial({ color: 0xb6ff3a, emissive: 0x9aff1a, emissiveIntensity: 0.9, roughness: 0.4 });
+  const chrome = new MeshStandardMaterial({ color: 0xd8e8d0, roughness: 0.2, metalness: 0.9 });
+  const g = new Group();
+  const add = (geo, mat, pos, scale, rot) => {
+    const m = new Mesh(geo, mat);
+    m.position.set(...pos); if (scale) m.scale.set(...scale); if (rot) m.rotation.set(...rot);
+    g.add(m); return m;
+  };
+  const S = (r, w = 48, h = 32) => new SphereGeometry(r, w, h);
+  const side = (fn) => { for (const sx of [-1, 1]) fn(sx); };
+  add(S(1, 72, 56), bone, [0, 0.35, -0.1], [0.92, 0.95, 1.08]);
+  add(S(0.72), bone, [0, 0.5, 0.34], [1.05, 0.95, 0.78]);
+  add(S(0.62), bone, [0, 0.2, -0.78], [1.05, 0.95, 0.8]);
+  add(new CapsuleGeometry(0.06, 0.7, 6, 20), bone, [0, -0.08, -1.02], null, [0, 0, Math.PI / 2]);
+  add(new TorusGeometry(1.0, 0.012, 6, 96, Math.PI * 0.75), voidM, [0, 0.35, -0.1], [1.002, 0.952, 1.082], [0, Math.PI / 2, Math.PI * 0.2]);
+  add(new BoxGeometry(0.018, 0.42, 0.02), voidM, [-0.28, 0.78, 0.8], null, [0.6, 0.3, 0.5]);
+  add(new BoxGeometry(0.016, 0.22, 0.02), voidM, [-0.42, 0.66, 0.76], null, [0.4, 0.5, -0.4]);
+  add(S(0.62), bone, [0, -0.3, 0.3], [1.05, 0.8, 0.9]);
+  add(new BoxGeometry(0.1, 0.22, 0.08), bone, [0, 0.04, 0.95], null, [-0.25, 0, 0]);
+  add(S(0.12), bone, [0, 0.2, 0.93], [1.3, 0.7, 0.6]);
+  side((sx) => {
+    add(new CapsuleGeometry(0.075, 0.3, 8, 24), bone, [sx * 0.31, 0.25, 0.86], [1, 1, 0.8], [0, -sx * 0.35, Math.PI / 2 + sx * 0.12]);
+    add(new TorusGeometry(0.25, 0.045, 12, 48), bone, [sx * 0.33, 0.0, 0.84], [1.05, 0.92, 1], [0, sx * 0.3, 0]);
+    add(S(0.26), voidM, [sx * 0.33, 0.0, 0.8], [1.02, 0.92, 0.55]);
+    add(S(0.035, 16, 12), neon, [sx * 0.31, -0.02, 0.83]);
+    add(S(0.2), bone, [sx * 0.55, -0.2, 0.52], [1.15, 0.75, 0.95]);
+    add(new CapsuleGeometry(0.055, 0.4, 6, 20), bone, [sx * 0.71, -0.2, 0.15], null, [Math.PI / 2, 0, 0]);
+    add(S(0.3), voidM, [sx * 0.84, 0.0, 0.15], [0.22, 0.75, 0.7]);
+    add(S(0.11), bone, [sx * 0.62, -0.42, -0.32], [1, 1.4, 1]);
+    add(S(0.25, 32, 24), bone, [sx * 0.53, -0.56, -0.02], [0.24, 0.9, 0.6], [0.15, 0, sx * 0.12]);
+    add(S(0.08), bone, [sx * 0.6, -0.34, -0.12]);
+    add(new ConeGeometry(0.06, 0.26, 3), voidM, [sx * 0.045, -0.26, 0.9], [1, 1, 0.6], [0.25, 0, Math.PI - sx * 0.12]);
+  });
+  add(new BoxGeometry(0.015, 0.18, 0.04), bone, [0, -0.28, 0.93]);
+  add(S(0.6), bone, [0, -0.78, 0.12], [0.88, 0.48, 0.88]);
+  add(S(0.2), bone, [0, -0.98, 0.55], [1.4, 0.7, 0.8]);
+  add(new BoxGeometry(0.66, 0.03, 0.22), voidM, [0, -0.66, 0.72]);
+  const N = 12;
+  for (let i = 0; i < N; i++) {
+    const a = (i - (N - 1) / 2) * 0.14;
+    const canine = i === 3 || i === N - 4;
+    const tooth = new BoxGeometry(0.058, canine ? 0.15 : 0.12, 0.06);
+    add(tooth, bone, [Math.sin(a) * 0.48, -0.588 - (canine ? 0.015 : 0), 0.32 + Math.cos(a) * 0.45], null, [0, a, 0]);
+    add(tooth, bone, [Math.sin(a) * 0.46, -0.732 + (canine ? 0.015 : 0), 0.32 + Math.cos(a) * 0.43], null, [0, a, 0]);
+  }
+  for (let i = 0; i < 11; i++) {
+    const phi = 0.5 + i * 0.18;
+    const h = 0.7 - Math.abs(i - 3) * 0.045;
+    add(new ConeGeometry(0.06, h, 24), neon,
+      [0, 0.35 + 0.95 * Math.sin(phi) + Math.sin(phi) * h * 0.42, -0.1 + 1.08 * Math.cos(phi) + Math.cos(phi) * h * 0.42],
+      null, [Math.PI / 2 - phi, 0, 0]);
+  }
+  add(new CylinderGeometry(0.2, 0.2, 0.05, 32), chrome, [0.84, 0.45, -0.05], null, [0, 0, Math.PI / 2 - 0.3]);
+  add(new TorusGeometry(0.13, 0.025, 12, 48), neon, [0.87, 0.46, -0.05], null, [0, Math.PI / 2, -0.3]);
+  add(S(0.05, 16, 12), neon, [0.88, 0.46, -0.05]);
+  add(new TorusGeometry(0.55, 0.018, 8, 64, Math.PI * 0.6), chrome, [0.55, 0.05, -0.35], null, [0, Math.PI / 2, Math.PI * 1.1]);
+  for (let i = 0; i < 3; i++) add(S(0.03, 12, 8), chrome, [0.8 - i * 0.02, 0.72 - i * 0.12, 0.25 + i * 0.05]);
+  add(S(0.032, 16, 12), chrome, [-0.665, -0.385, -0.12]);
+  add(new TorusGeometry(0.09, 0.018, 12, 40), chrome, [-0.67, -0.475, -0.12], null, [0, Math.PI / 2, 0]);
+  return g;
+}
+
+// All skulls in one draw call per material: each part's transform is baked into its geometry, the parts are merged per
+// material, and every skull is an instance (the design drew ~60 meshes per skull, ~700 per frame).
+function instanceSkulls(skull, count) {
+  skull.updateMatrixWorld(true);
+  const parts = new Map();
+  skull.traverse((m) => {
+    if (!m.isMesh) return;
+    if (!parts.has(m.material)) parts.set(m.material, []);
+    parts.get(m.material).push(m.geometry.clone().applyMatrix4(m.matrixWorld));
+  });
+  return [...parts].map(([material, geos]) => {
+    const mesh = new InstancedMesh(mergeGeometries(geos), material, count);
+    mesh.frustumCulled = false; // instances move every frame; the cached bounds would go stale
+    return mesh;
+  });
+}
+
+// ---------- choreography: a pure function of time s (seconds)
+// Diagonal mode: each skull crosses the screen top-left → bottom-right, then the next crossing starts off-screen with a
+// new lane, depth, size and spin axis. With a loop, periods are snapped so that everything repeats after `loop` seconds.
+function choreography(seed, loop) {
+  const rand = mulberry32(seed);
+  const rnd = (a, b) => a + rand() * (b - a);
+  const per = (p) => (loop ? loop / Math.max(1, Math.round(loop / p)) : p);
+  const count = (p) => (loop ? Math.round(loop / p) : 0);
+  const wrap = (k, n) => (n ? ((k % n) + n) % n : k);
+  const snap = (w) => (loop ? (Math.sign(w) * TAU * Math.max(1, Math.round((Math.abs(w) * loop) / TAU))) / loop : w);
+  const tracks = Array.from({ length: SKULLS }, (_, i) => {
+    // The design advances 0.035–0.07 of a crossing per second; a crossing spans 1.3 (−0.15 … 1.15).
+    const period = per(1.3 / rnd(0.035, 0.07));
+    return { i, period, n: count(period), phase: rand(), spin: snap(rnd(0.8, 2.2) * (rand() < 0.5 ? -1 : 1)), k: NaN, leg: null };
+  });
+  const leg = (tr, k) => {
+    if (tr.k !== k) {
+      const r = (j) => hashf(seed, tr.i, wrap(k, tr.n), j);
+      tr.k = k;
+      tr.leg = { lane: r(0) * 2 - 1, z: -6 + 7.5 * r(1), sc: 0.55 + 0.45 * r(2), ax: new Vector3(r(3) * 2 - 1, r(4) * 2 - 1, r(5) - 0.5).normalize() };
+    }
+    return tr.leg;
+  };
+  // Glitch bursts: at most one per slot of ~2.8 s (the design fires one every 2.8 s on average).
+  const gSlot = per(2.8), gN = count(gSlot);
+  const glitch = (s, cols, rows) => {
+    const k = Math.floor(s / gSlot), r = (j) => hashf(seed, 0x6c, wrap(k, gN), j);
+    const t0 = k * gSlot + r(1) * (gSlot - 0.3);
+    if (r(0) > 0.8 || s < t0 || s >= t0 + 0.08 + 0.18 * r(2)) return null;
+    return Array.from({ length: 2 + Math.floor(4 * r(3)) }, (_, b) => {
+      const y0 = Math.floor(r(4 + 3 * b) * rows);
+      return [y0, y0 + 1 + Math.floor(6 * r(5 + 3 * b)), Math.trunc((r(6 + 3 * b) - 0.5) * cols * 0.25)];
+    });
+  };
+  // Canvas flicker at 30 Hz: a 4% chance per tick of a dip to 0.72 that recovers by 35% per tick, plus 3% jitter.
+  const ticks = loop * 30;
+  const flick = (s) => {
+    const n = Math.floor(s * 30);
+    let f = 1;
+    for (let j = 0; j < 6; j++) if (hashf(seed, 0xf1, wrap(n - j, ticks)) < 0.04) f -= 0.098 * 0.65 ** j;
+    return f * (0.97 + 0.03 * hashf(seed, 0xf2, wrap(n, ticks)));
+  };
+  return { tracks, leg, glitch, flick, lightW: snap(13) };
+}
+
+class SkullAscii extends HTMLElement {
+  static get observedAttributes() { return ['colors']; }
+  get _manual() { return this.hasAttribute('manual'); }
+  constructor() {
+    super();
+    this._t = 0; this._frame = this._frame.bind(this);
+    this.ready = new Promise((resolve) => { this._resolveReady = resolve; });
+  }
+  attributeChangedCallback() { if (this._r) this._palette(); }
+  connectedCallback() {
+    Object.assign(this.style, { display: 'block', position: 'absolute', inset: '0', width: '100%', height: '100%', pointerEvents: 'none' });
+    if (!this._manual) {
+      this._onMove = (e) => { this._ptr = { x: e.clientX, y: e.clientY }; };
+      this._onOut = (e) => { if (!e.relatedTarget) this._ptr = null; };
+      window.addEventListener('pointermove', this._onMove, { passive: true });
+      window.addEventListener('pointerout', this._onOut);
+    }
+    this._ro = new ResizeObserver(() => this._resize()); this._ro.observe(this);
+    this._io = new IntersectionObserver((es) => { this._vis = es[es.length - 1].isIntersecting; }); this._io.observe(this);
+    this._start();
+  }
+  disconnectedCallback() {
+    cancelAnimationFrame(this._raf); this._raf = 0;
+    if (this._onMove) {
+      window.removeEventListener('pointermove', this._onMove);
+      window.removeEventListener('pointerout', this._onOut);
+    }
+    this._ro?.disconnect(); this._io?.disconnect();
+    this._teardown();
+  }
+  _fail() {
+    cancelAnimationFrame(this._raf); this._raf = 0;
+    this._resolveReady(false);
+    window.dispatchEvent(new Event('background:fail'));
+  }
+  _teardown() {
+    if (!this._r) return;
+    const R = this._r; this._r = null;
+    this._gpu.forEach((o) => o.dispose());
+    R.domElement.removeEventListener('webglcontextlost', this._onLost);
+    R.dispose(); R.forceContextLoss(); R.domElement.remove();
+  }
+  _start() {
+    if (!this._r) {
+      const manual = this._manual;
+      let R;
+      // Live: refuse software rendering, which would cost more than the fallback video. The headless renderer has no GPU.
+      try {
+        R = new WebGLRenderer({ alpha: true, antialias: false, powerPreference: 'low-power', failIfMajorPerformanceCaveat: !manual, preserveDrawingBuffer: manual });
+      } catch { this._fail(); return; }
+      this._r = R;
+      R.setClearColor(0x000000, 0);
+      R.autoClear = false;
+      Object.assign(R.domElement.style, { position: 'absolute', inset: '0', width: '100%', height: '100%', display: 'block' });
+      this._onLost = (e) => { e.preventDefault(); this._fail(); };
+      R.domElement.addEventListener('webglcontextlost', this._onLost);
+      this.appendChild(R.domElement);
+      if (!this._scene) {
+        const scene = new Scene(); this._scene = scene;
+        this._cam = new PerspectiveCamera(36, 1, 0.1, 80);
+        this._cam.position.set(0, 0.05, 6);
+        this._key = new PointLight(0xd9ff9a, 70, 0, 2); this._key.position.set(3.5, 3, 4.5);
+        const fill = new PointLight(0x5cff5c, 25, 0, 2); fill.position.set(-4, -1, 3);
+        const rim = new PointLight(0xb6ff3a, 50, 0, 2); rim.position.set(0, 3, -5);
+        scene.add(this._key, fill, rim, new AmbientLight(0x1c2a12, 0.5));
+        this._parts = instanceSkulls(buildSkull(), SKULLS);
+        scene.add(...this._parts);
+        // Transforms only; the instances above draw them.
+        this._skulls = Array.from({ length: SKULLS }, () => Object.assign(new Object3D(), { userData: { hover: 0 } }));
+        const seed = Number(this.getAttribute('seed')) >>> 0 || (Math.random() * 2 ** 32) >>> 0;
+        this._loop = Math.max(0, parseFloat(this.getAttribute('loop') || '0') || 0);
+        this._C = choreography(seed, this._loop);
+      }
+      const cellOpts = { minFilter: NearestFilter, magFilter: NearestFilter, generateMipmaps: false, depthBuffer: false };
+      this._rt = new WebGLRenderTarget(1, 1, { minFilter: NearestFilter, magFilter: NearestFilter, generateMipmaps: false });
+      this._cells = new WebGLRenderTarget(1, 1, cellOpts);
+      this._glow = new WebGLRenderTarget(1, 1, { ...cellOpts, minFilter: LinearFilter, magFilter: LinearFilter });
+      this._atlasCanvas = document.createElement('canvas');
+      this._atlas = new CanvasTexture(this._atlasCanvas);
+      Object.assign(this._atlas, { flipY: false, generateMipmaps: false, minFilter: LinearFilter, magFilter: LinearFilter });
+      const ints = (a) => { const out = new Int32Array(32); out.set(a); return out; };
+      const pass = (fragmentShader, uniforms) => new ShaderMaterial({ vertexShader: VERT, fragmentShader, uniforms, blending: NoBlending, depthTest: false, depthWrite: false });
+      this._cellMat = pass(CELL_FRAG, {
+        uScene: { value: this._rt.texture }, uGrid: { value: new Vector2(1, 1) },
+        uRamp: { value: new Int32Array([...RAMP].map((c) => (c === ' ' ? 0 : gid(c))).concat([0, 0, 0])) }, uRampLen: { value: RAMP.length },
+        uGlitchGlyphs: { value: ints([...GLITCH].map(gid)) }, uGlitchLen: { value: GLITCH.length },
+        uPal: { value: new Float32Array(48) }, uGlitch: { value: false }, uBands: { value: new Float32Array(18) }, uBandCount: { value: 0 }, uSeed: { value: 0 },
+        uHover: { value: Array.from({ length: 3 }, () => new Vector4()) },
+      });
+      this._glowMat = pass(GLOW_FRAG, {
+        uCells: { value: this._cells.texture }, uGrid: { value: new Vector2(1, 1) }, uCover: { value: new Float32Array(32) },
+      });
+      this._outMat = pass(OUT_FRAG, {
+        uCells: { value: this._cells.texture }, uGlow: { value: this._glow.texture }, uAtlas: { value: this._atlas },
+        uGrid: { value: new Vector2(1, 1) }, uDpr: { value: 1 }, uBufH: { value: 1 },
+        uTile: { value: new Vector2(1, 1) }, uAtlasSize: { value: new Vector2(1, 1) },
+        uBg: { value: new Vector3() }, uFlick: { value: 1 }, uGlowK: { value: 0.5 },
+      });
+      const geo = new PlaneGeometry(2, 2);
+      this._quad = new Mesh(geo, this._cellMat); this._quad.frustumCulled = false;
+      this._quadScene = new Scene(); this._quadScene.add(this._quad);
+      this._quadCam = new Camera();
+      this._gpu = [this._rt, this._cells, this._glow, this._atlas, this._cellMat, this._glowMat, this._outMat, geo];
+      this._atlasDpr = 0;
+      this._palette();
+      document.fonts?.load(`${FONT}px "IBM Plex Mono"`).then(() => { this._atlasDpr = 0; this._resize(); });
+    }
+    this._resize();
+    this._last = performance.now();
+    this._resolveReady(true);
+    if (!this._manual && !this._raf) this._raf = requestAnimationFrame(this._frame);
+  }
+  // colors = "bg,g1,g2,g3". Glyphs run g3 → g2 → g1 with luminance and the brightest bleach toward white, as the
+  // design's acid green did; lit cells hide the field behind them with bg.
+  _palette() {
+    const [bg = '#060b06', g1 = '#b8f0a4', g2 = '#78b864', g3 = '#4a7840'] = (this.getAttribute('colors') || '').split(',').map((s) => s.trim());
+    const c1 = rgb(g1), hi = c1.map((v) => v + (255 - v) * 0.6);
+    this._cellMat.uniforms.uPal.value = mkPal([[0, rgb(g3)], [0.5, rgb(g2)], [0.8, c1], [1, hi]]);
+    this._outMat.uniforms.uBg.value.set(...rgb(bg).map((v) => v / 255));
+  }
+  _buildAtlas(dpr) {
+    const tw = Math.ceil(CW * dpr) + 2 * PAD, th = Math.ceil(TILE_ROWS * CH * dpr);
+    const c = this._atlasCanvas;
+    c.width = GLYPHS.length * tw; c.height = th;
+    const ctx = c.getContext('2d', { willReadFrequently: true });
+    ctx.clearRect(0, 0, c.width, c.height);
+    ctx.font = `${FONT * dpr}px "IBM Plex Mono", ui-monospace, monospace`;
+    ctx.textBaseline = 'top';
+    ctx.fillStyle = '#fff';
+    GLYPHS.forEach((ch, i) => ctx.fillText(ch, i * tw + PAD, CH * dpr));
+    // Ink per glyph, relative to a full cell, for the glow pass (one readback per atlas build).
+    const px = ctx.getImageData(0, 0, c.width, c.height).data, cover = this._glowMat.uniforms.uCover.value;
+    GLYPHS.forEach((_, i) => {
+      let sum = 0;
+      for (let y = 0; y < th; y++) for (let x = i * tw; x < (i + 1) * tw; x++) sum += px[(y * c.width + x) * 4 + 3];
+      cover[i + 1] = Math.min(1, sum / 255 / (CW * CH * dpr * dpr));
+    });
+    // A resized canvas needs a fresh GPU texture.
+    this._atlas.dispose(); this._atlas.needsUpdate = true;
+    const u = this._outMat.uniforms;
+    u.uTile.value.set(tw, th); u.uAtlasSize.value.set(c.width, c.height);
+    this._atlasDpr = dpr;
+  }
+  _resize() {
+    if (!this._r) return;
+    const W = this.clientWidth, H = this.clientHeight;
+    if (!W || !H) return;
+    const dpr = Math.min(window.devicePixelRatio || 1, 2), R = this._r;
+    this._W = W; this._H = H;
+    const cols = (this._cols = Math.ceil(W / CW)), rows = (this._rows = Math.ceil(H / CH));
+    R.setPixelRatio(dpr); R.setSize(W, H, false);
+    this._rt.setSize(cols, rows); this._cells.setSize(cols, rows); this._glow.setSize(cols, rows);
+    if (dpr !== this._atlasDpr) this._buildAtlas(dpr);
+    this._cellMat.uniforms.uGrid.value.set(cols, rows);
+    this._glowMat.uniforms.uGrid.value.set(cols, rows);
+    const buf = R.getDrawingBufferSize(new Vector2()), u = this._outMat.uniforms;
+    u.uGrid.value.set(cols, rows);
+    u.uDpr.value = buf.y / H; u.uBufH.value = buf.y;
+    const cam = this._cam;
+    cam.aspect = (cols * CW) / (rows * CH);
+    cam.fov = cam.aspect < 1 ? (36 / cam.aspect) * 0.85 : 36;
+    cam.updateProjectionMatrix();
+  }
+  _viewHalf(z) {
+    const h = Math.tan(((this._cam.fov / 2) * Math.PI) / 180) * (6 - z);
+    return [h * this._cam.aspect, h];
+  }
+  _place(s, dt) {
+    const C = this._C, P = dt !== undefined ? this._ptr : null;
+    const GW = this._cols * CW, GH = this._rows * CH, hover = [];
+    this._skulls.forEach((k, i) => {
+      const tr = C.tracks[i], u = tr.phase + s / tr.period, kc = Math.floor(u), p = -0.15 + 1.3 * (u - kc);
+      const L = C.leg(tr, kc);
+      const [hw, hh] = this._viewHalf(L.z), m = 2.2;
+      const sx = -hw - m, sy = hh + m, ex = hw + m, ey = -hh - m;
+      const dx = ex - sx, dy = ey - sy, len = Math.hypot(dx, dy);
+      const px = -dy / len, py = dx / len, spread = Math.max(hw, hh) * 1.1;
+      const x = sx + dx * p + px * L.lane * spread, y = sy + dy * p + py * L.lane * spread;
+      k.position.set(x, y, L.z);
+      k.scale.setScalar(L.sc);
+      k.quaternion.setFromAxisAngle(L.ax, tr.spin * s + i);
+      if (dt !== undefined) {
+        // Live only. The skull on screen (px over the cell grid) against the pointer.
+        const cx = (x / hw * 0.5 + 0.5) * GW, cy = (0.5 - (y - 0.05) / hh * 0.5) * GH, r = (1.35 * L.sc / hh) * GH * 0.5;
+        const d = P ? Math.hypot(P.x - cx, P.y - cy) : Infinity;
+        k.userData.hover += ((d < r ? 1 : 0) - k.userData.hover) * Math.min(1, dt * 8);
+        if (k.userData.hover > 0.02) hover.push([cx, cy, r * 1.15, k.userData.hover, L.z]);
+      }
+      k.updateMatrix();
+      this._parts.forEach((part) => part.setMatrixAt(i, k.matrix));
+    });
+    this._parts.forEach((part) => { part.instanceMatrix.needsUpdate = true; });
+    // The nearest hovered skulls glitch (the shader takes three).
+    const slots = this._cellMat.uniforms.uHover.value;
+    hover.sort((a, b) => b[4] - a[4]);
+    slots.forEach((v, j) => (hover[j] ? v.set(...hover[j].slice(0, 4)) : v.set(0, 0, 0, 0)));
+  }
+  _pass(mat, target) {
+    this._quad.material = mat;
+    this._r.setRenderTarget(target);
+    this._r.render(this._quadScene, this._quadCam);
+  }
+  _draw(s, dt) {
+    const C = this._C, R = this._r;
+    this._place(s, dt);
+    this._key.intensity = 70 + Math.sin(s * C.lightW) * 3;
+    R.setRenderTarget(this._rt); R.clear(); R.render(this._scene, this._cam);
+    const u = this._cellMat.uniforms, bands = C.glitch(s, this._cols, this._rows);
+    u.uGlitch.value = !!bands;
+    (bands || []).slice(0, 6).forEach((b, i) => u.uBands.value.set(b, i * 3));
+    u.uBandCount.value = bands ? Math.min(6, bands.length) : 0;
+    u.uSeed.value = Math.floor(s * 30) % 16777216;
+    this._outMat.uniforms.uFlick.value = C.flick(s);
+    this._pass(this._cellMat, this._cells);
+    this._pass(this._glowMat, this._glow);
+    R.setRenderTarget(null); R.clear();
+    this._pass(this._outMat, null);
+  }
+  _frame(now) {
+    this._raf = requestAnimationFrame(this._frame);
+    if (this._vis === false) { this._last = now; return; }
+    if (now - (this._last || 0) < 32) return; // ~30fps
+    if (!this._W) { this._resize(); if (!this._W) return; }
+    const dt = Math.min(0.1, (now - this._last) / 1000); this._last = now;
+    this._t += dt;
+    this._draw(this._t, dt);
+  }
+  /** Draws the frame at time t (seconds); in loop mode t wraps around the loop. For `manual` elements, after `ready`. */
+  renderAt(t) {
+    if (!this._r) return;
+    if (!this._W) { this._resize(); if (!this._W) return; }
+    const L = this._loop;
+    this._draw(L ? ((t % L) + L) % L : t);
+  }
+}
+if (!customElements.get('skull-ascii')) customElements.define('skull-ascii', SkullAscii);
diff --git a/src/lib/background.ts b/src/lib/background.ts
index 471e525..baea2e0 100644
--- a/src/lib/background.ts
+++ b/src/lib/background.ts
@@ -3,7 +3,8 @@ import { join } from "node:path";
 import { z } from "zod";
 import type { SkullBackgroundData } from "@/types";
 
-// Written weekly by scripts/skull-render/publish.mjs (see .github/workflows/skull-background.yml).
+// The fallback render of the skull background (video + poster), written weekly by scripts/skull-render/publish.mjs
+// (see .github/workflows/skull-background.yml). Browsers with WebGL2 draw the background live and never fetch it.
 const manifestSchema = z.object({
   week: z.string(),
   seed: z.number(),
diff --git a/src/types/custom-elements.d.ts b/src/types/custom-elements.d.ts
new file mode 100644
index 0000000..923beec
--- /dev/null
+++ b/src/types/custom-elements.d.ts
@@ -0,0 +1,13 @@
+import type { DetailedHTMLProps, HTMLAttributes } from "react";
+
+type Element<Attrs> = DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> & Attrs;
+
+// The live background (src/components/public/background/*.js).
+declare module "react" {
+  namespace JSX {
+    interface IntrinsicElements {
+      "ascii-bg": Element<{ dim?: string; colors?: string; loop?: string; manual?: string }>;
+      "skull-ascii": Element<{ colors?: string; seed?: string; loop?: string; manual?: string }>;
+    }
+  }
+}