feat(site): camera-snap theme toggle (replaces the laggy scan)

Swap the View-Transition scan reveal — which lagged because it animated a
blurred filter over a full-page snapshot — for a quick white "screenshot" flash
that masks an instant theme swap, like snapping a photo of the repo. It's just
one fading overlay (GPU-cheap, no snapshot), so there's no lag. Reduced-motion
still flips instantly. Removes lib/themeScan.ts + the ::view-transition CSS.

Author: New1Direction

website/app/global.css

@@ -153,31 +153,31 @@
 }
 
 /* ════════════════════════════════════════════════════════════════════════
-   Theme scan — the View Transitions API "develops" the new theme down the page
-   top→bottom, with a glowing cyan scan edge leading the front. Triggered only
-   by the theme toggle (ThemeToggle.tsx); falls back to an instant flip where
-   the API or motion preference says no.
+   Theme snap — toggling the theme fires a quick white "screenshot" flash that
+   masks an instant swap, like snapping a photo of the repo (see snapToTheme in
+   lib/themeSnap.ts). One fading overlay, GPU-cheap — no full-page snapshot, so
+   no lag. Reduced-motion skips the flash (snapToTheme does a plain instant flip).
    ──────────────────────────────────────────────────────────────────────── */
-@media (prefers-reduced-motion: no-preference) {
-  ::view-transition-old(root),
-  ::view-transition-new(root) {
-    /* drop the default cross-fade — we own the reveal */
-    animation: none;
-    mix-blend-mode: normal;
-  }
-  /* old theme stays put underneath; the new theme is clipped in from the top */
-  ::view-transition-new(root) {
-    /* Steady, near-even travel so you watch the line sweep down. No drop-shadow
-       glow here on purpose — a blurred shadow of a full-page snapshot animating
-       every frame is the main source of jank. The clip wipe alone is GPU-cheap. */
-    animation: theme-scan 720ms cubic-bezier(0.45, 0.05, 0.55, 0.95);
-  }
+.theme-flash {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  pointer-events: none;
+  background: #ffffff;
+  opacity: 0;
+  will-change: opacity;
 }
-@keyframes theme-scan {
-  from {
-    clip-path: inset(0 0 100% 0);
+.theme-flash.is-on {
+  animation: theme-snap 440ms ease-out forwards;
+}
+@keyframes theme-snap {
+  0% {
+    opacity: 0;
+  }
+  16% {
+    opacity: 0.92;
   }
-  to {
-    clip-path: inset(0 0 0 0);
+  100% {
+    opacity: 0;
   }
 }

website/components/site/ThemeToggle.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from 'react';
 import { useTheme } from 'next-themes';
-import { scanToTheme } from '@/lib/themeScan';
+import { snapToTheme } from '@/lib/themeSnap';
 
 /**
  * Sun⇄moon toggle that *morphs*: in dark mode a cutout circle carves the orb
@@ -21,11 +21,9 @@ export function ThemeToggle() {
   const isLight = mounted && resolvedTheme !== 'dark';
   const label = mounted ? `Switch to ${isLight ? 'dark' : 'light'} mode` : 'Toggle theme';
 
-  // A scanline "develops" the page into the new theme top→bottom via the View
-  // Transitions API (see ::view-transition-new(root) in global.css). flushSync
-  // makes next-themes apply the class synchronously so the snapshot captures the
-  // new theme. Instant flip where the API is missing or motion is reduced.
-  const runToggle = () => scanToTheme(setTheme, isLight ? 'dark' : 'light');
+  // A camera-style flash "snaps" the page into the new theme (see .theme-flash
+  // in global.css). Instant flip under reduced-motion.
+  const runToggle = () => snapToTheme(setTheme, isLight ? 'dark' : 'light');
 
   return (
     <button

website/lib/themeScan.ts

@@ -0,0 +1,24 @@
+/**
+ * Flip the theme with a camera-style "snap": a quick white flash masks an
+ * instant theme swap — like snapping a screenshot of the repo. GPU-cheap (one
+ * fading overlay, no full-page snapshot), so there's no lag. Reduced-motion gets
+ * a plain instant flip.
+ *
+ * Used by the theme toggle (ThemeToggle).
+ */
+export function snapToTheme(setTheme: (theme: string) => void, next: string): void {
+  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+    setTheme(next);
+    return;
+  }
+
+  const flash = document.createElement('div');
+  flash.className = 'theme-flash';
+  document.body.appendChild(flash);
+
+  // Next frame: run the flash. Swap the theme at its bright peak so the change
+  // is hidden behind the flash, then clean up after it fades.
+  requestAnimationFrame(() => flash.classList.add('is-on'));
+  window.setTimeout(() => setTheme(next), 110);
+  window.setTimeout(() => flash.remove(), 460);
+}