Draw the skull background live with WebGL2

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

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": {

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"
   }
 }

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 {