koi: swap the sakura panels for a shoal of letter-drawn koi

Five varieties (kohaku, ogon, sanke, showa, tancho) swim in the side
margins, drawn the way the reference does it: every cell is a filled tile
in the koi's colour with a letter punched into it in near-black, picked
from a thin-to-thick ramp by how dense that part of the body is. The tile
carries the colour, the letter carries the texture.

The grid is square and the geometry is in pixels, snapping to cells only
when one is written. Laying the body out in grid cells instead makes its
proportions depend on heading -- thickness is perpendicular to travel, so
on the natural text grid a fish swimming sideways came out short and fat
while one swimming up came out slim.

The body is a follow-the-leader chain with a bend limit per joint. A spine
projected from the head rotates rigidly the moment the fish turns, and a
raw position trail coils into a ball; the chain lags and the bend cap
keeps it from curling. Swimming comes from the head yawing with the tail
beat, which the chain propagates as a travelling wave.

Tails dissolve into loose tiles toward the tip, and the panels carry a 1em
cell grid so the motion reads against something.

Drops the sakura wiring: no art.php parse, no sideart.php stylesheet, no
<pre> layers, and the inlined sideart @font-face goes with them (-6.9 KB
of base64 from style.css). art.php, sideart.php, sakura.ans and the woff2
are left on disk, now unreferenced.

404.php

@@ -0,0 +1,12 @@
+<?php
+// Caddy's handle_errors 404 rewrites here, so set the status ourselves.
+require_once __DIR__ . '/config.php';
+
+http_response_code(404);
+$page_title = '404 · ' . SITE_TITLE;
+require __DIR__ . '/inc/header.php';
+?>
+<p class="back-link"><a href="/">&larr; go home</a></p>
+<h1>404</h1>
+<p>nothing here.</p>
+<?php require __DIR__ . '/inc/footer.php'; ?>

button.php

@@ -0,0 +1,22 @@
+<?php
+// Serves an 88x31 button from the local cache (see inc/buttons.php).
+require_once __DIR__ . '/config.php';
+
+$h = $_GET['h'] ?? '';
+$file = DATA_DIR . '/buttons/' . $h;
+if (!preg_match('/^[0-9a-f]{32}$/', $h) || !is_file($file)) {
+    http_response_code(404);
+    exit;
+}
+
+$raw = (string) file_get_contents($file);
+$nl = strpos($raw, "\n");
+$type = $nl !== false ? substr($raw, 0, $nl) : '';
+if (!preg_match('#^image/[\w.+-]+$#', $type)) {
+    http_response_code(404);
+    exit;
+}
+
+header('Content-Type: ' . $type);
+header('Cache-Control: public, max-age=31536000, immutable'); // URL carries ?v=<mtime>
+echo substr($raw, $nl + 1);

config.php

@@ -1,6 +1,6 @@
 <?php
 const DISCORD_ID = '298221448642953217';
 const SITE_TITLE = '0xA0.dev';
-const REPO_URL   = 'https://git.0xa0.dev';
+const REPO_URL   = 'https://git.0xa0.dev/0xA0/0xa0.dev';
 
 define('DATA_DIR', getenv('DATA_DIR') ?: '/var/www/data');

css/style.css

@@ -186,3 +186,84 @@ button {
   padding-left: 1rem;
   color: var(--muted);
 }
+
+/* The koi own the margins now. Cell size comes straight from this font-size,
+   and the body is 16 cells long, so this is the dial for how big they are.
+   The column shadow (body::before, z-index -1) fades them toward the text. */
+.koi {
+  position: fixed;
+  top: 0;
+  z-index: -2;
+  width: calc(50% - 360px);
+  height: 100vh;
+  pointer-events: none;
+  user-select: none;
+  /* font-size IS the square cell size in px -- the one size dial */
+  font: clamp(7px, 0.95vh, 10px) / 1 ui-monospace, "JetBrains Mono", Menlo, monospace;
+  /* the pond's cell grid. 1em == one cell, so it stays locked to the tiles
+     the canvas draws however the font-size scales. */
+  background-image:
+    linear-gradient(to right, rgba(228, 230, 238, .05) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(228, 230, 238, .05) 1px, transparent 1px);
+  background-size: 1em 1em;
+}
+.koi-left { left: 0; }
+.koi-right { right: 0; }
+
+/* the column's shadow: the art fades out under it instead of stopping dead
+   beside the text. Eased falloff, as wide as about a third of the margin. */
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  --l: calc(50% - 340px);
+  --r: calc(50% + 340px);
+  --fade: clamp(60px, (100vw - 680px) * .16, 180px);
+  background: linear-gradient(90deg,
+    transparent calc(var(--l) - var(--fade)),
+    color-mix(in srgb, var(--bg) 22%, transparent) calc(var(--l) - var(--fade) * .75),
+    color-mix(in srgb, var(--bg) 55%, transparent) calc(var(--l) - var(--fade) * .5),
+    color-mix(in srgb, var(--bg) 85%, transparent) calc(var(--l) - var(--fade) * .25),
+    var(--bg) var(--l) var(--r),
+    color-mix(in srgb, var(--bg) 85%, transparent) calc(var(--r) + var(--fade) * .25),
+    color-mix(in srgb, var(--bg) 55%, transparent) calc(var(--r) + var(--fade) * .5),
+    color-mix(in srgb, var(--bg) 22%, transparent) calc(var(--r) + var(--fade) * .75),
+    transparent calc(var(--r) + var(--fade)));
+}
+
+@media (max-width: 1280px) {
+  .koi, body::before { display: none; }
+}
+
+@media print, (forced-colors: active) {
+  .koi, body::before { display: none; }
+}
+
+/* guestbook sign button */
+.btn-sign {
+  display: inline-flex;
+  align-items: center;
+  gap: .5rem;
+  background: var(--fg);
+  color: var(--bg);
+  border: 1px solid var(--fg);
+  padding: .5rem 1.4rem;
+  border-radius: 4px;
+  font: inherit;
+  cursor: pointer;
+  transition: background .12s ease, color .12s ease, transform .08s ease;
+}
+.btn-sign .arrow { transition: transform .15s ease; }
+.btn-sign:hover:not(:disabled) { background: transparent; color: var(--fg); }
+.btn-sign:hover:not(:disabled) .arrow { transform: translateX(3px); }
+.btn-sign:active:not(:disabled) { transform: translateY(1px); }
+.btn-sign:focus-visible { outline: 2px solid var(--muted); outline-offset: 2px; }
+.btn-sign:disabled { opacity: .55; cursor: progress; }
+
+/* htmx swaps the label while the request is in flight */
+.btn-sign .pending { display: none; }
+.btn-sign.htmx-request .idle { display: none; }
+.btn-sign.htmx-request .pending { display: inline; }
+.btn-sign.htmx-request .arrow { display: none; }

guestbook.php

@@ -98,12 +98,18 @@ require __DIR__ . '/inc/header.php';
 <?php endif; ?>
 
 <form hx-post="/guestbook.php" hx-target="#entries" hx-swap="innerHTML"
+      hx-indicator="#sign" hx-disabled-elt="#sign"
+      hx-on::after-request="if (event.detail.successful) this.reset()"
       method="post" action="/guestbook.php">
   <input name="name" placeholder="name" maxlength="40" required>
   <textarea name="msg" placeholder="say something…" maxlength="250" required></textarea>
   <input name="url" tabindex="-1" autocomplete="off" aria-hidden="true"
          style="position:absolute;left:-9999px" placeholder="leave this empty">
-  <button type="submit">sign</button>
+  <button type="submit" id="sign" class="btn-sign">
+    <span class="idle">sign</span>
+    <span class="pending">signing&hellip;</span>
+    <span class="arrow" aria-hidden="true">&rarr;</span>
+  </button>
 </form>
 
 <div id="entries">

inc/art.php

@@ -0,0 +1,231 @@
+<?php
+/**
+ * ANSI art (a .ans file you can `cat` in a terminal) for the side panels.
+ * Understands foreground colors: truecolor (38;2;r;g;b), 256-color (38;5;n),
+ * the 16 basic ones, and resets; everything else is ignored. The right panel
+ * is the left mirrored, swapping /\ () <> [] {} so shapes still read.
+ *
+ * The art ships as a stylesheet (sideart.php), not HTML: one full-size text
+ * layer per color, each the `content` of a ::before on an empty <b>, stacked
+ * by style.css. It's render-blocking and cached, so the first paint already
+ * has it; inline, it made the page too big for one network round trip and
+ * Firefox painted the page half-arrived (a dark empty flash) on cached loads.
+ */
+
+function ansi_color(array $p, ?string $cur): ?string
+{
+    static $basic = ['000000', 'aa0000', '00aa00', 'aa5500', '0000aa', 'aa00aa', '00aaaa', 'aaaaaa',
+                     '555555', 'ff5555', '55ff55', 'ffff55', '5555ff', 'ff55ff', '55ffff', 'ffffff'];
+    for ($i = 0; $i < count($p); $i++) {
+        $n = (int) $p[$i];
+        if ($n === 0 || $n === 39) {
+            $cur = null;
+        } elseif ($n >= 30 && $n <= 37) {
+            $cur = $basic[$n - 30];
+        } elseif ($n >= 90 && $n <= 97) {
+            $cur = $basic[$n - 82];
+        } elseif ($n === 38 && ($p[$i + 1] ?? '') === '2') {
+            $cur = sprintf('%02x%02x%02x', $p[$i + 2] ?? 0, $p[$i + 3] ?? 0, $p[$i + 4] ?? 0);
+            $i += 4;
+        } elseif ($n === 38 && ($p[$i + 1] ?? '') === '5') {
+            $c = (int) ($p[$i + 2] ?? 0);
+            $i += 2;
+            if ($c < 16) {
+                $cur = $basic[$c];
+            } elseif ($c < 232) {
+                $c -= 16;
+                $lvl = static fn(int $v): int => $v ? 55 + 40 * $v : 0;
+                $cur = sprintf('%02x%02x%02x', $lvl(intdiv($c, 36)), $lvl(intdiv($c, 6) % 6), $lvl($c % 6));
+            } else {
+                $cur = str_repeat(sprintf('%02x', 8 + 10 * ($c - 232)), 3);
+            }
+        }
+    }
+    return $cur;
+}
+
+/**
+ * The stylesheet for both panels, cached on disk until the .ans file (or this
+ * file) changes. Returns [path to the css, layers on the left, on the right].
+ */
+function ansi_css_cached(string $file): array
+{
+    $dir = (defined('DATA_DIR') ? DATA_DIR : sys_get_temp_dir()) . '/art-cache';
+    $base = $dir . '/' . md5($file);
+    $key = $base . '-' . filemtime($file) . '-' . filemtime(__FILE__);
+    if (!is_file("$key.css") || !is_file("$key.json")) {
+        @mkdir($dir, 0755, true);
+        array_map('unlink', glob($base . '-*') ?: []); // every deploy bumps the mtimes
+        $css = '';
+        $counts = [];
+        foreach (['left' => false, 'right' => true] as $side => $mirror) {
+            $layers = ansi_layers($file, $mirror);
+            $counts[$side] = count($layers);
+            foreach ($layers as $i => [$color, $text]) {
+                $css .= ".side-$side > b:nth-child(" . ($i + 1) . ')::before{content:' . ansi_css_string($text)
+                    . ($color !== '' ? ";color:#$color" : '') . "}\n";
+            }
+        }
+        foreach (["$key.css" => $css, "$key.json" => json_encode($counts)] as $path => $data) {
+            $tmp = $path . '.' . getmypid();
+            if (@file_put_contents($tmp, $data) !== false) {
+                rename($tmp, $path);
+            }
+        }
+    }
+    return ["$key.css", ...array_values((array) json_decode((string) @file_get_contents("$key.json"), true))];
+}
+
+/** A CSS string literal; newlines become \A (the space after it ends the escape). */
+function ansi_css_string(string $text): string
+{
+    return '"' . str_replace(['\\', '"', "\n"], ['\\\\', '\\"', '\\A '], $text) . '"';
+}
+
+/** The art as [[hex color or '', text], ...]: one full-size layer per color. */
+function ansi_layers(string $file, bool $mirror = false): array
+{
+    $raw = (string) file_get_contents($file);
+    if (!preg_match('/[\x80-\xff]/', $raw)) {
+        $layers = ansi_layers_bytes($raw, $mirror);
+        if ($layers !== null) {
+            return $layers;
+        }
+    }
+    return ansi_layers_cells($raw, $mirror);
+}
+
+/**
+ * Plain-ASCII art as [lines of chars, lines of color-index bytes, color => index],
+ * or null with too many colors for a byte. One regex pass over the whole file;
+ * kept per request so the mirrored side doesn't parse it a second time.
+ */
+function ansi_parse_bytes(string $raw): ?array
+{
+    static $memo = [], $done = [];
+    $key = md5($raw);
+    if (array_key_exists($key, $done)) {
+        return $done[$key];
+    }
+    $index = ['' => 0];                       // color hex => byte (0 = uncolored)
+    $chars = [];
+    $masks = [];
+    $c = $m = '';
+    $cur = null;
+    foreach (preg_split('/(\e\[[0-9;]*m|\n)/', rtrim($raw, "\n"), -1, PREG_SPLIT_DELIM_CAPTURE | PREG_SPLIT_NO_EMPTY) as $part) {
+        if ($part === "\n") {                 // colors don't carry across lines
+            $chars[] = $c;
+            $masks[] = $m;
+            $c = $m = '';
+            $cur = null;
+        } elseif ($part[0] === "\e") {
+            // a handful of distinct codes repeated thousands of times: decode each once
+            $cur = $memo[$part . '|' . $cur] ??= ansi_color(explode(';', substr($part, 2, -1)), $cur);
+        } else {
+            $k = $index[$cur ?? ''] ??= count($index);
+            $c .= $part;
+            $m .= str_repeat(chr($k), strlen($part));
+        }
+    }
+    $chars[] = $c;
+    $masks[] = $m;
+    return $done[$key] = count($index) > 250 ? null : [$chars, $masks, $index];
+}
+
+/**
+ * Fast path for plain-ASCII art (one byte per cell): each line becomes a
+ * string of characters plus a parallel string of color indices, and every
+ * color layer is cut out of the whole art with bitwise string ops, which run
+ * in C. Returns null if there are too many colors to index in a byte.
+ */
+function ansi_layers_bytes(string $raw, bool $mirror): ?array
+{
+    static $from = null, $to = null;          // byte 0 -> 0xff, anything else -> 0
+    $from ??= implode(array_map('chr', range(0, 255)));
+    $to ??= "\xff" . str_repeat("\0", 255);
+
+    $parsed = ansi_parse_bytes($raw);
+    if ($parsed === null) {
+        return null;
+    }
+    [$chars, $masks, $index] = $parsed;
+
+    $width = max(array_map('strlen', $chars) ?: [0]);
+    foreach ($chars as $i => $c) {
+        $chars[$i] = str_pad($c, $width);
+        $masks[$i] = str_pad($masks[$i], $width, "\0");
+        if ($mirror) {
+            $chars[$i] = strtr(strrev($chars[$i]), '/\\()<>[]{}', '\\/)(><][}{');
+            $masks[$i] = strrev($masks[$i]);
+        }
+    }
+    // the whole art as one string; 0xfe in the mask marks the line breaks
+    $all = implode("\n", $chars);
+    $mask = implode("\xfe", $masks);
+    $blank = implode("\n", array_fill(0, count($chars), str_repeat(' ', $width)));
+    $n = strlen($all);
+
+    $layers = [];
+    foreach ($index as $color => $k) {
+        $sel = strtr($mask ^ str_repeat(chr($k), $n), $from, $to); // 0xff where this color, else 0
+        $layer = ($all & $sel) | ($blank & ~$sel);
+        if (trim($layer) !== '') {                                // skip colors that only touch blanks
+            $layers[] = [(string) $color, $layer];
+        }
+    }
+    return $layers;
+}
+
+/** General path: a [char, color] cell at a time, so multibyte characters work. */
+function ansi_layers_cells(string $raw, bool $mirror): array
+{
+    static $flip = ['/' => '\\', '\\' => '/', '(' => ')', ')' => '(', '<' => '>', '>' => '<',
+                    '[' => ']', ']' => '[', '{' => '}', '}' => '{'];
+    $lines = [];
+    foreach (explode("\n", rtrim($raw, "\n")) as $line) {
+        // split into [char, color] cells
+        $cells = [];
+        $cur = null;
+        foreach (preg_split('/(\e\[[0-9;]*m)/', $line, -1, PREG_SPLIT_DELIM_CAPTURE | PREG_SPLIT_NO_EMPTY) as $part) {
+            if ($part[0] === "\e") {
+                $cur = ansi_color(explode(';', substr($part, 2, -1)), $cur);
+                continue;
+            }
+            foreach (mb_str_split($part) as $ch) {
+                $cells[] = [$ch, $cur];
+            }
+        }
+        $lines[] = $cells;
+    }
+
+    $width = max(array_map('count', $lines) ?: [0]);
+    foreach ($lines as &$cells) {
+        $cells = array_pad($cells, $width, [' ', null]);
+        if ($mirror) {
+            $cells = array_map(static fn($c) => [$flip[$c[0]] ?? $c[0], $c[1]], array_reverse($cells));
+        }
+    }
+    unset($cells);
+
+    $colors = [];
+    foreach ($lines as $cells) {
+        foreach ($cells as [$ch, $color]) {
+            if ($ch !== ' ') {
+                $colors[$color ?? ''] = true;
+            }
+        }
+    }
+    $layers = [];
+    foreach (array_keys($colors) as $color) {
+        $rows = [];
+        foreach ($lines as $cells) {
+            $row = '';
+            foreach ($cells as [$ch, $c]) {
+                $row .= ($ch !== ' ' && ($c ?? '') === $color) ? $ch : ' ';
+            }
+            $rows[] = $row;
+        }
+        $layers[] = [(string) $color, implode("\n", $rows)];
+    }
+    return $layers;
+}

inc/art/sakura.ans

@@ -0,0 +1,88 @@
+  -+.:===+=:              :    ,#@@@@@@@@@%@@@@@@@@@@@@@@@@@@%@@@@@@@@@@@@@@@@@@@@@@@@@@%@@@%@@@@@@@@%%o
+  ,+-===-,               .**. .X@@@@@@@@o*o*@@@@@@%@@@@@@#@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
+   =**=.    ,                   o@@@@@@@%###@@@@%#%@@@%xx=x@@@@@@X@#@X#@@@@@@@@@@@@@@@@@@@@%%%@@@@@@@@@@
+,,:+*+,    -%:               -%#@@@@@@@@@@@@@@%X+=@x@@-#+o%@@@X-:  .-. ,@%#%*@@@@%@@@@@@@@@@@@@@@@@@@%#@
+==+***=----;;,               :#@@@@@@@@@@@@@@@#,:xX*@@;==Xo@%@%=        .   ,*;x@@@%@%x@@@@@@@@@@@@@x+x=
+--=***+++******=-:.        ;+xX+@@@@@@@@@@@@%xo@@@@@@@@@%@@@@%x:            ;=,*#@@@@xx@%@@%@@#@@@+,
+    .,,::;;-=++++++=;:xX;,,*x*.:=*o@@@@@@@@@@@#@@@@@@@@@@@@@@@%--.       :*+@@@@@@@@@@X@@@@@@X:#-=:
+              .,;+**==+***++**+++=*Xx@@@@@@@@@@@@@@@@@@@@@@@@@@@X@+::;;;;-o@@@@@@@@@@@@@@@%+: -*
+                  ,;===+=:    ...:=o#@@@@@@@@@@@@@@@@@@@@@@oX%@xX;,..   =*o@@@@@#o@@@@@@@@@@@,,,
+       .*,          .:+*+*=;.  ;=.,*x@x@@@@@@@@@@@@@@@@#Xx. .;=-o*;:;. ;@@@@@X+,:=o@@@@@@@@#,
+        ,.      .      ;+***+-,:-  ,*o+@@@@@@@@@@* :--#o     ,;x@@@@@x=%@@@@@@@%%@+--o@@#@o*.
+   ,;           *=     :++-+**=;.:x*=@@@@@@@@@@#,       :;   :#@@@@@@@:o@@@@@@@@@@@@##@x*:
+   :-    :-            ,++: :=++o=#@@@@@@@@@@%-,.;. ,;;+@@@#%*.@@@@@@@oo+@@@@@@@@@@@@@@@o;
+        .o*,           ,==.   ;*%@@@@@@Xx#*:o=*@%@@@@@@@@@@@@:.;:*@@*o+  ;#x@%@@@@@@@+*#-
+                       :++-    o@@@@@@@@#@@@%-#%@@@@@@@@@@@#%##@*o#;;:  .-,X@@@@@@@@##-
+          :;         ,o++#x,    x#@@@@@@@@@@@@#@@@@@@@@@@@@X%%%@@@@#%%. ;@@@@@@@@@##Xo;.
+,  .+.    --          -++,   ,  ,@@@@@@@@@@@@@@@@@@@@@%@#@@#@@@@@@@@%=  *@@@@@@@%=  .              ,
+,  -x:               .++;   :@#xX@@%@@@@@@@@@@@@@@@@@@@@%@%@@@@@@@@%%x,,,=@@@@@x=:      ;:.    .+=x#,
+,,.            .oX-  -*=   ;X%@@@@@@@@@@@@@@@@@@@@@@@@@@@@%#+;X=*@X::,   -x@@@@@@%*     +X.    ,*+:
+ ,::;;;:,       +-; -*-      x+:X@@@@@@@@@@@@@@@@@@@@@@%o@@+*@@Xxo.      .o@@@@@@@X-       .
+.      .,:---;+=;.,-=:         ,o+@@@@@@@@@@@@@@@@@@@##*.+@@@@@@@%;       ,+o@@@@#+;      ;#+.
+ ,           .+o===;.            +@@@@@@@@@@@@@@@x%#x+; +@%@@@@@@@o         :X*X*,         ;
+#%:           :=+;.              ,#@@@@@@@@@@@@@@+,.::++;:.X#x@@%#X.                               .
+=.          :+=:                  =o+=-@@@@@@@@@o+o=..:-=;    :X;                                 .@@@%*
+          .-=,                   ;+==. .:%@@@@@@@@@x-;-..-=:+*X@x==x+,=-                  .      %@@@@@%
+         :=;          .        ,;==+-   ;@@@@@@@@@@@@X@+, .;%@@@@@@@@@@o               ,,%@-,.:;;,x@@@#-
+  ..   ,--.          ;%+.    :=++=++.   ,o@@@@@@@@@#@@%#@+#%@@@@@@@@@@@@-            .-@@@@@@o=#*#%#:*@@
+ ,@%:=x#;+:           :  .::::-++#x#o  *++%*@@@@@@@@@@@@@@@@@@@@@@@@@@X:       .:::::,,-@@@@o-#@@@@@@@@@
+#@@@@@@@@%-           ,;-;,,;-==o@@@%o+@@@@@@x%@@@@@@@@@@@@@@@@@@@@@;;-ox#*:=-::;-;;--;:=:.=; :;@xxX@XX=
+@@@@@@%@#o++x:    .,;:,.:;;;=-=*X;%x=@@@@@@@@@@@@@@@@@@@@@@@@@@@%%-,,:*@@@@%@#=-:,                 :+
+@@@@@@@@#%@@@xX*:::,:;;-;;=++==#o.   o@@@@@@@@@@@@@@@@@@@@@@X;-:::*X:.=#@@@@%#=,          ;:,.xx,;+:,, x
+*%@@@%#@@@@@@@x;::;-;::,.;=,o@@@#;   ;-=X%@@@@@@@@@@@@@@@@@@X=-:=o%@#%* ;@@=*+,:-;.,,,,,;-@@@%%@@@@%@Xx#
+x%@@%@@@@@@@#@o;:,.    .=;.:@@@@Xx;-====o#@@@@@@@@@#X@@@@@@@@%o:=x@@@@=;-=+-====--==:::+%@@@@@@@@@@@#%oo
+=+XX%@@@@@@@@@o...,;#@==*oXx@X#%;;;,,.,-@@@@@@@@@@@@@@@@@@@@@@x: x@@@@X:,,,,::;-;-==-,,;#@@@@@@@@%ox+,:+
+o*=-@@@@@@@@@@@@@@@@@@%@#@@@@@@%- -,  x%@@@@@@@@%#X@@@#@@@@@@@@@=;=@@-=.       ::. .,=-x@@@@@@@@%@@X-;=X
+@@@@@@@@@@@@@@#o%%@@@@@@@@@@@@@@@=-@o  *@##@@x%-,@@@@@@@@@@@@@@@@@@@%@@%o:      ,;,:,.x@@@@@@@X%@%@@X#%@
+@@@@@@@@@@x%@@@@x-@@#@@xX@@@@@@@@@@@%X+x@@@o.;%@#@@@@@@@@@@@@@@@@@@@@@@@@@@X     :-.,*%@@@@@@%@@@@@%%@@@
+@@@@@@@@X=,=@@@@@@@@@@@:=#X%@@#@@@%@X**x%@##*#@@@@@@X@@@@@@@@@@@@@@@@@@@@@@*:xo=%@@%%@@X@@@@@@@@@@@@@@@@
+@@@@@@@@@#@@@@@@@%@@@@+,.,+;+. :=.*%X@X,*@X*@@#@@@@@%@@@@@@@@@@@%#@@@@@@**-;-%@@@@@@@@@@@@@@@@@@@@@@@@@@
+@@@@@@@@Xo#@@@@@=*%@+++: ,*.      =%@@%@%#@@@@@@@@@@@@@@@@@@@@@@@@@@%X:  :@@@@@@@%@@@@@@@@@@@@@@@@@@@@#%
+@@@@@@#o*x@@@@@@@@@@%x;=:,=,      =@@@@x#X%@@@@@@@@@@@@@@@@@@=o%@@@@@@#:,+#@@%%XXx%@@@@@@@@@@@@@@@@@@@@@
+@%@@@@@@@@%%@@@@@@X%# ,+,Xo:      *@@@%*:=*%@#@@@%Xo:X@@@@@@@==#@@@@@@@@@%=:%x   ;oX@%@@@@@@@@@@@@@@@@@@
+@@@@@@@@@@@@@@@@@+     + ;+-,.  ,x%*+X*  *#%@@@@@@o ;*@@@@@@@X: :,%@@@@@%x*+;.     ,-.*o@@@@@@@@@@@@@@@@
+@@@@@@@@@@@@@@@#*,    -X+@@, ,x@%@%xo;  ;x@@@@@@@@=.=#@@@@@@%o-     o@%X@@@+x%o,       ;@@@@@@@@@@@@@@@@
+@@@@@@@@Xo%@@@@@@#    :#@@@@X,-%@@@@@%*x@@@@@@@@@@%@*X@@@@@@Xo=     .;=@@@@@@@@@@=.  ;%@#@@@@@@@@@@@@@@@
+@@@@@@@@@@@@@@@@@%#****@@@@x+X@@@@@@@@@@@@@@@@%=%@%@X#%@@@@%=          +@@@@@@@@+--:,:-+%@@@@@@@@@@@@@@@
+@@@@%@@%-%@@@@%#@%%@@@%@@@@@@@@%o:@@@@@@@@@@@@@.;:    #@o;;          .*-+@@@@@%X= :=x@x%@X%@@@@@@@@@@@@@
+@@@@==; ,@@@@@@#@@@@@@@@@#@%.--.,,,o%Xx@@@@@@@x-%+                ,o##@#X-.X#;     ;X@@@#+xo@@@@@@@@@@@@
+@@@X:,,,*@@@@@@@@@@@@%@@#xo@; :;x-    ;#x%@@@#%@@%@+             .*@@@@@*   -*;    ,-+@#o=*@@@@@@@@@@@@@
+@@@@@@:;@@@@@@@@@@@@@@@@@@@@#+ .:.   ::=;=o%:#@@@@o:.X%:         X@@@@@@* ,, -*++-.   ::+-=%@@@@@@@@@@@@
+@@@@@@X%@@@@@@@@@@@@@@@@@@%@X;   :+,::     X%%@@@#@@%@@*+,    :@@@@@@@@@%**:  -o%%=     .;**-@@@@@@%X@@@
+@@@@@@@@@@@@@@@@@@@@@@@@@@@@@x..;*@%oo::;++*%@@@@@@@@@@#X;     ,o@@@@@@@@@++*  :=;        ;+;:+o@@@@@@@@
+@@@@@@@@@@@@@@@@@@@@%#@@@@@@@@X@@@@@@%x#@@@@@@@##@@@@@@@@;,.,. .oX;#@@@@@@@@o   ,=*@o@+    ;=.+X@@@@@@@@
+@@@@@@@@@@@@@@@@@#@oX#@@@@@@@@@@@@@@@XX@@@@@@X%%%%@@@@@@@@@@@@@%.  ..:o;=@%X#,   .%%@@%;    xXo@@@@@@@@@
+*%@@@@@@@@@@@@@@   :@@@@@@@@@@@@@@@@@#-o@@@@@@@:=@@x@@@@@@@@@@@@o:.  ,,  -,  #x+X*X@@@o;  %#@@@@@@@@@@@@
+:x%@@@@@@@@@@@@x.  ;X@@@@@@@@@@@@@@@@@@@@@@@@@%%X@@@@@@@@@@@@@@@%#+ .:    .X#%@@@@%%@@@#.*@@@@@@@@@@@#@@
+#@#@@@@@@@#@%*oX;.**@@@@@@@@@@@@@@@@@@@@@@@@@%:#@@@@@@@@@@@@%@@*%x  ;      .:;@@@@@@@@@@@@@@@@@@@@@@@@@@
+@@@@@@@%@%%@%X#@%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@Xo@@@@o*@@@@@@@o  +@o#*         .*@@@@@@@@@@@@@@#+%@@@@@@@
+@@@@@@@@@@@%xx@@@@@@@@@@@@@@@@@@@@@@@@@@ox@@%%@@@@@o,.;x#@@@@o x@@@@@@;:.-;,,,;,+-o+-x%@@@@@@@%@@@@@@@@@
+#@@@@@@@@@%#x+*::X@X#@@@@@@@@@@@@@%#@@@%; ;xx%@@@@@X     ,#%+o,,:@#%@@@@x@%*=       ;@@@@@@@#XX#%@@@@@@@
+-;:--@@@#x@X::-;;Xo;=%@@@@@@@@@@@@@@#=      ,@%:;-       ,:=#+ :, :@@@@@@@@@*       =X@@@@@@*  +#Xo@%X*:
+++=--=*%@@@*-;=*;;::x@@@@@@@@@@@@@@x.             -X=,::;:-o@@%@#;,x@@@@@@@@+.      -=X+@@@@%X@* ,==+::-
+@oo, ,@@@@@@@x,-=; ;*%@@@@@@@@@@@@@@o#o        X@%@@X=:, :%@@@@@X##@@@@@@@@%X=     ;:  .*@@@@@@xx. ;=- .
+x@@@+;*@@@@@@#x%@@@@@@%@@@@@@%X@@@@@@%=;,:;;:::+%@@@@@@#   -@@@@@*X%@@%@%@@%#;=#*,,-   x%@@@@@@@@XX ,+-.
+@@@@@@@@@@@@@@@@@@@@@@@@@@%X   x%@@%%@o.,;-:,%xx@@@@@@%#o:.xX%@#%oXx+@%*x*##=x#@@@@:    +@o@@@@@@@@= ;=-
+@@@@@@@@@@@@@@@@@@@@@@@@@@@@+ .:,;*.-+--::,X@@@@@@@@@@%X*,o* *x,      .    .:*@@@@*      .,o+=*X%;-; .+:
+++@@@@@@@@@@@@@@@@@@@@@@@@@*.  *oox :-;,::=*@@@@@@@@@@#*x#@@@@=:%o+;         ,X#o=-                   ,+
+%=..@X#@%@@@@@@@*o%o@@@@%-+:  =#@@@%Xx:=@@X@@@@@@@@@@@+:@@@@@@+#%@%,       ,:%#@%+-@X;.           :x=. .
+X,    -%@@@@@@@@;. ,:-,+- ,    o@@@@%x==%@@@@@@@@@@@@@@@%@@@@@@@X:=.     -*@@@@@@%@@@#+           .*:
+      .Xo+#*%@@@@@=:   =o+@X., ,@@%@%@@X%@@@@@@@@@@@@@@@@@@@@@@@%;      .=#@@@@@@@@@@%;  ,,
+            :X@@@@*.  ,o%@@@@%. ,x@@@%+ -@@@@@@@@@@#@%;@@@@@@@@@+        o#o@@@@@@@@@@=  -%x          +*
+    ;;     .@@@@@@@@=x@%@@@@%@x  XX;#@o,#@%%@@@@@@%*#o*%%@@%@#=#o      ;o@@@@@@@@@@@X=-    .        ;*@@
+    **.     ,::@@@@@@@@@XX%X+:o=+-o#%@@@@@@@@%#@@@@@x+*x#@o+*,::,    =o#@@@@@@@@@x=+                ;o@@
+              x@@@%@@@@@o*@@#%@X%@X@@@@@@@@@x,=@@@@@@@%@%@@%=   ,;;=X%@@@@@@@@@@@%:@xx*  +%-         ,o=
+     :-       ,X@@@@@%@@@@@@@@@@@@@@o,+@@@@@@%@@x@@@@@@%@%%@=      ;#@@@@@@@@@@@@X%%@@*  ::.
+     :;       :x*X@@@@@@@@@@@@@@@@-*X=*@x*-x%@@@@@@%@%@@@%@X=      +@@@@@@@@@@@@X- #*--              .;.
+               .x%@@@@@@@@@@@@@%;.  +@@@@@:oX@@@@@@@@@@@@@@#=   -@o#@#@#+X@@@@@@%=;@x-@Xo-     **.   *@@
+                ,#@@%o.-%@@@*  .    +@%@%o-#@@@@@@@@@@@@@@@@=,,#@@@@@%@x;x@@@@#==@@@@@@@@;..;=+@@x%%;o%%
+                .=;*+  .*=+=         x@%@@@@@@@@@%@@@@@@@@%%+   +@@@@@@@;:@@@@@X@X@@x@o;=.  x@@@@@@=,++*
+                                   :%@@@@@@@@@@@@@@@@@@@@@;** o%+@@@@@@@@@@@@@@@@%X=    ,,,;#@@@@x@X
+                                  ,+o@@@@@@X%@@@@@%@@@@X;#@@@@@@@@x%@@@@@@@@@@@@@@%;#+..  ,;*%@@X,     o
+                                  ,#@@@@@@@@==%@@@@@@@@::ox@X@@@@@*-#@@@@@@@@@@@@@@%@@@o  ,;@@@@@-    ;x
+                                 ,#@@@@=@@@@%- .x@@%@%o  ;#%X@@@@@@@@@@@@#xX;X@%@@%@%%@, :%@@@@#-     -*
+                                   ##+X:=@X@+    :..+-    .. ,=@@@@@@@@@@@@@@@*@@%@x%@;    x@X%@-   -.
+                                        .. .                ;X@@@@@@@@@@@@@@@@@@##%@@@%%-  ,;    :--%=
+                .,                                        .:X@@@@@@@@@@@@@@%@%@xx#@@%@x:         ++.
+                -@%.        ,:                            o@@@@@@@@@@@@@@@%x--x; .-,:x=    .
+                  ,        ;##:                           X@@@#x@@@@@@@@@@#*;             :%x,

inc/buttons.php

@@ -20,10 +20,10 @@ const BUTTONS_88x31 = [
 const BUTTON_CACHE_TTL = 7 * 86400; // re-fetch each button at most once a week
 
 /**
- * Fetch a remote image, cache it locally, and return it as a base64 data: URI.
- * Returns null on failure so the caller can fall back to hotlinking.
+ * Fetch a remote image into the local cache (at most once a week) and return
+ * the cache file's path, or null if it couldn't be fetched.
  */
-function button_data_uri(string $url): ?string
+function button_cache(string $url): ?string
 {
     $dir = DATA_DIR . '/buttons';
     @mkdir($dir, 0775, true);
@@ -47,19 +47,19 @@ function button_data_uri(string $url): ?string
         }
     }
 
-    if (!is_file($file)) {
-        return null;
+    return is_file($file) ? $file : null;
 }
 
-    $raw = (string) file_get_contents($file);
-    $nl  = strpos($raw, "\n");
-    if ($nl === false) {
-        return null;
-    }
-
-    $type = substr($raw, 0, $nl);
-    $data = substr($raw, $nl + 1);
-    return 'data:' . $type . ';base64,' . base64_encode($data);
+/**
+ * Where the page should load a button from: our own copy (button.php serves
+ * it, versioned by the cache file's mtime so browsers can keep it), or the
+ * original if fetching failed. Was inlined as base64 before, which made every
+ * page ~260 KB heavier.
+ */
+function button_src(string $url): string
+{
+    $file = button_cache($url);
+    return $file ? '/button.php?h=' . basename($file) . '&v=' . filemtime($file) : $url;
 }
 
 /** Render the whole 88x31 button row as HTML. */
@@ -67,7 +67,7 @@ function render_buttons_88x31(): string
 {
     $html = '';
     foreach (BUTTONS_88x31 as $b) {
-        $uri = button_data_uri($b['src']) ?? $b['src']; // fall back to hotlink if fetch failed
+        $uri = button_src($b['src']);
         $img = '<img src="' . htmlspecialchars($uri) . '" alt="' . htmlspecialchars($b['alt']) . '" width="88" height="31">';
         $href = $b['href'] ?? '';
         if ($href !== '') {

inc/footer.php

@@ -8,7 +8,10 @@ $build = preg_match('/[0-9a-f]{7,40}/i', $build, $m) ? $m[0] : ($build ?: 'dev')
   <div class="buttons88x31">
     <?= render_buttons_88x31() ?>
   </div>
-  <small>&copy; <?= date('Y') ?> · build: <a href="<?= htmlspecialchars(REPO_URL) ?>"><?= htmlspecialchars($build) ?></a></small>
+  <small>&copy; <?= date('Y') ?> · build: <a href="<?= htmlspecialchars(REPO_URL . ($build !== 'dev' ? '/src/commit/' . $build : '')) ?>"><?= htmlspecialchars($build) ?></a></small>
 </footer>
+<canvas class="koi koi-left" aria-hidden="true"></canvas>
+<canvas class="koi koi-right" aria-hidden="true"></canvas>
+<script src="/js/koi.js?v=<?= filemtime(__DIR__ . '/../js/koi.js') ?>" defer></script>
 </body>
 </html>

inc/header.php

@@ -1,12 +1,15 @@
-<?php require_once __DIR__ . '/../config.php'; ?>
+<?php
+require_once __DIR__ . '/../config.php';
+?>
 <!doctype html>
 <html lang="en">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="color-scheme" content="dark">
   <title><?= htmlspecialchars($page_title ?? SITE_TITLE) ?></title>
   <link rel="icon" href="/img/favicon.ico" sizes="any">
-  <link rel="stylesheet" href="/css/style.css">
+  <link rel="stylesheet" href="/css/style.css?v=<?= filemtime(__DIR__ . '/../css/style.css') ?>">
   <script src="/js/htmx.min.js" defer></script>
   <script src="/js/idiomorph-ext.min.js" defer></script>
 </head>

index.php

@@ -13,7 +13,7 @@
 <?php $age = (new DateTime('2002-11-07'))->diff(new DateTime('today'))->y; ?>
 <p>I'm a <?= $age ?>-year-old developer (I know I'm unc), I hold a bachelor's degree in computer science (BUT Informatique) and I'm also a 42 school student.</p>
 
-<p>if you wanna see what I'm building, feel free to check out my <a href="https://github.com/0xa00">GitHub</a> or follow me on <a href="https://x.com/0xa0_">Twitter</a> !</p>
+<p>if you wanna see what I'm building, feel free to check out my <a href="https://github.com/0xa00">GitHub</a> !</p>
 
 <section class="posts-widget">
   <h2>recent posts</h2>

js/koi.js

@@ -0,0 +1,406 @@
+/**
+ * Koi for the side panels -- letters on a square cell grid, swimming.
+ *
+ * Rendering follows the reference: every cell is a filled tile in the koi's
+ * colour with a letter punched into it in near-black ink. The tile carries
+ * the colour and its brightness, the letter carries the texture, picked from
+ * a thin-to-thick ramp by how dense that part of the body is. Drawing bright
+ * letters on a dark page instead looks nothing like it.
+ *
+ * The grid is square. Using the natural text grid (cells ~.6 as wide as they
+ * are tall) makes a fish's proportions depend on its heading: thickness is
+ * perpendicular to travel, so swimming sideways comes out short and fat.
+ *
+ * The body is a follow-the-leader chain with a bend limit per joint, not a
+ * spine projected from the head. A projected spine rotates rigidly the
+ * instant the fish turns; a chain lags, and the bend limit stops it coiling
+ * into a ball the way a raw position trail does.
+ */
+(function () {
+  'use strict';
+
+  var RAMP = ':;+*xzXZ%#&@';   /* thin -> thick */
+  var EYE = 'o';
+  var INK = '#0b0b0d';         /* the letter punched into each tile */
+  var GAP = 1;                 /* gutter between tiles, px */
+
+  var CREAM = [233, 229, 220], RED = [206, 68, 42],
+      GOLD  = [224, 169,  46], SUMI = [82, 83, 90];
+
+  var VARIETIES = [
+    { name: 'kohaku', base: CREAM, patches: [[0.12, 0.36, RED], [0.52, 0.72, RED]] },
+    { name: 'ogon',   base: GOLD,  patches: [[0.58, 0.82, [186, 136, 36]]] },
+    { name: 'sanke',  base: CREAM, patches: [[0.14, 0.36, RED], [0.38, 0.47, SUMI],
+                                             [0.56, 0.72, RED], [0.76, 0.88, SUMI]] },
+    { name: 'showa',  base: SUMI,  patches: [[0.12, 0.32, RED], [0.44, 0.60, CREAM],
+                                             [0.68, 0.84, RED]] },
+    { name: 'tancho', base: CREAM, patches: [[0.03, 0.13, RED]] }
+  ];
+
+  var LINKS = 24;        /* joints in the body -- its length */
+  var SLIM = 0.115;      /* max half-width as a fraction of length */
+  var BEND = 0.17;       /* max radians between consecutive links */
+  var LEVELS = 5;        /* quantised tile brightnesses */
+
+  /* Half-width as a fraction of the maximum, nose (0) to tail tip (1). */
+  function profile(u) {
+    if (u < 0.05) return 0.44 + u * 3.4;
+    if (u < 0.26) return 0.61 + (u - 0.05) * 1.9;
+    if (u < 0.64) return 1.00 - (u - 0.26) * 1.95;
+    if (u < 0.80) return 0.26 - (u - 0.64) * 1.1;
+    return 0.08 + (u - 0.80) * 3.2;
+  }
+
+  /* stable per-cell jitter in body coordinates, so the texture travels with
+     the fish instead of shimmering against the screen */
+  function hash(a, b) {
+    var x = Math.sin(a * 12.9898 + b * 78.233) * 43758.5453;
+    return x - Math.floor(x);
+  }
+
+  function colourAt(v, t) {
+    for (var i = 0; i < v.patches.length; i++) {
+      var p = v.patches[i];
+      if (t >= p[0] && t <= p[1]) return p[2];
+    }
+    return v.base;
+  }
+
+  /* rgb() strings for every colour at every brightness, built once --
+     rebuilding them per cell would churn thousands of strings a frame */
+  var SHADES = {};
+  function shadesFor(c) {
+    var k = c[0] + '_' + c[1] + '_' + c[2];
+    if (SHADES[k]) return SHADES[k];
+    var out = [];
+    for (var i = 0; i < LEVELS; i++) {
+      var f = 0.34 + 0.66 * (i / (LEVELS - 1));
+      out.push('rgb(' + Math.round(c[0] * f) + ',' +
+                        Math.round(c[1] * f) + ',' +
+                        Math.round(c[2] * f) + ')');
+    }
+    SHADES[k] = out;
+    return out;
+  }
+
+  function Koi(panel, i, n, offset) {
+    this.v = VARIETIES[(i + (offset || 0)) % VARIETIES.length];
+    this.panel = panel;
+    this.a = Math.random() * Math.PI * 2;
+    this.speed = 16 + Math.random() * 12;       /* px per second -- koi drift */
+    this.phase = Math.random() * Math.PI * 2;
+    this.beat = 1.7 + Math.random() * 0.9;
+    this.sway = 0.20 + Math.random() * 0.16;
+    this.girth = 0.9 + Math.random() * 0.26;
+    this.w1 = 0.09 + Math.random() * 0.07;
+    this.w2 = 0.19 + Math.random() * 0.11;
+    this.p1 = Math.random() * 99;
+    this.p2 = Math.random() * 99;
+    this.x = panel.w * (0.15 + 0.7 * Math.random());
+    this.y = panel.h * ((i + 0.5) / n);
+
+    /* born straight, laid out behind the head */
+    this.j = new Float64Array(LINKS * 2);
+    var link = panel.cell;
+    for (var k = 0; k < LINKS; k++) {
+      this.j[k * 2]     = this.x - Math.cos(this.a) * k * link;
+      this.j[k * 2 + 1] = this.y - Math.sin(this.a) * k * link;
+    }
+  }
+
+  Koi.prototype.step = function (dt, t, pointer) {
+    var p = this.panel;
+
+    /* wander: two slow sines, so the heading meanders without repeating */
+    this.a += (Math.sin(t * this.w1 + this.p1) + Math.sin(t * this.w2 + this.p2)) * dt * 0.22;
+
+    /* Turn well before the edge: the margin has to clear the whole body. */
+    var body = LINKS * p.cell;
+    var mx = Math.min(p.w * 0.32, body * 0.45);
+    var my = Math.min(p.h * 0.20, body * 0.32);
+    if (this.x < mx)       this.a += turnTo(this.a, 0, dt * 0.8);
+    if (this.x > p.w - mx) this.a += turnTo(this.a, Math.PI, dt * 0.8);
+    if (this.y < my)       this.a += turnTo(this.a, Math.PI / 2, dt * 0.8);
+    if (this.y > p.h - my) this.a += turnTo(this.a, -Math.PI / 2, dt * 0.8);
+
+    var speed = this.speed;
+
+    /* drift away from the pointer -- a spook, not a panic */
+    if (pointer.in) {
+      var dx = this.x - pointer.x, dy = this.y - pointer.y;
+      var d = Math.hypot(dx, dy);
+      if (d < 170 && d > 0.01) {
+        this.a += turnTo(this.a, Math.atan2(dy, dx), dt * (1.1 * (1 - d / 170)));
+        speed += 34 * (1 - d / 170);
+      }
+    }
+
+    if (pointer.typing) speed += 14;
+
+    this.phase += dt * this.beat;
+
+    /* the head yaws with the tail beat; the chain turns that into a
+       travelling wave down the body on its own */
+    var head = this.a + Math.sin(this.phase) * this.sway;
+    this.x += Math.cos(head) * speed * dt;
+    this.y += Math.sin(head) * speed * dt;
+    this.x = Math.max(2, Math.min(p.w - 2, this.x));
+    this.y = Math.max(2, Math.min(p.h - 2, this.y));
+
+    /* follow the leader: each joint is pulled to a fixed distance behind the
+       one ahead, and the turn between links is capped so it cannot coil */
+    var j = this.j, link = p.cell;
+    j[0] = this.x; j[1] = this.y;
+    var prevAng = head + Math.PI;
+    for (var i = 1; i < LINKS; i++) {
+      var ax = j[i * 2] - j[(i - 1) * 2];
+      var ay = j[i * 2 + 1] - j[(i - 1) * 2 + 1];
+      var ang = Math.atan2(ay, ax);
+      var diff = Math.atan2(Math.sin(ang - prevAng), Math.cos(ang - prevAng));
+      if (diff > BEND) diff = BEND; else if (diff < -BEND) diff = -BEND;
+      ang = prevAng + diff;
+      j[i * 2]     = j[(i - 1) * 2] + Math.cos(ang) * link;
+      j[i * 2 + 1] = j[(i - 1) * 2 + 1] + Math.sin(ang) * link;
+      prevAng = ang;
+    }
+  };
+
+  function turnTo(a, target, k) {
+    var d = Math.atan2(Math.sin(target - a), Math.cos(target - a));
+    return d * Math.min(1, k * 2.6);
+  }
+
+  Koi.prototype.draw = function (ctx, p) {
+    var cells = p.cells;
+    cells.clear();
+
+    var cell = p.cell;
+    var L = (LINKS - 1) * cell;
+    var maxHW = L * SLIM * this.girth;
+    var j = this.j;
+    var steps = 2;                 /* sub-steps per link, so no cell is missed */
+
+    for (var i = 0; i < LINKS - 1; i++) {
+      var ax = j[i * 2], ay = j[i * 2 + 1];
+      var bx = j[(i + 1) * 2], by = j[(i + 1) * 2 + 1];
+      var ang = Math.atan2(by - ay, bx - ax);
+      var sin = Math.sin(ang), cos = Math.cos(ang);
+
+      for (var s = 0; s < steps; s++) {
+        var f = s / steps;
+        var u = (i + f) / (LINKS - 1);
+        var sx = ax + (bx - ax) * f;
+        var sy = ay + (by - ay) * f;
+
+        var hw = profile(u) * maxHW;
+        var shades = shadesFor(colourAt(this.v, u));
+
+        for (var v = -hw - cell; v <= hw + cell; v += cell * 0.5) {
+          var av = Math.abs(v);
+          var cov = (hw - av) / cell + 0.55;
+
+          /* fork the caudal fin: a notch opening toward the tip */
+          if (u > 0.86) {
+            var notch = (u - 0.86) * 5.6 * maxHW;
+            if (av < notch) cov -= (notch - av) / cell * 1.5;
+          }
+          if (cov <= 0.06) continue;
+
+          var edge = hw > 0 ? 1 - av / hw : 0;
+          if (edge < 0) edge = 0;
+          var d = 0.26 + 0.6 * edge * Math.min(1, cov)
+                + (hash(i * 2 + s, Math.round(v / cell * 2)) - 0.5) * 0.26;
+
+          /* The tail dissolves instead of ending in a solid fan: drop an
+             increasing share of its cells toward the tip and dim what is
+             left, so it breaks into loose tiles the way the reference does. */
+          if (u > 0.74) {
+            var sc = (u - 0.74) / 0.26;
+            if (hash(i * 5 + s, Math.round(v / cell * 2) + 91) < sc * 0.66) continue;
+            d *= 1 - sc * 0.4;
+          }
+          if (d < 0.06) continue;
+          if (d > 0.99) d = 0.99;
+
+          put(cells, p, sx - sin * v, sy + cos * v, d, shades, false);
+        }
+
+        /* pectoral fins, trailing back off the shoulder */
+        if (s === 0 && i === Math.round((LINKS - 1) * 0.27)) {
+          for (var fin = 1; fin <= 4; fin++) {
+            var reach = hw + fin * cell * 0.85, back = fin * cell * 0.72;
+            if (hash(i, fin + 7) > 0.22) {
+              put(cells, p, sx - sin * reach - cos * back,
+                            sy + cos * reach - sin * back, 0.34 - fin * 0.06, shades, false);
+            }
+            if (hash(i, fin + 31) > 0.22) {
+              put(cells, p, sx + sin * reach - cos * back,
+                            sy - cos * reach - sin * back, 0.34 - fin * 0.06, shades, false);
+            }
+          }
+        }
+
+        /* eyes, just behind the nose */
+        if (s === 0 && i === Math.round((LINKS - 1) * 0.07)) {
+          var ew = hw * 0.62;
+          put(cells, p, sx - sin * ew, sy + cos * ew, 0.95, shades, true);
+          put(cells, p, sx + sin * ew, sy - cos * ew, 0.95, shades, true);
+        }
+      }
+    }
+
+    var tile = cell - GAP, half = tile / 2;
+    cells.forEach(function (c) {
+      ctx.fillStyle = c.sh[Math.min(LEVELS - 1, Math.floor(c.d * LEVELS))];
+      ctx.fillRect(c.x, c.y, tile, tile);
+      ctx.fillStyle = INK;
+      ctx.fillText(c.eye ? EYE : RAMP.charAt(Math.min(RAMP.length - 1,
+                   Math.floor(c.d * RAMP.length))), c.x + half, c.y + half);
+    });
+  };
+
+  /* takes pixels; the grid is the rasterisation target, not the coordinates */
+  function put(cells, p, x, y, d, sh, eye) {
+    var gx = Math.round(x / p.cell), gy = Math.round(y / p.cell);
+    var k = gx + ',' + gy;
+    var prev = cells.get(k);
+    if (prev && (prev.eye || (!eye && prev.d >= d))) return;
+    cells.set(k, { x: gx * p.cell, y: gy * p.cell, d: d, sh: sh, eye: !!eye });
+  }
+
+  function Panel(canvas, count, offset) {
+    this.canvas = canvas;
+    this.ctx = canvas.getContext('2d');
+    this.count = count;
+    this.offset = offset || 0;
+    this.koi = [];
+    this.cells = new Map();
+    this.w = 0;
+    this.h = 0;
+    this.cell = 9;
+  }
+
+  Panel.prototype.resize = function () {
+    var r = this.canvas.getBoundingClientRect();
+    var dpr = window.devicePixelRatio || 1;
+    this.w = r.width;
+    this.h = r.height;
+    this.canvas.width = Math.max(1, Math.round(r.width * dpr));
+    this.canvas.height = Math.max(1, Math.round(r.height * dpr));
+    this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+
+    var cs = getComputedStyle(this.canvas);
+    this.cell = Math.max(5, parseFloat(cs.fontSize) || 9);   /* square cells */
+    this.font = Math.round(this.cell * 0.92) + 'px ' + cs.fontFamily;
+    this.applyFont();
+
+    if (!this.koi.length) {
+      for (var i = 0; i < this.count; i++) this.koi.push(new Koi(this, i, this.count, this.offset));
+    } else {
+      for (var k = 0; k < this.koi.length; k++) {
+        this.koi[k].x = Math.min(this.koi[k].x, this.w - 4);
+        this.koi[k].y = Math.min(this.koi[k].y, this.h - 4);
+      }
+    }
+  };
+
+  Panel.prototype.applyFont = function () {
+    this.ctx.font = this.font;
+    this.ctx.textBaseline = 'middle';
+    this.ctx.textAlign = 'center';
+  };
+
+  Panel.prototype.frame = function (dt, t, pointer) {
+    this.ctx.clearRect(0, 0, this.w, this.h);
+    this.applyFont();
+    for (var i = 0; i < this.koi.length; i++) {
+      this.koi[i].step(dt, t, pointer);
+      this.koi[i].draw(this.ctx, this);
+    }
+  };
+
+  function start() {
+    var left = document.querySelector('.koi-left');
+    var right = document.querySelector('.koi-right');
+    if (!left || !right) return;
+
+    var wide = window.matchMedia('(min-width: 1281px)');
+    var still = window.matchMedia('(prefers-reduced-motion: reduce)');
+    var panels = [new Panel(left, 3, 0), new Panel(right, 2, 3)];
+    var pointer = { x: 0, y: 0, in: false, typing: false, until: 0 };
+    var running = false, last = 0, t = 0, raf = 0;
+
+    function resize() { for (var i = 0; i < panels.length; i++) panels[i].resize(); }
+    function once() { for (var i = 0; i < panels.length; i++) panels[i].frame(0, 0, pointer); }
+
+    function loop(now) {
+      if (!running) return;
+      var dt = Math.min(0.05, (now - last) / 1000) || 0;
+      last = now;
+      t += dt;
+      pointer.typing = now < pointer.until;
+      for (var i = 0; i < panels.length; i++) panels[i].frame(dt, t, pointer);
+      raf = requestAnimationFrame(loop);
+    }
+
+    function play() {
+      if (running || !wide.matches || document.hidden) return;
+      running = true;
+      last = performance.now();
+      raf = requestAnimationFrame(loop);
+    }
+
+    function stop() {
+      running = false;
+      if (raf) cancelAnimationFrame(raf);
+    }
+
+    resize();
+
+    if (still.matches) {
+      once();
+    } else {
+      play();
+      document.addEventListener('visibilitychange', function () {
+        if (document.hidden) stop(); else play();
+      });
+      wide.addEventListener('change', function () {
+        if (wide.matches) { resize(); play(); } else stop();
+      });
+    }
+
+    var rt;
+    window.addEventListener('resize', function () {
+      clearTimeout(rt);
+      rt = setTimeout(function () { resize(); if (still.matches) once(); }, 150);
+    });
+
+    window.addEventListener('pointermove', function (e) {
+      for (var i = 0; i < panels.length; i++) {
+        var r = panels[i].canvas.getBoundingClientRect();
+        if (e.clientX >= r.left && e.clientX <= r.right) {
+          pointer.in = true;
+          pointer.x = e.clientX - r.left;
+          pointer.y = e.clientY - r.top;
+          return;
+        }
+      }
+      pointer.in = false;
+    }, { passive: true });
+
+    document.addEventListener('keydown', function (e) {
+      var el = e.target;
+      if (el && (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA' || el.isContentEditable)) {
+        pointer.until = performance.now() + 700;
+      }
+    }, { passive: true });
+  }
+
+  if (document.fonts && document.fonts.ready) {
+    document.fonts.ready.then(start);
+  } else if (document.readyState !== 'loading') {
+    start();
+  } else {
+    document.addEventListener('DOMContentLoaded', start);
+  }
+})();

sideart.php

@@ -0,0 +1,10 @@
+<?php
+// The side art as a stylesheet (see inc/art.php). The URL carries ?v=, so it
+// can be cached for good.
+require_once __DIR__ . '/config.php';
+require_once __DIR__ . '/inc/art.php';
+
+[$css] = ansi_css_cached(__DIR__ . '/inc/art/sakura.ans'); // render (or fail) before the headers
+header('Content-Type: text/css; charset=utf-8');
+header('Cache-Control: public, max-age=31536000, immutable');
+readfile($css);