website: add pixelated image placeholders with fade-in transition

Build-time script generates tiny 32px-wide versions of all images in
public/ using sharp. At runtime, PixelatedImage component renders these
with CSS image-rendering: pixelated (nearest-neighbor / point sampling)
for a crisp mosaic effect, then fades in the real image on load.

- Auto-discovers images in public/, skips placeholder- prefixed files
- Mtime check skips regeneration when placeholder is newer than source
- Callback ref handles cached images where onLoad fires before mount
- Explicit z-index prevents placeholder from covering the real image
- Runs automatically as part of pnpm build in website package

website/scripts/generate-placeholders.ts

@@ -0,0 +1,67 @@
+/*
+ * Generate pixelated placeholder images for the website.
+ *
+ * Scans website/public/ for all image files (png, jpg, jpeg, webp) and
+ * generates a tiny 32px-wide version of each. When displayed at full size
+ * with CSS `image-rendering: pixelated` (nearest-neighbor / point sampling),
+ * these produce a crisp mosaic effect instead of a blurry upscale.
+ *
+ * Skips files that already have the `placeholder-` prefix.
+ * Skips regeneration if the placeholder is newer than the source image.
+ *
+ * Usage: tsx website/scripts/generate-placeholders.ts
+ */
+
+import sharp from "sharp";
+import path from "node:path";
+import fs from "node:fs";
+
+const PUBLIC_DIR = path.resolve(import.meta.dirname, "../public");
+const PLACEHOLDER_PREFIX = "placeholder-";
+const PLACEHOLDER_WIDTH = 32;
+const IMAGE_EXTENSIONS = new Set([".png", ".jpg", ".jpeg", ".webp"]);
+
+async function main() {
+  const entries = fs.readdirSync(PUBLIC_DIR);
+
+  const images = entries.filter((name) => {
+    if (name.startsWith(PLACEHOLDER_PREFIX)) {
+      return false;
+    }
+    const ext = path.extname(name).toLowerCase();
+    return IMAGE_EXTENSIONS.has(ext);
+  });
+
+  if (images.length === 0) {
+    console.error("No images found in public/");
+    return;
+  }
+
+  for (const name of images) {
+    const inputPath = path.join(PUBLIC_DIR, name);
+    const ext = path.extname(name);
+    const base = path.basename(name, ext);
+    const outputPath = path.join(PUBLIC_DIR, `${PLACEHOLDER_PREFIX}${base}${ext}`);
+
+    // Skip if placeholder already exists and is newer than source
+    if (fs.existsSync(outputPath)) {
+      const srcMtime = fs.statSync(inputPath).mtimeMs;
+      const outMtime = fs.statSync(outputPath).mtimeMs;
+      if (outMtime > srcMtime) {
+        continue;
+      }
+    }
+
+    await sharp(inputPath)
+      .resize(PLACEHOLDER_WIDTH)
+      .png({ compressionLevel: 9 })
+      .toFile(outputPath);
+
+    const stats = fs.statSync(outputPath);
+    console.error(
+      `Generated ${PLACEHOLDER_PREFIX}${base}${ext} (${PLACEHOLDER_WIDTH}px wide, ${stats.size} bytes)`,
+    );
+  }
+}
+
+main();