From f75743b9b8951a092615a278d9202722f4b579f6 Mon Sep 17 00:00:00 2001
From: Aleksandr Albekov <bulbashenko69@gmail.com>
Date: Mon, 12 Oct 2026 20:20:02 +0200
Subject: [PATCH] Draw the skull background live with WebGL2

The new design (skull A, block ramp, field, diagonal skulls) is drawn in
the browser instead of played from a pre-rendered video, the same way
auth draws its eye: three.js renders the scene at one pixel per cell, and
shaders turn it into glyphs from an atlas. Nothing is read back and
fillText is never called. All 11 skulls are instances of one merged mesh
per material, so a frame takes 4 draw calls instead of about 700.

Colours come from the active palette (bg, g1-g3) instead of the
design's acid green, and they follow the Tweaks palette switch. The skull
under the pointer glitches.

The weekly video stays as the fallback for browsers without WebGL2, with
a lost context, or too slow to keep 28 fps. It is now rendered from the
same elements in loop mode, so it shows the new background and loops
seamlessly. Reduced motion and Save-Data still get the poster, and
phones still get nothing.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 README.md                                     |   4 +-
 package-lock.json                             |   7 +
 package.json                                  |   1 +
 scripts/skull-render/package-lock.json        |  16 +-
 scripts/skull-render/package.json             |   4 +-
 scripts/skull-render/serve.mjs                |   8 +-
 scripts/skull-render/skull.html               | 276 +--------
 src/components/public/PublicSite.module.css   |   2 +-
 src/components/public/PublicSite.tsx          |   5 +-
 .../public/SkullBackground.module.css         |  31 +
 src/components/public/SkullBackground.tsx     | 120 +++-
 src/components/public/background/ascii-bg.js  | 208 +++++++
 .../public/background/skull-ascii.js          | 532 ++++++++++++++++++
 src/lib/background.ts                         |   3 +-
 src/types/custom-elements.d.ts                |  13 +
 15 files changed, 951 insertions(+), 279 deletions(-)
 create mode 100644 src/components/public/background/ascii-bg.js
 create mode 100644 src/components/public/background/skull-ascii.js
 create mode 100644 src/types/custom-elements.d.ts

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 }>;
+    }
+  }
+}