feat: binary glow effects, refined drawings and calls to action

Dark surfaces now carry light: frames glow along their edge and shed binary digits (BitAura), dark sections open with a lit seam (BitSeam), the career path is a line of light and "My work" became a dark stage. Buttons carry a travelling light and a spot that follows the pointer (BitGlow). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-04 13:07:09 +02:00
parent e9f05b02fc
commit e89a248ca5
21 changed files with 1532 additions and 606 deletions
@@ -321,26 +321,6 @@

 /* Additional global styles from BaseLayout */

-/* Custom scrollbar */
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: #f1f5f9;
-}
-
-::-webkit-scrollbar-thumb {
-  background: #cbd5e1;
-  border-radius: 4px;
-  transition: background 0.2s ease;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: #94a3b8;
-}
-
 /* Selection color */
 ::selection {
  background: #0f172a;
@@ -1079,8 +1059,72 @@ pre:has(code[class*="language-"]) {
  transform: translate(0, 0);
 }

+/* Light that follows the pointer on a `data-glow` surface (see BitGlow). */
+.bit-glow {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 400ms ease;
+}
+@media (hover: hover) {
+  [data-glow]:hover > .bit-glow {
+    opacity: 1;
+  }
+}
+/* Dark surfaces: the dot grid lights up around the pointer. */
+.bit-glow-dots {
+  background-image:
+    radial-gradient(
+      320px circle at var(--gx, 50%) var(--gy, 50%),
+      rgba(148, 163, 184, 0.22),
+      transparent 70%
+    ),
+    radial-gradient(#e2e8f0 1.25px, transparent 1.25px);
+  background-size:
+    auto,
+    20px 20px;
+  -webkit-mask-image: radial-gradient(
+    280px circle at var(--gx, 50%) var(--gy, 50%),
+    #000,
+    transparent 75%
+  );
+  mask-image: radial-gradient(
+    280px circle at var(--gx, 50%) var(--gy, 50%),
+    #000,
+    transparent 75%
+  );
+}
+/* Cards: only the border lights up, in the card's text colour. */
+.bit-glow-edge {
+  inset: -1px;
+  padding: 2px;
+  background: radial-gradient(
+    320px circle at var(--gx, 50%) var(--gy, 50%),
+    currentColor,
+    transparent 70%
+  );
+  -webkit-mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask:
+    linear-gradient(#000 0 0) content-box exclude,
+    linear-gradient(#000 0 0);
+}
+/* Dark buttons: a spot of light under the pointer. */
+.bit-glow-spot {
+  background: radial-gradient(
+    90px circle at var(--gx, 50%) var(--gy, 50%),
+    rgba(129, 140, 248, 0.5),
+    transparent 70%
+  );
+}
+
@media (prefers-reduced-motion: reduce) {
-  .bit-burst {
+  .bit-burst,
+  .bit-glow {
    display: none;
  }
  .bit-card::before,
@@ -1088,3 +1132,252 @@ pre:has(code[class*="language-"]) {
    transition: none;
  }
 }
+
+/*
+ * Calls to action: a light travels round the edge of the pill and glows softly
+ * behind it; on hover the glow comes up. `bit-cta-light` is for white pills on
+ * dark surfaces, `bit-cta-quiet` only lights up on hover.
+ */
+@property --cta-angle {
+  syntax: "<angle>";
+  inherits: false;
+  initial-value: 0deg;
+}
+.bit-cta {
+  --cta-a: rgba(129, 140, 248, 0.95);
+  --cta-b: #ffffff;
+  position: relative;
+  isolation: isolate;
+}
+.bit-cta-light {
+  --cta-a: rgba(99, 102, 241, 0.95);
+  --cta-b: #312e81;
+}
+.bit-cta-quiet {
+  --cta-a: rgba(99, 102, 241, 0.9);
+  --cta-b: #0f172a;
+}
+.bit-cta::before,
+.bit-cta::after {
+  content: "";
+  position: absolute;
+  border-radius: inherit;
+  pointer-events: none;
+  background: conic-gradient(
+    from var(--cta-angle),
+    transparent 0 58%,
+    var(--cta-a) 76%,
+    var(--cta-b) 86%,
+    var(--cta-a) 93%,
+    transparent 100%
+  );
+  animation: bit-cta-turn 6s linear infinite;
+}
+/* The edge itself. */
+.bit-cta::before {
+  inset: -1px;
+  padding: 1.5px;
+  -webkit-mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask:
+    linear-gradient(#000 0 0) content-box exclude,
+    linear-gradient(#000 0 0);
+}
+/* The glow behind the edge. */
+.bit-cta::after {
+  inset: -2px;
+  z-index: -1;
+  padding: 6px;
+  -webkit-mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask:
+    linear-gradient(#000 0 0) content-box exclude,
+    linear-gradient(#000 0 0);
+  filter: blur(10px);
+  opacity: 0.55;
+  transition: opacity 300ms ease;
+}
+.bit-cta-quiet::before,
+.bit-cta-quiet::after {
+  opacity: 0;
+  transition: opacity 300ms ease;
+}
+@media (hover: hover) {
+  .bit-cta:hover::after,
+  .group:hover > .bit-cta::after {
+    opacity: 1;
+  }
+  .bit-cta-quiet:hover::before {
+    opacity: 1;
+  }
+  .bit-cta-quiet:hover::after {
+    opacity: 0.6;
+  }
+}
+@keyframes bit-cta-turn {
+  to {
+    --cta-angle: 360deg;
+  }
+}
+
+/* Slow light drifting over a dark picture (see PortraitSection). */
+.bit-aurora {
+  position: absolute;
+  inset: -10%;
+  pointer-events: none;
+  mix-blend-mode: screen;
+  background:
+    radial-gradient(
+      38% 46% at 38% 42%,
+      rgba(99, 102, 241, 0.55),
+      transparent 70%
+    ),
+    radial-gradient(
+      30% 40% at 64% 72%,
+      rgba(129, 140, 248, 0.35),
+      transparent 70%
+    );
+  filter: blur(40px);
+  animation: bit-aurora-drift 16s ease-in-out infinite alternate;
+}
+@keyframes bit-aurora-drift {
+  from {
+    transform: translate3d(-4%, -3%, 0) scale(1);
+  }
+  to {
+    transform: translate3d(5%, 4%, 0) scale(1.12);
+  }
+}
+
+/* The current station on the career line: a node that breathes light. */
+.bit-node-live {
+  animation: bit-node-breathe 3.2s ease-in-out infinite;
+}
+@keyframes bit-node-breathe {
+  0%,
+  100% {
+    box-shadow:
+      0 0 0 4px rgba(129, 140, 248, 0.22),
+      0 0 18px 2px rgba(129, 140, 248, 0.55);
+  }
+  50% {
+    box-shadow:
+      0 0 0 8px rgba(129, 140, 248, 0.12),
+      0 0 34px 8px rgba(129, 140, 248, 0.85);
+  }
+}
+
+/*
+ * Native feel: the page should behave like a well-made app on every input type.
+ */
+html {
+  color-scheme: light;
+  /* Anchor jumps stop below the fixed header. */
+  scroll-padding-top: 6rem;
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+  accent-color: #0f172a;
+  caret-color: #0f172a;
+}
+
+body {
+  text-rendering: optimizeLegibility;
+  font-kerning: normal;
+}
+
+/* Headlines break into even lines, running text avoids lonely last words. */
+h1,
+h2,
+h3,
+h4 {
+  text-wrap: balance;
+}
+p,
+li,
+dd,
+summary {
+  text-wrap: pretty;
+}
+
+/* Controls react at once to a tap and are not selected like text. */
+a,
+button,
+summary,
+[role="tab"],
+[role="button"] {
+  touch-action: manipulation;
+}
+button,
+summary,
+[role="tab"],
+[role="button"],
+a[href^="#"] {
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+/* Decoration is neither selectable nor draggable. */
+[aria-hidden="true"],
+canvas,
+img,
+svg {
+  -webkit-user-select: none;
+  user-select: none;
+}
+img,
+svg,
+a {
+  -webkit-user-drag: none;
+}
+
+/* One visible keyboard focus, none for mouse and touch. */
+:focus:not(:focus-visible) {
+  outline: none;
+}
+:focus-visible {
+  outline: 2px solid #0f172a;
+  outline-offset: 3px;
+}
+a:focus-visible,
+button:focus-visible,
+summary:focus-visible {
+  border-radius: 6px;
+}
+
+/* A short press-in on anything that can be pressed. */
+@media (prefers-reduced-motion: no-preference) {
+  button:active,
+  [role="tab"]:active,
+  a[class*="rounded-full"]:active,
+  a:active > [class*="rounded-full"] {
+    scale: 0.97;
+    transition-duration: 80ms;
+  }
+}
+
+/* Dark surfaces: light selection, light focus ring, dark system controls. */
+.bg-slate-900,
+.bg-slate-950 {
+  color-scheme: dark;
+}
+.bg-slate-900 ::selection,
+.bg-slate-950 ::selection {
+  background: #f8fafc;
+  color: #0f172a;
+}
+.bg-slate-900 :focus-visible,
+.bg-slate-950 :focus-visible {
+  outline-color: #f8fafc;
+}
+
+/* Fixed controls stay clear of the home indicator and rounded corners. */
+@supports (padding: env(safe-area-inset-bottom)) {
+  body {
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
+  }
+}
@@ -1,23 +1,32 @@
-import type { Metadata } from "next";
+import type { Metadata, Viewport } from "next";
 import { Inter, JetBrains_Mono, Newsreader } from "next/font/google";
 import { Analytics } from "@/src/components/Analytics";
 import { BitBurst } from "@/src/components/bits/BitBurst";
+import { BitGlow } from "@/src/components/bits/BitGlow";
 import { Footer } from "@/src/components/Footer";
 import { Header } from "@/src/components/Header";
 import { InteractiveElements } from "@/src/components/InteractiveElements";
 import {
+  INDEXING,
  SITE_DESCRIPTION,
+  SITE_LANGUAGE,
  SITE_NAME,
  SITE_TITLE,
  SITE_URL,
 } from "@/src/content/site";
+import { robotsMeta } from "@/src/domain/indexing";
 import "./globals.css";

 const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
+// A real monospaced fallback has almost the same letter width. The default
+// fallback (a resized Arial) wraps the mono labels differently, so the hero
+// jumped when the font arrived.
 const jetbrainsMono = JetBrains_Mono({
  subsets: ["latin"],
  variable: "--font-jetbrains-mono",
  display: "swap",
+  adjustFontFallback: false,
+  fallback: ["ui-monospace", "Menlo", "Consolas", "monospace"],
 });
 const newsreader = Newsreader({
  subsets: ["latin"],
@@ -36,6 +45,7 @@ export const metadata: Metadata = {
  applicationName: SITE_NAME,
  authors: [{ name: SITE_NAME, url: SITE_URL }],
  creator: SITE_NAME,
+  robots: robotsMeta(INDEXING),
  icons: {
    icon: "/favicon.svg",
    apple: "/apple-touch-icon.png",
@@ -56,6 +66,12 @@ export const metadata: Metadata = {
  },
 };

+export const viewport: Viewport = {
+  themeColor: "#ffffff",
+  colorScheme: "light",
+  viewportFit: "cover",
+};
+
 export default function RootLayout({
  children,
 }: {
@@ -63,7 +79,7 @@ export default function RootLayout({
 }) {
  return (
    <html
-      lang="en"
+      lang={SITE_LANGUAGE}
      className={`${inter.variable} ${newsreader.variable} ${jetbrainsMono.variable}`}
    >
      <body className="min-h-screen bg-white">
@@ -72,6 +88,7 @@ export default function RootLayout({
        <Footer />
        <InteractiveElements />
        <BitBurst />
+        <BitGlow />
        <Analytics />
      </body>
    </html>
@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import { BitAura } from "@/src/components/bits/BitAura";
 import { DecodeText } from "@/src/components/bits/DecodeText";
 import { Block } from "@/src/components/home/Block";
 import { ClosingCta } from "@/src/components/home/ClosingCta";
@@ -109,9 +110,11 @@ export default function LandingPage() {
        </p>
      </PortraitSection>

-      <section className="bg-white">
-        <div className="mx-auto w-full max-w-[1400px] px-5 py-16 md:px-12 md:py-28">
-          <p className={`${MONO} m-0 mb-10`}>The path so far</p>
+      <section className="relative overflow-clip bg-slate-900">
+        <div className="mx-auto w-full max-w-[1400px] px-5 pb-20 pt-4 md:px-12 md:pb-36 md:pt-0">
+          <p className="m-0 mb-10 font-mono text-[11px] uppercase tracking-[0.2em] text-slate-400">
+            The path so far
+          </p>
          <CareerLine stations={CAREER} />
        </div>
      </section>
@@ -257,9 +260,11 @@ export default function LandingPage() {
        }
      >
        <Reveal>
-          <div className="mb-16 overflow-hidden rounded-3xl bg-slate-900 p-4 md:mb-24 md:p-10">
-            <ContactDiagram />
-          </div>
+          <BitAura source="bottom" tone="light" className="mb-16 md:mb-24">
+            <div className="overflow-hidden rounded-3xl bg-slate-900 p-4 md:p-10">
+              <ContactDiagram />
+            </div>
+          </BitAura>
        </Reveal>
        <div className="grid grid-cols-1 gap-x-12 gap-y-12 md:grid-cols-2 md:gap-y-16">
          {PRINCIPLES.map((item, i) => (
@@ -278,17 +283,17 @@ export default function LandingPage() {
      <Block
        index="06"
        label="My work"
+        tone="dark"
        title={
          <>
-            Two sites I built. <span className={MUTED}>Both are live.</span>
+            Two sites I built.{" "}
+            <span className="text-slate-500">Both are live.</span>
          </>
        }
      >
        <WorkShowcase items={WORK} />
        <Reveal>
-          <p
-            className={`${BODY} mt-20 max-w-3xl border-t border-slate-200 pt-8 md:mt-28`}
-          >
+          <p className="m-0 mt-20 max-w-3xl border-t border-slate-800 pt-8 font-sans text-lg leading-relaxed text-slate-300 md:mt-28 md:text-xl">
            Besides client work I build my own software, among other things a
            system in Rust and Solidity that runs on seven blockchains.
          </p>
@@ -1,29 +1,42 @@
 "use client";

 import * as React from "react";
-import { motion } from "framer-motion";
 import { ArrowRight } from "lucide-react";
 import Link from "next/link";

+type ButtonVariant = "primary" | "outline" | "ghost";
+type ButtonSize = "normal" | "large";
+
 interface ButtonProps {
  href: string;
  children: React.ReactNode;
-  variant?: "primary" | "outline" | "ghost";
-  size?: "normal" | "large";
+  variant?: ButtonVariant;
+  size?: ButtonSize;
  className?: string;
  showArrow?: boolean;
-  onClick?: (e: React.MouseEvent<any>) => void;
-  [key: string]: any;
+  onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
 }

+const BASE =
+  "group relative inline-flex cursor-pointer items-center justify-center gap-3 rounded-full font-sans font-bold uppercase not-italic no-underline transition-all duration-300";
+
+const SIZES: Record<ButtonSize, string> = {
+  normal: "py-2.5 pl-7 pr-2.5 text-[11px] tracking-[0.18em]",
+  large: "py-3 pl-8 pr-3 text-[12px] tracking-[0.18em]",
+};
+
+const VARIANTS: Record<ButtonVariant, string> = {
+  primary:
+    "bit-cta bg-slate-900 text-white shadow-lg shadow-slate-900/10 hover:-translate-y-0.5",
+  outline:
+    "bit-cta bit-cta-quiet border border-slate-300 bg-white text-slate-900 hover:-translate-y-0.5",
+  ghost: "bg-transparent text-slate-500 hover:text-slate-900",
+};
+
 /**
- * Premium Button: Pill-shaped, binary-accent hover effect, unified design.
- *
- * On hover:
- * - A stream of binary characters scrolls across the button background
- * - Primary: white binary on dark bg
- * - Outline: blue binary on transparent bg
- * - Subtle, fast, and satisfying
+ * Button: the pill-shaped call to action. A light travels round its edge
+ * (`bit-cta` in globals.css) and the dark variant carries a spot of light that
+ * follows the pointer (see BitGlow); the label itself stays still.
 */
 export const Button: React.FC<ButtonProps> = ({
  href,
@@ -33,135 +46,50 @@ export const Button: React.FC<ButtonProps> = ({
  className = "",
  showArrow = true,
  onClick,
-  ...props
 }) => {
-  const [hovered, setHovered] = React.useState(false);
-  const [displayText, setDisplayText] = React.useState<string | null>(null);
-  const contentRef = React.useRef<HTMLSpanElement>(null);
-
-  // Binary scramble on hover
-  React.useEffect(() => {
-    if (!hovered) {
-      setDisplayText(null);
-      return;
-    }
-    const original = contentRef.current?.textContent || "";
-    if (!original) return;
-    const chars = original.split("");
-    const total = 20;
-    let frame = 0;
-    const iv = setInterval(() => {
-      frame++;
-      const s = chars.map((c, i) => {
-        if (c === " ") return " ";
-        const settle = (frame / total) * chars.length;
-        if (i < settle) return c;
-        return Math.random() > 0.5 ? "1" : "0";
-      });
-      setDisplayText(s.join(""));
-      if (frame >= total) {
-        setDisplayText(null);
-        clearInterval(iv);
-      }
-    }, 1000 / 60);
-    return () => clearInterval(iv);
-  }, [hovered]);
-
-  const [binaryStr, setBinaryStr] = React.useState(
-    "0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1",
-  );
-
-  React.useEffect(() => {
-    setBinaryStr(
-      Array.from({ length: 60 }, () => (Math.random() > 0.5 ? "0" : "1")).join(
-        " ",
-      ),
-    );
-  }, []);
-
-  const base =
-    "relative inline-flex items-center justify-center gap-3 overflow-hidden rounded-full font-bold uppercase tracking-[0.15em] transition-all duration-300 group cursor-pointer";
-
-  const sizes: Record<string, string> = {
-    normal: "px-8 py-4 text-[10px]",
-    large: "px-10 py-5 text-[11px]",
-  };
-
-  const variants: Record<string, string> = {
-    primary:
-      "bg-slate-900 text-white hover:shadow-xl hover:shadow-slate-900/20 hover:-translate-y-0.5",
-    outline:
-      "border border-slate-200 bg-transparent text-slate-900 hover:border-slate-400 hover:-translate-y-0.5",
-    ghost: "bg-transparent text-slate-500 hover:text-slate-900",
-  };
-
-  // Binary stream overlay colors by variant
-  const binaryColor =
-    variant === "primary"
-      ? "rgba(255,255,255,0.12)"
-      : variant === "outline"
-        ? "rgba(59,130,246,0.15)"
-        : "rgba(148,163,184,0.15)";
-
  const inner = (
-    <motion.span
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
-      className={`${base} ${sizes[size]} ${variants[variant]} ${className}`}
+    <span
+      data-glow={variant === "primary" ? "" : undefined}
+      className={`${BASE} ${SIZES[size]} ${VARIANTS[variant]} ${className}`}
    >
-      {/* Binary stream hover overlay */}
-      <span
-        className="absolute inset-0 flex items-center pointer-events-none overflow-hidden"
-        style={{ opacity: hovered ? 1 : 0, transition: "opacity 0.3s ease" }}
-      >
-        <motion.span
-          className="whitespace-nowrap font-mono text-xs tracking-[0.4em] select-none"
-          style={{ color: binaryColor }}
-          animate={hovered ? { x: [0, -200] } : { x: 0 }}
-          transition={
-            hovered ? { duration: 3, repeat: Infinity, ease: "linear" } : {}
-          }
-        >
-          {binaryStr}&nbsp;{binaryStr}
-        </motion.span>
-      </span>
-
-      {/* Shimmer line on hover (top edge) */}
-      <span
-        className="absolute top-0 left-0 right-0 h-px pointer-events-none"
-        style={{
-          opacity: hovered ? 1 : 0,
-          transition: "opacity 0.5s ease",
-          background:
-            variant === "primary"
-              ? "linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent)"
-              : "linear-gradient(90deg, transparent, rgba(59,130,246,0.15), transparent)",
-        }}
-      />
-
-      {/* Content */}
-      <span
-        className="relative z-10 flex items-center gap-3"
-        style={{ fontVariantNumeric: "tabular-nums" }}
-      >
-        <span ref={contentRef}>{displayText ?? children}</span>
+      {variant === "primary" && (
+        <span className="bit-glow bit-glow-spot" aria-hidden="true" />
+      )}
+      <span className="relative z-10 flex items-center gap-4">
+        {children}
        {showArrow && (
-          <ArrowRight className="w-3.5 h-3.5 group-hover:translate-x-1 transition-transform duration-300" />
+          <span
+            className={`grid h-8 w-8 place-items-center rounded-full transition-colors duration-300 ${
+              variant === "primary"
+                ? "bg-white/10 group-hover:bg-white group-hover:text-slate-900"
+                : "bg-slate-100 group-hover:bg-slate-900 group-hover:text-white"
+            }`}
+            aria-hidden="true"
+          >
+            <ArrowRight
+              className="h-3.5 w-3.5 transition-transform duration-300 group-hover:translate-x-0.5"
+              strokeWidth={2.25}
+            />
+          </span>
        )}
      </span>
-    </motion.span>
+    </span>
  );

  if (href.startsWith("#")) {
    return (
      <a
        href={href}
-        onClick={(e) => {
-          if (onClick) onClick(e);
-          e.preventDefault();
-          document.querySelector(href)?.scrollIntoView({ behavior: "smooth" });
+        className="no-underline"
+        onClick={(event) => {
+          onClick?.(event);
+          event.preventDefault();
+          if (href.length > 1) {
+            document
+              .querySelector(href)
+              ?.scrollIntoView({ behavior: "smooth" });
+          }
        }}
-        {...props}
      >
        {inner}
      </a>
@@ -169,7 +97,7 @@ export const Button: React.FC<ButtonProps> = ({
  }

  return (
-    <Link href={href} onClick={onClick} {...props}>
+    <Link href={href} onClick={onClick} className="no-underline">
      {inner}
    </Link>
  );
@@ -58,7 +58,7 @@ export const Header: React.FC = () => {

        <Link
          href="/#contact"
-          className="font-sans text-[10px] font-bold uppercase tracking-[0.2em] text-slate-900 border border-slate-200 px-5 py-2.5 rounded-full no-underline hover:border-slate-400 hover:bg-slate-50 transition-all duration-500 hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-100"
+          className="bit-cta bit-cta-quiet font-sans text-[10px] font-bold uppercase tracking-[0.2em] text-slate-900 border border-slate-200 px-5 py-2.5 rounded-full no-underline hover:border-slate-400 hover:bg-slate-50 transition-all duration-500 hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-100"
          style={{
            transitionTimingFunction: "cubic-bezier(0.23, 1, 0.32, 1)",
          }}
@@ -0,0 +1,440 @@
+"use client";
+
+import * as React from "react";
+
+type AuraSource = "top" | "right" | "bottom" | "left" | "around";
+type AuraTone = "dark" | "light";
+/** How the energy behaves: `sparks` drift off the edge, `rain` falls onto it, `pulse` sends rings outward. */
+type AuraMotion = "sparks" | "rain" | "pulse";
+
+interface BitAuraProps {
+  /** The edge the energy sits on, or `around` to let it travel round the element. */
+  source: AuraSource;
+  /** The background the element stands on: `dark` adds light, `light` only ink digits. */
+  tone: AuraTone;
+  motion?: AuraMotion;
+  /** Share of the usual amount of digits (1 = default). */
+  density?: number;
+  /** Corner radius of the lit element in px. */
+  radius?: number;
+  className?: string;
+  children: React.ReactNode;
+}
+
+interface Box {
+  width: number;
+  height: number;
+}
+
+/** A bright zone on the outline, placed by its position along the perimeter (0..1). */
+interface Spot {
+  at: number;
+  power: number;
+}
+
+interface Digit {
+  x: number;
+  y: number;
+  vx: number;
+  vy: number;
+  age: number;
+  life: number;
+  seed: number;
+  power: number;
+  large: boolean;
+  /** Outward normal at the point of the outline the digit belongs to. */
+  nx: number;
+  ny: number;
+}
+
+interface Palette {
+  blend: GlobalCompositeOperation;
+  glow: string;
+  core: string;
+  digit: string;
+  gain: number;
+  /** Opacity of the pulse rings at the edge. */
+  ring: number;
+  /** Share of the digit sparks that are kept (1 = all). */
+  density: number;
+}
+
+const MARGIN = 180;
+const FRAME_MS = 1000 / 30;
+const MAX_STEP_S = 0.1;
+const MAX_PIXEL_RATIO = 2;
+/** `rounded-3xl` in this project's Tailwind theme. */
+const DEFAULT_RADIUS = 32;
+const STILL_FRAME_STEPS = 90;
+
+/** The glow is the outline stroked from wide and faint to thin and bright. */
+const GLOW_LAYERS = [
+  { width: 150, alpha: 0.035, hot: false },
+  { width: 110, alpha: 0.05, hot: false },
+  { width: 78, alpha: 0.07, hot: false },
+  { width: 52, alpha: 0.1, hot: false },
+  { width: 32, alpha: 0.15, hot: false },
+  { width: 18, alpha: 0.22, hot: false },
+  { width: 7, alpha: 0.45, hot: true },
+  { width: 2, alpha: 0.95, hot: true },
+] as const;
+
+const LIGHT_PALETTE: Palette = {
+  blend: "source-over",
+  glow: "15, 23, 42",
+  core: "15, 23, 42",
+  digit: "15, 23, 42",
+  // No haze on light backgrounds: coloured light only reads on dark. Ink digits only.
+  gain: 0,
+  ring: 0.45,
+  density: 0.6,
+};
+
+const DARK_PALETTE: Palette = {
+  blend: "lighter",
+  glow: "99, 102, 241",
+  core: "224, 231, 255",
+  digit: "199, 210, 254",
+  gain: 1,
+  ring: 0.8,
+  density: 1,
+};
+
+const MOTION_DENSITY: Record<AuraMotion, number> = {
+  sparks: 0.45,
+  rain: 0.3,
+  pulse: 0.2,
+};
+
+const PULSE_RINGS = 3;
+const PULSE_PERIOD_S = 4.2;
+/** How often a drifting digit switches between 0 and 1. */
+const FLIPS_PER_S = 0.9;
+const PULSE_REACH = 56;
+
+const fraction = (value: number) => value - Math.floor(value);
+
+const perimeter = ({ width, height }: Box) => 2 * (width + height);
+
+/** Point and outward normal on the outline, walking clockwise from the top left corner. */
+const outlinePoint = (at: number, { width, height }: Box) => {
+  let distance = fraction(at) * 2 * (width + height);
+  if (distance < width) return { x: distance, y: 0, nx: 0, ny: -1 };
+  distance -= width;
+  if (distance < height) return { x: width, y: distance, nx: 1, ny: 0 };
+  distance -= height;
+  if (distance < width) return { x: width - distance, y: height, nx: 0, ny: 1 };
+  distance -= width;
+  return { x: 0, y: height - distance, nx: -1, ny: 0 };
+};
+
+/** The stretch of the perimeter (0..1) that one edge covers. */
+const edgeRange = (
+  source: Exclude<AuraSource, "around">,
+  box: Box,
+): readonly [number, number] => {
+  const total = perimeter(box);
+  const top = box.width / total;
+  const right = (box.width + box.height) / total;
+  const bottom = (2 * box.width + box.height) / total;
+  if (source === "top") return [0, top];
+  if (source === "right") return [top, right];
+  if (source === "bottom") return [right, bottom];
+  return [bottom, 1];
+};
+
+/** Where the energy is at time `t` (seconds): it wanders along one edge or circles the element. */
+const spotsAt = (
+  source: AuraSource,
+  motion: AuraMotion,
+  t: number,
+  box: Box,
+): readonly Spot[] => {
+  if (motion === "pulse") {
+    return [0, 1, 2, 3].map((corner) => ({
+      at: (corner + 0.5) / 4,
+      power: 0.45 + 0.25 * Math.sin(t * 0.8 - corner * 1.57),
+    }));
+  }
+  if (source === "around") {
+    return [
+      { at: fraction(t * 0.03), power: 1 },
+      { at: fraction(t * 0.03 + 0.5), power: 0.7 },
+      { at: fraction(1.2 - t * 0.018), power: 0.5 },
+    ];
+  }
+  const [from, to] = edgeRange(source, box);
+  const along = (share: number) => from + (to - from) * share;
+  return [
+    {
+      at: along(0.5 + 0.32 * Math.sin(t * 0.5)),
+      power: 0.85 + 0.15 * Math.sin(t * 0.9),
+    },
+    { at: along(0.5 + 0.4 * Math.sin(t * 0.31 + 2)), power: 0.6 },
+    {
+      at: along(0.5 + 0.45 * Math.sin(t * 0.83 + 4)),
+      power: 0.35 + 0.2 * Math.sin(t * 1.3),
+    },
+  ];
+};
+
+const spawnDigit = (
+  spots: readonly Spot[],
+  motion: AuraMotion,
+  box: Box,
+): Digit => {
+  const total = spots.reduce((sum, spot) => sum + spot.power, 0);
+  let pick = Math.random() * total;
+  const spot =
+    spots.find((candidate) => (pick -= candidate.power) <= 0) ?? spots[0];
+  const power = spot?.power ?? 1;
+  const base = {
+    age: 0,
+    seed: Math.random(),
+    power,
+    large: Math.random() < 0.22,
+  };
+
+  const wide = motion === "rain" ? 0.12 : 0.07;
+  const scatter = (Math.random() + Math.random() + Math.random() - 1.5) * wide;
+  const point = outlinePoint((spot?.at ?? 0) + scatter, box);
+
+  if (motion === "rain") {
+    const distance = 40 + Math.random() * 80;
+    const speed = 22 + Math.random() * 26;
+    return {
+      ...base,
+      x: point.x + point.nx * distance,
+      y: point.y + point.ny * distance,
+      vx: -point.nx * speed,
+      vy: -point.ny * speed,
+      nx: point.nx,
+      ny: point.ny,
+      life: distance / speed,
+    };
+  }
+
+  const speed = 10 + Math.random() * 24;
+  const slide = (Math.random() - 0.5) * 12;
+  return {
+    ...base,
+    x: point.x,
+    y: point.y,
+    vx: point.nx * speed - point.ny * slide,
+    vy: point.ny * speed + point.nx * slide,
+    nx: point.nx,
+    ny: point.ny,
+    life: 2.4 + Math.random() * 2.6,
+  };
+};
+
+/**
+ * BitAura: energy that hugs the outline of the element it wraps. The glow flows
+ * along the edge and binary digits drift off it like sparks. Decorative only:
+ * it runs while in view and stands still when reduced motion is requested.
+ */
+export const BitAura: React.FC<BitAuraProps> = ({
+  source,
+  tone,
+  motion = "sparks",
+  density = 1,
+  radius = DEFAULT_RADIUS,
+  className = "",
+  children,
+}) => {
+  const wrapperRef = React.useRef<HTMLDivElement>(null);
+  const canvasRef = React.useRef<HTMLCanvasElement>(null);
+
+  React.useEffect(() => {
+    const wrapper = wrapperRef.current;
+    const canvas = canvasRef.current;
+    const context = canvas?.getContext("2d");
+    if (!wrapper || !canvas || !context) return;
+
+    const palette = tone === "light" ? LIGHT_PALETTE : DARK_PALETTE;
+    const still = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const fontFamily = window.getComputedStyle(canvas).fontFamily;
+    let box: Box = { width: 0, height: 0 };
+    let digits: Digit[] = [];
+    let owed = 0;
+    let clock = Math.random() * 40;
+    let last = 0;
+    let frame = 0;
+    let visible = false;
+
+    const step = (seconds: number) => {
+      clock += seconds;
+      const spots = spotsAt(source, motion, clock, box);
+      const rate =
+        Math.min(90, Math.max(28, perimeter(box) / 30)) *
+        palette.density *
+        MOTION_DENSITY[motion] *
+        density;
+      owed += rate * seconds;
+      while (owed >= 1) {
+        digits.push(spawnDigit(spots, motion, box));
+        owed -= 1;
+      }
+      const drag = 1 - 0.6 * seconds;
+      digits = digits.filter((digit) => {
+        digit.age += seconds;
+        if (motion !== "rain") {
+          digit.vx *= drag;
+          digit.vy = digit.vy * drag - 7 * seconds;
+        }
+        digit.x += digit.vx * seconds;
+        digit.y += digit.vy * seconds;
+        return digit.age < digit.life;
+      });
+      return spots;
+    };
+
+    const draw = (spots: readonly Spot[]) => {
+      const ratio = Math.min(window.devicePixelRatio || 1, MAX_PIXEL_RATIO);
+      context.setTransform(ratio, 0, 0, ratio, MARGIN * ratio, MARGIN * ratio);
+      context.clearRect(
+        -MARGIN,
+        -MARGIN,
+        box.width + 2 * MARGIN,
+        box.height + 2 * MARGIN,
+      );
+      context.globalCompositeOperation = palette.blend;
+      context.globalAlpha = 1;
+
+      context.beginPath();
+      context.roundRect(0, 0, box.width, box.height, radius);
+      const reach = Math.min(560, Math.max(220, perimeter(box) * 0.2));
+      for (const spot of palette.gain > 0 ? spots : []) {
+        const point = outlinePoint(spot.at, box);
+        for (const layer of GLOW_LAYERS) {
+          const colour = layer.hot ? palette.core : palette.glow;
+          const light = context.createRadialGradient(
+            point.x,
+            point.y,
+            0,
+            point.x,
+            point.y,
+            reach,
+          );
+          light.addColorStop(
+            0,
+            `rgba(${colour}, ${layer.alpha * spot.power * palette.gain})`,
+          );
+          light.addColorStop(1, `rgba(${colour}, 0)`);
+          context.strokeStyle = light;
+          context.lineWidth = layer.width;
+          context.stroke();
+        }
+      }
+
+      if (motion === "pulse") {
+        context.setLineDash([3, 7]);
+        context.lineWidth = 1.5;
+        for (let ring = 0; ring < PULSE_RINGS; ring++) {
+          const phase = fraction(clock / PULSE_PERIOD_S + ring / PULSE_RINGS);
+          const grow = phase * PULSE_REACH;
+          context.strokeStyle = `rgba(${palette.core}, ${(1 - phase) ** 2 * palette.ring})`;
+          context.beginPath();
+          context.roundRect(
+            -grow,
+            -grow,
+            box.width + 2 * grow,
+            box.height + 2 * grow,
+            radius + grow,
+          );
+          context.stroke();
+        }
+        context.setLineDash([]);
+      }
+
+      context.fillStyle = `rgb(${palette.digit})`;
+      context.textAlign = "center";
+      context.textBaseline = "middle";
+      for (const large of [false, true]) {
+        context.font = `${large ? 700 : 500} ${large ? 14 : 11}px ${fontFamily}`;
+        for (const digit of digits) {
+          if (digit.large !== large) continue;
+          const fade = Math.sin((Math.PI * digit.age) / digit.life);
+          context.globalAlpha = Math.min(1, fade * digit.power * 1.1);
+          const one =
+            Math.floor(digit.age * FLIPS_PER_S + digit.seed * 10) % 2 === 0;
+          context.fillText(one ? "1" : "0", digit.x, digit.y);
+        }
+      }
+    };
+
+    const resize = () => {
+      const rect = wrapper.getBoundingClientRect();
+      box = { width: rect.width, height: rect.height };
+      const ratio = Math.min(window.devicePixelRatio || 1, MAX_PIXEL_RATIO);
+      canvas.width = Math.round((box.width + 2 * MARGIN) * ratio);
+      canvas.height = Math.round((box.height + 2 * MARGIN) * ratio);
+      if (still) {
+        digits = [];
+        let spots = spotsAt(source, motion, clock, box);
+        for (let i = 0; i < STILL_FRAME_STEPS; i++)
+          spots = step(FRAME_MS / 1000);
+        draw(spots);
+      }
+    };
+
+    const tick = (now: number) => {
+      frame = window.requestAnimationFrame(tick);
+      if (now - last < FRAME_MS) return;
+      const seconds = Math.min(MAX_STEP_S, (now - last) / 1000);
+      last = now;
+      draw(step(seconds));
+    };
+
+    const sizeObserver = new ResizeObserver(resize);
+    sizeObserver.observe(wrapper);
+    resize();
+
+    const viewObserver = new IntersectionObserver(
+      ([entry]) => {
+        const next = entry?.isIntersecting ?? false;
+        if (next === visible || still) return;
+        visible = next;
+        if (visible) {
+          last = performance.now();
+          frame = window.requestAnimationFrame(tick);
+        } else {
+          window.cancelAnimationFrame(frame);
+        }
+      },
+      { rootMargin: `${MARGIN}px` },
+    );
+    viewObserver.observe(wrapper);
+
+    return () => {
+      sizeObserver.disconnect();
+      viewObserver.disconnect();
+      window.cancelAnimationFrame(frame);
+    };
+  }, [source, tone, motion, density, radius]);
+
+  return (
+    <div
+      ref={wrapperRef}
+      // The wrapper has to be positioned; keep the caller's own positioning if it brings one.
+      className={
+        className.split(" ").includes("absolute")
+          ? className
+          : `relative ${className}`
+      }
+    >
+      <canvas
+        ref={canvasRef}
+        aria-hidden="true"
+        className="bit-aura pointer-events-none absolute font-mono"
+        style={{
+          left: -MARGIN,
+          top: -MARGIN,
+          width: `calc(100% + ${2 * MARGIN}px)`,
+          height: `calc(100% + ${2 * MARGIN}px)`,
+        }}
+      />
+      <div className="relative h-full">{children}</div>
+    </div>
+  );
+};
@@ -0,0 +1,49 @@
+"use client";
+
+import * as React from "react";
+
+const SURFACE = "[data-glow]";
+
+/**
+ * BitGlow: a light that follows the pointer across every `data-glow` surface.
+ * It only publishes the pointer position as `--gx` / `--gy` on those surfaces;
+ * the light itself is drawn in CSS by a `.bit-glow` child (see globals.css).
+ * Purely decorative, and off when reduced motion is requested.
+ */
+export const BitGlow: React.FC = () => {
+  React.useEffect(() => {
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+
+    let frame = 0;
+    let latest: PointerEvent | null = null;
+
+    const publish = () => {
+      frame = 0;
+      if (!latest) return;
+      const { clientX, clientY, target } = latest;
+      let surface =
+        target instanceof Element ? target.closest<HTMLElement>(SURFACE) : null;
+      // Surfaces nest (a button inside a dark section): each one gets its own position.
+      while (surface) {
+        const rect = surface.getBoundingClientRect();
+        surface.style.setProperty("--gx", `${clientX - rect.left}px`);
+        surface.style.setProperty("--gy", `${clientY - rect.top}px`);
+        surface =
+          surface.parentElement?.closest<HTMLElement>(SURFACE) ?? null;
+      }
+    };
+
+    const onPointerMove = (event: PointerEvent) => {
+      latest = event;
+      if (frame === 0) frame = window.requestAnimationFrame(publish);
+    };
+
+    window.addEventListener("pointermove", onPointerMove, { passive: true });
+    return () => {
+      window.removeEventListener("pointermove", onPointerMove);
+      if (frame !== 0) window.cancelAnimationFrame(frame);
+    };
+  }, []);
+
+  return null;
+};
@@ -0,0 +1,17 @@
+import * as React from "react";
+import { BitAura } from "./BitAura";
+
+/**
+ * BitSeam: a lit top edge for a dark section, with digits drifting down from it.
+ * The section needs `relative` and has to clip its overflow.
+ */
+export const BitSeam: React.FC<{ density?: number }> = ({ density = 0.4 }) => (
+  <div
+    className="pointer-events-none absolute inset-x-0 top-0"
+    aria-hidden="true"
+  >
+    <BitAura source="bottom" tone="dark" radius={0} density={density}>
+      <div className="h-0" />
+    </BitAura>
+  </div>
+);
@@ -91,6 +91,8 @@ export const BitHeadline: React.FC<{
    const reducedMotion = window.matchMedia(
      "(prefers-reduced-motion: reduce)",
    ).matches;
+    // Touch screens have no pointer to light the digits up, so a spot wanders on its own.
+    const noHover = window.matchMedia("(hover: none)").matches;

    let measured: Measured[] = [];
    let width = 0;
@@ -306,6 +308,13 @@ export const BitHeadline: React.FC<{
      if (disposed) return;
      if (now - lastFrame >= FRAME_MS) {
        lastFrame = now;
+        if (noHover) {
+          const seconds = now / 1000;
+          pointer = {
+            x: width * (0.5 + 0.46 * Math.sin(seconds * 0.55)),
+            y: height * (0.5 + 0.4 * Math.sin(seconds * 0.9 + 1)),
+          };
+        }
        paint(now);
      }
      raf = requestAnimationFrame(loop);
@@ -339,7 +348,7 @@ export const BitHeadline: React.FC<{
      restart();
      setPainted(true);
      resizeObserver.observe(wrap);
-      if (!reducedMotion) {
+      if (!reducedMotion && !noHover) {
        window.addEventListener("pointermove", onPointerMove);
        document.addEventListener("pointerleave", onPointerLeave);
      }
@@ -1,5 +1,6 @@
 import * as React from "react";
 import { BinaryTicker } from "@/src/components/bits/BinaryTicker";
+import { BitSeam } from "@/src/components/bits/BitSeam";
 import { BitWipe } from "@/src/components/bits/BitWipe";
 import { DecodeText } from "@/src/components/bits/DecodeText";
 import { Reveal } from "@/src/components/Reveal";
@@ -10,6 +11,8 @@ interface BlockProps {
  label: string;
  title: React.ReactNode;
  id?: string;
+  /** `dark` turns the section into a dark stage. */
+  tone?: "light" | "dark";
  children: React.ReactNode;
 }

@@ -22,36 +25,61 @@ export const Block: React.FC<BlockProps> = ({
  label,
  title,
  id,
+  tone = "light",
  children,
-}) => (
-  <section
-    id={id}
-    className="relative scroll-mt-24 border-t border-slate-200 bg-white"
-  >
-    <div className="mx-auto w-full max-w-[1400px] px-5 py-20 md:px-12 md:py-36">
-      <Reveal>
-        <div className="mb-8 flex items-center gap-4 md:mb-12">
-          <span className="font-mono text-[11px] font-bold tracking-[0.2em] text-slate-900">
-            {index}
-          </span>
-          <span className="h-px w-10 bg-slate-300" />
-          <DecodeText
-            text={label}
-            className="font-mono text-[11px] uppercase tracking-[0.25em] text-slate-500"
-          />
-          <BinaryTicker
-            value={parseInt(index, 10)}
-            alive
-            className="ml-auto hidden font-mono text-[10px] tracking-[0.3em] text-slate-300 md:block"
-          />
-        </div>
-      </Reveal>
-      <BitWipe delay={0.1}>
-        <h2 className="m-0 max-w-6xl text-4xl font-bold leading-[0.95] tracking-tighter text-slate-900 md:text-7xl lg:text-[6.5rem]">
-          {title}
-        </h2>
-      </BitWipe>
-      <div className="mt-14 md:mt-24">{children}</div>
-    </div>
-  </section>
-);
+}) => {
+  const dark = tone === "dark";
+  return (
+    <section
+      id={id}
+      className={`relative scroll-mt-24 border-t ${
+        dark
+          ? "overflow-clip border-slate-800 bg-slate-900"
+          : "overflow-x-clip border-slate-200 bg-white"
+      }`}
+    >
+      {dark && (
+        <div
+          className="pointer-events-none absolute inset-0 opacity-70"
+          style={{
+            backgroundImage: "radial-gradient(#1e293b 1px, transparent 1px)",
+            backgroundSize: "20px 20px",
+          }}
+          aria-hidden="true"
+        />
+      )}
+      {dark && <BitSeam />}
+      <div className="relative mx-auto w-full max-w-[1400px] px-5 py-20 md:px-12 md:py-36">
+        <Reveal>
+          <div className="mb-8 flex items-center gap-4 md:mb-12">
+            <span
+              className={`font-mono text-[11px] font-bold tracking-[0.2em] ${dark ? "text-white" : "text-slate-900"}`}
+            >
+              {index}
+            </span>
+            <span
+              className={`h-px w-10 ${dark ? "bg-slate-700" : "bg-slate-300"}`}
+            />
+            <DecodeText
+              text={label}
+              className={`font-mono text-[11px] uppercase tracking-[0.25em] ${dark ? "text-slate-400" : "text-slate-500"}`}
+            />
+            <BinaryTicker
+              value={parseInt(index, 10)}
+              alive
+              className={`ml-auto hidden font-mono text-[10px] tracking-[0.3em] md:block ${dark ? "text-slate-600" : "text-slate-300"}`}
+            />
+          </div>
+        </Reveal>
+        <BitWipe delay={0.1} tone={dark ? "light" : "dark"}>
+          <h2
+            className={`m-0 max-w-6xl text-4xl font-bold leading-[0.95] tracking-tighter md:text-7xl lg:text-[6.5rem] ${dark ? "text-white" : "text-slate-900"}`}
+          >
+            {title}
+          </h2>
+        </BitWipe>
+        <div className="mt-14 md:mt-24">{children}</div>
+      </div>
+    </section>
+  );
+};
@@ -1,6 +1,8 @@
 import * as React from "react";
 import { Reveal } from "@/src/components/Reveal";
 import { EmailLink } from "@/src/components/EmailLink";
+import { BitAura } from "@/src/components/bits/BitAura";
+import { BitSeam } from "@/src/components/bits/BitSeam";
 import { BitHeadline, type BitLine } from "./BitHeadline";
 import { ContactComposer } from "./ContactComposer";

@@ -13,7 +15,8 @@ const CLOSING: readonly BitLine[] = [
 export const ClosingCta: React.FC = () => (
  <section
    id="contact"
-    className="relative border-t border-slate-200 bg-slate-900 text-white"
+    data-glow
+    className="relative overflow-clip border-t border-slate-200 bg-slate-900 text-white"
  >
    <div
      className="pointer-events-none absolute inset-0 opacity-70"
@@ -23,6 +26,8 @@ export const ClosingCta: React.FC = () => (
      }}
      aria-hidden="true"
    />
+    <div className="bit-glow bit-glow-dots" aria-hidden="true" />
+    <BitSeam />
    <div className="relative mx-auto grid w-full max-w-[1400px] grid-cols-1 gap-14 px-5 py-24 md:px-12 md:py-40 lg:grid-cols-12 lg:items-center lg:gap-12">
      <Reveal className="lg:col-span-6">
        <BitHeadline
@@ -40,7 +45,9 @@ export const ClosingCta: React.FC = () => (
        </div>
      </Reveal>
      <Reveal delay={0.15} className="lg:col-span-6">
-        <ContactComposer />
+        <BitAura source="around" tone="dark">
+          <ContactComposer />
+        </BitAura>
      </Reveal>
    </div>
  </section>
@@ -122,7 +122,7 @@ export const ContactComposer: React.FC = () => {
      <dl className="m-0 border-b border-slate-800 px-5 py-4 font-mono text-[12px] leading-relaxed md:px-7 md:text-[13px]">
        <div className="flex gap-4">
          <dt className="w-16 shrink-0 text-slate-500">to</dt>
-          <dd className="m-0 text-slate-200">
+          <dd className="m-0 select-all text-slate-200">
            {address ?? spellOutEmail(CONTACT_EMAIL_PARTS)}
          </dd>
        </div>
@@ -148,7 +148,7 @@ export const ContactComposer: React.FC = () => {
          href={
            address ? mailtoHref(CONTACT_EMAIL_PARTS, topic.draft) : "#contact"
          }
-          className="group inline-flex flex-1 items-center justify-between gap-4 rounded-full bg-white px-7 py-4 font-sans text-[12px] font-bold uppercase tracking-[0.18em] text-slate-900 no-underline transition-transform duration-300 hover:-translate-y-0.5"
+          className="bit-cta bit-cta-light group inline-flex flex-1 items-center justify-between gap-4 rounded-full bg-white px-7 py-4 font-sans text-[12px] font-bold uppercase tracking-[0.18em] text-slate-900 no-underline transition-transform duration-300 hover:-translate-y-0.5"
        >
          Open in my mail app
          <span
@@ -3,6 +3,7 @@
 import * as React from "react";
 import { motion } from "framer-motion";
 import { Button } from "@/src/components/Button";
+import { BitAura } from "@/src/components/bits/BitAura";
 import { DecodeText } from "@/src/components/bits/DecodeText";
 import { PathScene } from "@/src/components/illustrations/PathScenes";
 import { SERVICE_PATHS, type ServicePath } from "@/src/content/paths";
@@ -49,25 +50,33 @@ const PathStory: React.FC<{ path: ServicePath; active: boolean }> = ({
  return (
    <div ref={ref} className="grid grid-cols-1 gap-8 md:grid-cols-12 md:gap-12">
      <div className="md:order-2 md:col-span-7">
-        <div className="relative overflow-hidden rounded-3xl bg-slate-900 md:sticky md:top-28">
-          <div className="flex items-center justify-between border-b border-slate-800 px-5 py-4 md:px-7">
-            <DecodeText
-              key={current?.title}
-              text={current?.title ?? ""}
-              className="font-mono text-[11px] uppercase tracking-[0.2em] text-slate-300"
-            />
-            <span className="font-mono text-[11px] tracking-[0.2em] text-slate-500">
-              {step + 1} / {path.steps.length}
-            </span>
+        <BitAura source="top" tone="light" className="md:sticky md:top-28">
+          <div
+            data-glow
+            className="relative overflow-hidden rounded-3xl bg-slate-900"
+          >
+            <span className="bit-glow bit-glow-dots" aria-hidden="true" />
+            <div className="relative flex items-center justify-between border-b border-slate-800 px-5 py-4 md:px-7">
+              <DecodeText
+                key={current?.title}
+                text={current?.title ?? ""}
+                className="font-mono text-[11px] uppercase tracking-[0.2em] text-slate-300"
+              />
+              <span className="font-mono text-[11px] tracking-[0.2em] text-slate-500">
+                {step + 1} / {path.steps.length}
+              </span>
+            </div>
+            <div className="relative px-2 py-4 md:px-10 md:py-8">
+              <PathScene
+                pathId={path.id}
+                step={step}
+                title={
+                  current ? `${current.title}. ${current.text}` : path.need
+                }
+              />
+            </div>
          </div>
-          <div className="px-2 py-4 md:px-10 md:py-8">
-            <PathScene
-              pathId={path.id}
-              step={step}
-              title={current ? `${current.title}. ${current.text}` : path.need}
-            />
-          </div>
-        </div>
+        </BitAura>
      </div>

      <ol className="m-0 list-none p-0 md:order-1 md:col-span-5">
@@ -154,12 +163,14 @@ export const PathPicker: React.FC = () => {
              aria-selected={selected}
              aria-controls={`path-panel-${path.id}`}
              onClick={() => setActiveId(path.id)}
+              data-glow
              className={`bit-card group flex h-full flex-col justify-between rounded-3xl border p-5 text-left transition-all duration-300 md:p-7 ${
                selected
                  ? "border-slate-900 bg-slate-900 text-white"
                  : "border-slate-200 bg-white text-slate-900 hover:-translate-y-1 hover:border-slate-400"
              }`}
            >
+              <span className="bit-glow bit-glow-edge" aria-hidden="true" />
              <span className="font-mono text-[11px] tracking-[0.2em] text-slate-400">
                0{index + 1}
              </span>
@@ -1,5 +1,6 @@
 "use client";

+import { BitSeam } from "@/src/components/bits/BitSeam";
 import * as React from "react";
 import Image from "next/image";
 import { motion } from "framer-motion";
@@ -32,12 +33,14 @@ export const PortraitSection: React.FC<{
    >
      <Image
        src="/marc-mintel.png"
-        alt="Portrait of Marc Mintel"
+        alt="Marc Mintel, freelance web developer"
        fill
        sizes="(min-width: 768px) 62vw, 100vw"
        className="object-cover object-[50%_18%] grayscale"
        priority={false}
      />
+      {/* Slow light behind the fades, so the dark surface is not flat. */}
+      <div className="bit-aurora" aria-hidden="true" />
      {/* Fades: into the surface on the left, and at top and bottom. */}
      <div className="absolute inset-0 hidden bg-gradient-to-r from-slate-900 via-slate-900/75 to-slate-900/10 md:block" />
      <div className="absolute inset-x-0 bottom-0 h-2/5 bg-gradient-to-t from-slate-900 to-transparent" />
@@ -72,5 +75,6 @@ export const PortraitSection: React.FC<{
        <div className="mt-10 md:mt-14">{children}</div>
      </motion.div>
    </div>
+    <BitSeam density={1} />
  </section>
 );
@@ -37,7 +37,7 @@ export const StickyBook: React.FC = () => {
      <a
        href="#contact"
        tabIndex={visible ? 0 : -1}
-        className="flex items-center gap-3 rounded-full bg-slate-900 px-7 py-4 font-sans text-[11px] font-bold uppercase tracking-[0.2em] text-white no-underline shadow-2xl shadow-slate-900/20 transition-transform duration-300 hover:-translate-y-0.5"
+        className="bit-cta flex items-center gap-3 rounded-full bg-slate-900 px-7 py-4 font-sans text-[11px] font-bold uppercase tracking-[0.2em] text-white no-underline shadow-2xl shadow-slate-900/20 transition-transform duration-300 hover:-translate-y-0.5"
      >
        Get in touch <span aria-hidden="true">→</span>
      </a>
@@ -1,5 +1,6 @@
 "use client";

+import { BitAura } from "@/src/components/bits/BitAura";
 import * as React from "react";
 import { useNarrow } from "./useNarrow";
 import {
@@ -242,193 +243,197 @@ export const AutomationFlow: React.FC = () => {
        {flow.summary}
      </p>

-      <div className="mt-8 overflow-hidden rounded-3xl bg-slate-900">
-        <div className="flex items-center justify-between border-b border-slate-800 px-5 py-4 md:px-7">
-          <span className={`${MONO} text-slate-400`}>{flow.name}</span>
-          <span className={`${MONO} flex items-center gap-2 text-slate-500`}>
-            <span
-              className={`h-1.5 w-1.5 rounded-full ${finished ? "bg-emerald-400" : "bg-amber-300 animate-pulse"}`}
-            />
-            {finished ? "run complete" : "running"}
-          </span>
-        </div>
-
-        <div>
-          <svg
-            viewBox={`0 0 ${canvas.w} ${canvas.h}`}
-            role="img"
-            aria-label={`${flow.name}: ${flow.summary}`}
-            className="block h-auto w-full"
-          >
-            <defs>
-              <pattern
-                id="flow-grid"
-                width="20"
-                height="20"
-                patternUnits="userSpaceOnUse"
-              >
-                <circle cx="1" cy="1" r="1" fill="#1e293b" />
-              </pattern>
-            </defs>
-            <rect width={canvas.w} height={canvas.h} fill="url(#flow-grid)" />
-
-            {flow.edges.map(([from, to]) => {
-              const a = nodeOf(from);
-              const b = nodeOf(to);
-              if (!a || !b) return null;
-              const done = still || travelled.has(`${from}>${to}`);
-              return (
-                <path
-                  key={`${from}>${to}`}
-                  d={pathOf(a, b, tall)}
-                  fill="none"
-                  stroke={done ? "#e2e8f0" : "#334155"}
-                  strokeWidth={done ? 2 : 1.5}
-                  style={{ transition: "stroke 300ms" }}
-                />
-              );
-            })}
-
-            {activeEdges.map(([from, to]) => {
-              const a = nodeOf(from);
-              const b = nodeOf(to);
-              if (!a || !b || clock.t >= 1) return null;
-              const eased = ease(clock.t);
-              return (
-                <g key={`packet-${from}>${to}`}>
-                  {[0.16, 0.1, 0.05].map((lag, i) => {
-                    const p = pointOn(a, b, Math.max(0, eased - lag), tall);
-                    return (
-                      <circle
-                        key={lag}
-                        cx={p.x}
-                        cy={p.y}
-                        r={5 - i}
-                        fill={MARK}
-                        opacity={0.12 + i * 0.12}
-                      />
-                    );
-                  })}
-                  <circle
-                    cx={pointOn(a, b, eased, tall).x}
-                    cy={pointOn(a, b, eased, tall).y}
-                    r={7}
-                    fill={MARK}
-                  />
-                </g>
-              );
-            })}
-
-            {placed.map((node) => {
-              const style = KIND_STYLE[node.kind];
-              const on = reached.has(node.id);
-              return (
-                <g key={node.id}>
-                  <rect
-                    x={node.cx - NODE_W / 2}
-                    y={node.cy - NODE_H / 2}
-                    width={NODE_W}
-                    height={NODE_H}
-                    rx={14}
-                    fill={on ? "#1e293b" : "#0f172a"}
-                    stroke={on ? style.stroke : "#334155"}
-                    strokeWidth={on ? 1.75 : 1.25}
-                    strokeDasharray={style.dash}
-                    style={{ transition: "fill 300ms, stroke 300ms" }}
-                  />
-                  <text
-                    x={node.cx - NODE_W / 2 + 16}
-                    y={node.cy - 8}
-                    fill={on ? style.tag : "#64748b"}
-                    style={{
-                      fontFamily:
-                        "var(--font-jetbrains-mono), ui-monospace, monospace",
-                      fontSize: 10,
-                      letterSpacing: "0.14em",
-                      textTransform: "uppercase",
-                      transition: "fill 300ms",
-                    }}
-                  >
-                    {node.system}
-                  </text>
-                  <text
-                    x={node.cx - NODE_W / 2 + 16}
-                    y={node.cy + 14}
-                    fill={on ? "#f8fafc" : "#94a3b8"}
-                    style={{
-                      fontFamily:
-                        "var(--font-inter), Inter, system-ui, sans-serif",
-                      fontSize: 15,
-                      fontWeight: 600,
-                      transition: "fill 300ms",
-                    }}
-                  >
-                    {node.label}
-                  </text>
-                  {on && (
-                    <circle
-                      cx={node.cx + NODE_W / 2 - 16}
-                      cy={node.cy - NODE_H / 2 + 16}
-                      r={4}
-                      fill={node.kind === "human" ? "#f8fafc" : "#34d399"}
-                    />
-                  )}
-                </g>
-              );
-            })}
-          </svg>
-        </div>
-
-        <div className="grid grid-cols-1 border-t border-slate-800 md:grid-cols-12">
-          <div className="border-b border-slate-800 px-5 py-5 md:col-span-7 md:border-b-0 md:border-r md:px-7">
-            <p className={`${MONO} m-0 text-slate-500`}>Log</p>
-            <ol
-              className="m-0 mt-3 min-h-[7.5rem] list-none p-0 font-mono text-[12px] leading-relaxed text-slate-300 md:text-[13px]"
-              aria-live="off"
-            >
-              {logLines.map((line, index) => (
-                <li key={line} className="flex gap-3">
-                  <span className="text-slate-600">
-                    {String(index + 1).padStart(2, "0")}
-                  </span>
-                  <span
-                    className={
-                      line.startsWith("unclear") ? "text-amber-200" : undefined
-                    }
-                  >
-                    {line}
-                  </span>
-                </li>
-              ))}
-            </ol>
+      <BitAura source="around" tone="light" motion="pulse" className="mt-8">
+        <div className="overflow-hidden rounded-3xl bg-slate-900">
+          <div className="flex items-center justify-between border-b border-slate-800 px-5 py-4 md:px-7">
+            <span className={`${MONO} text-slate-400`}>{flow.name}</span>
+            <span className={`${MONO} flex items-center gap-2 text-slate-500`}>
+              <span
+                className={`h-1.5 w-1.5 rounded-full ${finished ? "bg-emerald-400" : "bg-amber-300 animate-pulse"}`}
+              />
+              {finished ? "run complete" : "running"}
+            </span>
          </div>
-          <ul className="m-0 flex list-none flex-col justify-center gap-2 px-5 py-5 md:col-span-5 md:px-7">
-            {(Object.keys(KIND_LABEL) as NodeKind[])
-              .filter((kind) => flow.nodes.some((node) => node.kind === kind))
-              .map((kind) => (
-                <li
-                  key={kind}
-                  className="flex items-center gap-3 font-mono text-[11px] text-slate-400"
+
+          <div>
+            <svg
+              viewBox={`0 0 ${canvas.w} ${canvas.h}`}
+              role="img"
+              aria-label={`${flow.name}: ${flow.summary}`}
+              className="block h-auto w-full"
+            >
+              <defs>
+                <pattern
+                  id="flow-grid"
+                  width="20"
+                  height="20"
+                  patternUnits="userSpaceOnUse"
                >
-                  <svg width="22" height="12" aria-hidden="true">
-                    <rect
-                      x="1"
-                      y="1"
-                      width="20"
-                      height="10"
-                      rx="3"
-                      fill="none"
-                      stroke={KIND_STYLE[kind].stroke}
-                      strokeWidth="1.5"
-                      strokeDasharray={KIND_STYLE[kind].dash}
+                  <circle cx="1" cy="1" r="1" fill="#1e293b" />
+                </pattern>
+              </defs>
+              <rect width={canvas.w} height={canvas.h} fill="url(#flow-grid)" />
+
+              {flow.edges.map(([from, to]) => {
+                const a = nodeOf(from);
+                const b = nodeOf(to);
+                if (!a || !b) return null;
+                const done = still || travelled.has(`${from}>${to}`);
+                return (
+                  <path
+                    key={`${from}>${to}`}
+                    d={pathOf(a, b, tall)}
+                    fill="none"
+                    stroke={done ? "#e2e8f0" : "#334155"}
+                    strokeWidth={done ? 2 : 1.5}
+                    style={{ transition: "stroke 300ms" }}
+                  />
+                );
+              })}
+
+              {activeEdges.map(([from, to]) => {
+                const a = nodeOf(from);
+                const b = nodeOf(to);
+                if (!a || !b || clock.t >= 1) return null;
+                const eased = ease(clock.t);
+                return (
+                  <g key={`packet-${from}>${to}`}>
+                    {[0.16, 0.1, 0.05].map((lag, i) => {
+                      const p = pointOn(a, b, Math.max(0, eased - lag), tall);
+                      return (
+                        <circle
+                          key={lag}
+                          cx={p.x}
+                          cy={p.y}
+                          r={5 - i}
+                          fill={MARK}
+                          opacity={0.12 + i * 0.12}
+                        />
+                      );
+                    })}
+                    <circle
+                      cx={pointOn(a, b, eased, tall).x}
+                      cy={pointOn(a, b, eased, tall).y}
+                      r={7}
+                      fill={MARK}
                    />
-                  </svg>
-                  {KIND_LABEL[kind]}
-                </li>
-              ))}
-          </ul>
+                  </g>
+                );
+              })}
+
+              {placed.map((node) => {
+                const style = KIND_STYLE[node.kind];
+                const on = reached.has(node.id);
+                return (
+                  <g key={node.id}>
+                    <rect
+                      x={node.cx - NODE_W / 2}
+                      y={node.cy - NODE_H / 2}
+                      width={NODE_W}
+                      height={NODE_H}
+                      rx={14}
+                      fill={on ? "#1e293b" : "#0f172a"}
+                      stroke={on ? style.stroke : "#334155"}
+                      strokeWidth={on ? 1.75 : 1.25}
+                      strokeDasharray={style.dash}
+                      style={{ transition: "fill 300ms, stroke 300ms" }}
+                    />
+                    <text
+                      x={node.cx - NODE_W / 2 + 16}
+                      y={node.cy - 8}
+                      fill={on ? style.tag : "#64748b"}
+                      style={{
+                        fontFamily:
+                          "var(--font-jetbrains-mono), ui-monospace, monospace",
+                        fontSize: 10,
+                        letterSpacing: "0.14em",
+                        textTransform: "uppercase",
+                        transition: "fill 300ms",
+                      }}
+                    >
+                      {node.system}
+                    </text>
+                    <text
+                      x={node.cx - NODE_W / 2 + 16}
+                      y={node.cy + 14}
+                      fill={on ? "#f8fafc" : "#94a3b8"}
+                      style={{
+                        fontFamily:
+                          "var(--font-inter), Inter, system-ui, sans-serif",
+                        fontSize: 15,
+                        fontWeight: 600,
+                        transition: "fill 300ms",
+                      }}
+                    >
+                      {node.label}
+                    </text>
+                    {on && (
+                      <circle
+                        cx={node.cx + NODE_W / 2 - 16}
+                        cy={node.cy - NODE_H / 2 + 16}
+                        r={4}
+                        fill={node.kind === "human" ? "#f8fafc" : "#34d399"}
+                      />
+                    )}
+                  </g>
+                );
+              })}
+            </svg>
+          </div>
+
+          <div className="grid grid-cols-1 border-t border-slate-800 md:grid-cols-12">
+            <div className="border-b border-slate-800 px-5 py-5 md:col-span-7 md:border-b-0 md:border-r md:px-7">
+              <p className={`${MONO} m-0 text-slate-500`}>Log</p>
+              <ol
+                className="m-0 mt-3 min-h-[7.5rem] list-none p-0 font-mono text-[12px] leading-relaxed text-slate-300 md:text-[13px]"
+                aria-live="off"
+              >
+                {logLines.map((line, index) => (
+                  <li key={line} className="flex gap-3">
+                    <span className="text-slate-600">
+                      {String(index + 1).padStart(2, "0")}
+                    </span>
+                    <span
+                      className={
+                        line.startsWith("unclear")
+                          ? "text-amber-200"
+                          : undefined
+                      }
+                    >
+                      {line}
+                    </span>
+                  </li>
+                ))}
+              </ol>
+            </div>
+            <ul className="m-0 flex list-none flex-col justify-center gap-2 px-5 py-5 md:col-span-5 md:px-7">
+              {(Object.keys(KIND_LABEL) as NodeKind[])
+                .filter((kind) => flow.nodes.some((node) => node.kind === kind))
+                .map((kind) => (
+                  <li
+                    key={kind}
+                    className="flex items-center gap-3 font-mono text-[11px] text-slate-400"
+                  >
+                    <svg width="22" height="12" aria-hidden="true">
+                      <rect
+                        x="1"
+                        y="1"
+                        width="20"
+                        height="10"
+                        rx="3"
+                        fill="none"
+                        stroke={KIND_STYLE[kind].stroke}
+                        strokeWidth="1.5"
+                        strokeDasharray={KIND_STYLE[kind].dash}
+                      />
+                    </svg>
+                    {KIND_LABEL[kind]}
+                  </li>
+                ))}
+            </ul>
+          </div>
        </div>
-      </div>
+      </BitAura>

      <div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-2">
        <div className="rounded-3xl border border-slate-200 p-6 md:p-8">
@@ -2,6 +2,7 @@

 import * as React from "react";
 import { motion } from "framer-motion";
+import { BitAura } from "@/src/components/bits/BitAura";

 export type CareerStation = {
  readonly years: string;
@@ -10,21 +11,29 @@ export type CareerStation = {
 };

 /**
- * CareerLine: the path so far as a line that draws itself, one station after another.
+ * CareerLine: the path so far as a line of light that draws itself, one station
+ * after another. Made for a dark surface.
 */
 export const CareerLine: React.FC<{ stations: readonly CareerStation[] }> = ({
  stations,
 }) => (
  <ol className="relative m-0 list-none p-0">
-    <motion.span
-      className="absolute left-[5px] top-2 w-px origin-top bg-slate-900 md:left-[7px]"
-      style={{ bottom: 8 }}
-      initial={{ scaleY: 0 }}
-      whileInView={{ scaleY: 1 }}
-      viewport={{ once: true, margin: "-15%" }}
-      transition={{ duration: 1.4, ease: "easeOut" }}
-      aria-hidden="true"
-    />
+    <BitAura
+      source="left"
+      tone="dark"
+      radius={0}
+      density={0.5}
+      className="absolute bottom-2 left-[5px] top-2 w-px md:left-[7px]"
+    >
+      <motion.span
+        className="block h-full w-px origin-top bg-indigo-100"
+        initial={{ scaleY: 0 }}
+        whileInView={{ scaleY: 1 }}
+        viewport={{ once: true, margin: "-15%" }}
+        transition={{ duration: 1.4, ease: "easeOut" }}
+        aria-hidden="true"
+      />
+    </BitAura>
    {stations.map((station, index) => (
      <motion.li
        key={station.years}
@@ -35,19 +44,21 @@ export const CareerLine: React.FC<{ stations: readonly CareerStation[] }> = ({
        transition={{ duration: 0.4, delay: 0.15 + index * 0.18 }}
      >
        <span
-          className={`absolute left-0 top-1.5 h-[11px] w-[11px] rounded-full border-2 border-slate-900 md:h-[15px] md:w-[15px] ${
-            index === stations.length - 1 ? "bg-slate-900" : "bg-white"
+          className={`absolute left-0 top-1.5 h-[11px] w-[11px] rounded-full border-2 border-indigo-100 md:h-[15px] md:w-[15px] ${
+            index === stations.length - 1
+              ? "bit-node-live bg-white"
+              : "bg-slate-900"
          }`}
          aria-hidden="true"
        />
-        <span className="font-mono text-[11px] uppercase tracking-[0.2em] text-slate-500 md:col-span-3 md:pt-1.5">
+        <span className="font-mono text-[11px] uppercase tracking-[0.2em] text-slate-400 md:col-span-3 md:pt-1.5">
          {station.years}
        </span>
        <span className="md:col-span-9">
-          <span className="block font-sans text-xl font-bold tracking-tight text-slate-900 md:text-3xl">
+          <span className="block font-sans text-xl font-bold tracking-tight text-white md:text-3xl">
            {station.role}
          </span>
-          <span className="mt-1 block font-sans text-base text-slate-500 md:text-lg">
+          <span className="mt-1 block font-sans text-base text-slate-400 md:text-lg">
            {station.place}
          </span>
        </span>
@@ -15,6 +15,10 @@ const LINE = "#475569";
 const SOFT = "#1e293b";
 const MARK = "#fde68a";
 const LIVE = "#10b981";
+/** A lit surface: a light tint instead of a solid white block. */
+const TINT = "rgba(248, 250, 252, 0.14)";
+const RIM = "#64748b";
+const FINE = 1.1;
 const MONO = {
  fontFamily: "var(--font-jetbrains-mono), ui-monospace, monospace",
  // Set on the svg: larger on phones, where the drawing is scaled down.
@@ -70,8 +74,11 @@ const Packet: React.FC<{
  pause?: number;
 }> = ({ xs, ys, delay = 0, duration = 1.2, pause = 1.4 }) => (
  <motion.circle
-    r={5}
+    r={3.5}
    fill={MARK}
+    stroke={MARK}
+    strokeOpacity={0.28}
+    strokeWidth={6}
    initial={{ cx: xs[0], cy: ys[0], opacity: 0 }}
    animate={{
      cx: [...xs],
@@ -96,18 +103,29 @@ const Person: React.FC<{ x: number; label: string; filled?: boolean }> = ({
  <g>
    <circle
      cx={x}
-      cy={128}
-      r={20}
-      fill={filled ? INK : PAPER}
+      cy={130}
+      r={15}
+      fill={filled ? TINT : "none"}
      stroke={INK}
-      strokeWidth={1.5}
+      strokeWidth={FINE}
    />
    <path
-      d={`M ${x - 34} 196 Q ${x - 34} 158 ${x} 158 Q ${x + 34} 158 ${x + 34} 196`}
-      fill={filled ? INK : PAPER}
+      d={`M ${x - 28} 194 C ${x - 28} 172 ${x - 16} 160 ${x} 160 C ${x + 16} 160 ${x + 28} 172 ${x + 28} 194`}
+      fill={filled ? TINT : "none"}
      stroke={INK}
-      strokeWidth={1.5}
+      strokeWidth={FINE}
+      strokeLinecap="round"
    />
+    <line
+      x1={x - 36}
+      x2={x + 36}
+      y1={194}
+      y2={194}
+      stroke={LINE}
+      strokeWidth={1}
+      strokeLinecap="round"
+    />
+    {filled && <circle cx={x + 12} cy={119} r={3.5} fill={MARK} />}
    <text x={x} y={222} textAnchor="middle" style={MONO}>
      {label}
    </text>
@@ -129,31 +147,41 @@ const Talk: React.FC = () => (
          x={b.x}
          y={b.y}
          width={b.w}
-          height={26}
-          rx={13}
-          fill={b.side === "left" ? SOFT : INK}
+          height={24}
+          rx={12}
+          fill={b.side === "left" ? SOFT : TINT}
          stroke={b.side === "left" ? LINE : INK}
+          strokeWidth={b.side === "left" ? 1 : FINE}
        />
        <line
          x1={b.x + 14}
          x2={b.x + b.w - 14}
-          y1={b.y + 13}
-          y2={b.y + 13}
-          stroke={b.side === "left" ? "#94a3b8" : PAPER}
-          strokeWidth={2}
+          y1={b.y + 12}
+          y2={b.y + 12}
+          stroke={b.side === "left" ? "#94a3b8" : INK}
+          strokeWidth={1.5}
          strokeLinecap="round"
        />
      </motion.g>
    ))}
    <motion.g {...appear(1.7)}>
-      <rect x={258} y={200} width={72} height={26} rx={13} fill={INK} />
+      <rect
+        x={270}
+        y={200}
+        width={60}
+        height={24}
+        rx={12}
+        fill={TINT}
+        stroke={INK}
+        strokeWidth={FINE}
+      />
      {[0, 1, 2].map((dot) => (
        <motion.circle
          key={dot}
-          cx={280 + dot * 14}
-          cy={213}
-          r={3}
-          fill={PAPER}
+          cx={288 + dot * 12}
+          cy={212}
+          r={2.25}
+          fill={INK}
          animate={{ opacity: [0.2, 1, 0.2] }}
          transition={{ duration: 1.1, delay: dot * 0.18, repeat: Infinity }}
        />
@@ -186,15 +214,16 @@ const WeeklyHours: React.FC = () => (
          return (
            <motion.rect
              key={h}
-              x={52 + d * 72}
-              y={64 + h * 22}
-              width={52}
-              height={16}
-              rx={4}
+              x={56 + d * 72}
+              y={66 + h * 21}
+              width={44}
+              height={10}
+              rx={5}
+              strokeWidth={1}
              initial={{ fill: PAPER, stroke: LINE }}
              animate={{
-                fill: reserved ? INK : PAPER,
-                stroke: reserved ? INK : LINE,
+                fill: reserved ? "#e2e8f0" : PAPER,
+                stroke: reserved ? "#e2e8f0" : LINE,
              }}
              transition={{
                duration: 0.25,
@@ -242,14 +271,14 @@ const WorkList: React.FC = () => (
            rx={4}
            fill={done ? INK : PAPER}
            stroke={INK}
-            strokeWidth={1.5}
+            strokeWidth={FINE}
          />
          {done && (
            <motion.path
              d={`M ${76} ${y + 16} l 3.5 3.5 l 6 -7`}
              fill="none"
              stroke={PAPER}
-              strokeWidth={2}
+              strokeWidth={1.5}
              strokeLinecap="round"
              strokeLinejoin="round"
              {...draw(0.3 + row * 0.45)}
@@ -261,7 +290,7 @@ const WorkList: React.FC = () => (
            y1={y + 16}
            y2={y + 16}
            stroke={done ? INK : LINE}
-            strokeWidth={2}
+            strokeWidth={1.5}
            strokeLinecap="round"
          />
          {done && (
@@ -269,7 +298,7 @@ const WorkList: React.FC = () => (
              <path
                d={`M 322 ${y + 16} h 46`}
                stroke={INK}
-                strokeWidth={1.5}
+                strokeWidth={FINE}
                markerEnd="url(#arrow)"
              />
              <Packet
@@ -319,7 +348,7 @@ const WorkList: React.FC = () => (
 /** Developer, step 4: two weeks notice to the end of a month. */
 const Notice: React.FC = () => (
  <g>
-    <line x1={50} x2={430} y1={150} y2={150} stroke={LINE} strokeWidth={2} />
+    <line x1={50} x2={430} y1={150} y2={150} stroke={LINE} strokeWidth={1.5} />
    {Array.from({ length: 5 }, (_, w) => (
      <g key={w}>
        <line
@@ -328,7 +357,7 @@ const Notice: React.FC = () => (
          y1={140}
          y2={160}
          stroke={INK}
-          strokeWidth={1.5}
+          strokeWidth={FINE}
        />
        <text x={50 + w * 95} y={182} textAnchor="middle" style={MONO}>
          {w === 4 ? "end of month" : `week ${w + 1}`}
@@ -337,9 +366,9 @@ const Notice: React.FC = () => (
    ))}
    <motion.rect
      x={240}
-      y={132}
-      height={36}
-      rx={6}
+      y={139}
+      height={22}
+      rx={5}
      fill={MARK}
      initial={{ width: 0, opacity: 0.35 }}
      animate={{ width: 190 }}
@@ -350,13 +379,13 @@ const Notice: React.FC = () => (
        d="M 240 118 v -14 h 190 v 14"
        fill="none"
        stroke={INK}
-        strokeWidth={1.5}
+        strokeWidth={FINE}
      />
      <text x={335} y={92} textAnchor="middle" style={{ ...MONO, fill: INK }}>
        two weeks notice
      </text>
    </motion.g>
-    <motion.circle cx={430} cy={150} r={7} fill={INK} {...appear(1.4, 0)} />
+    <motion.circle cx={430} cy={150} r={4.5} fill={INK} {...appear(1.4, 0)} />
  </g>
 );

@@ -398,7 +427,7 @@ const RepairWeek: React.FC = () => (
            x2={to[0]}
            y2={to[1]}
            stroke="#f59e0b"
-            strokeWidth={1.5}
+            strokeWidth={FINE}
            strokeDasharray="3 5"
          />
          <motion.line
@@ -407,7 +436,7 @@ const RepairWeek: React.FC = () => (
            x2={to[0]}
            y2={to[1]}
            stroke={INK}
-            strokeWidth={2}
+            strokeWidth={1.5}
            {...draw(0.4 + i * 0.22)}
          />
        </g>
@@ -418,9 +447,9 @@ const RepairWeek: React.FC = () => (
        key={i}
        cx={x}
        cy={y}
-        r={7}
+        r={5}
        stroke={INK}
-        strokeWidth={1.5}
+        strokeWidth={FINE}
        initial={{ fill: PAPER }}
        animate={{ fill: LIVE }}
        transition={{ duration: 0.4, delay: 1 + i * 0.28 }}
@@ -449,7 +478,7 @@ const Summary: React.FC = () => (
      rx={10}
      fill={PAPER}
      stroke={INK}
-      strokeWidth={1.5}
+      strokeWidth={FINE}
    />
    {["found", "changed", "next"].map((label, s) => (
      <g key={label}>
@@ -469,7 +498,7 @@ const Summary: React.FC = () => (
            y1={84 + s * 62 + l * 11}
            y2={84 + s * 62 + l * 11}
            stroke={LINE}
-            strokeWidth={3}
+            strokeWidth={2}
            strokeLinecap="round"
            {...draw(0.35 + s * 0.6 + l * 0.12)}
          />
@@ -491,14 +520,21 @@ const Summary: React.FC = () => (
 /** Rescue, step 4: the client decides how to continue. */
 const Decide: React.FC = () => (
  <g>
-    <circle cx={90} cy={150} r={26} fill={INK} />
+    <circle
+      cx={90}
+      cy={150}
+      r={26}
+      fill={TINT}
+      stroke={INK}
+      strokeWidth={FINE}
+    />
    <text
      x={90}
      y={154}
      textAnchor="middle"
      style={{
        ...MONO,
-        fill: PAPER,
+        fill: INK,
        fontSize: "calc(var(--scene-label, 10px) - 1px)",
      }}
    >
@@ -514,7 +550,7 @@ const Decide: React.FC = () => (
          d={`M 116 150 C 190 150 180 ${option.y} 250 ${option.y}`}
          fill="none"
          stroke={INK}
-          strokeWidth={1.5}
+          strokeWidth={FINE}
          {...draw(0.3 + i * 0.4)}
        />
        <Packet
@@ -561,9 +597,9 @@ const Browser: React.FC<{
      rx={12}
      fill={PAPER}
      stroke={INK}
-      strokeWidth={1.5}
+      strokeWidth={FINE}
    />
-    <line x1={70} x2={410} y1={58} y2={58} stroke={INK} strokeWidth={1.5} />
+    <line x1={70} x2={410} y1={58} y2={58} stroke={INK} strokeWidth={FINE} />
    {[0, 1, 2].map((d) => (
      <circle key={d} cx={88 + d * 12} cy={44} r={3} fill={LINE} />
    ))}
@@ -617,6 +653,56 @@ const BLOCKS: readonly { x: number; y: number; w: number; h: number }[] = [
  { x: 298, y: 174, w: 94, h: 62 },
 ];

+/** What a finished page holds: a headline, a button, and a line of text per card. */
+const PageDetail: React.FC<{ delay: number }> = ({ delay }) => (
+  <motion.g {...appear(delay, 0)}>
+    <line
+      x1={102}
+      x2={206}
+      y1={118}
+      y2={118}
+      stroke={INK}
+      strokeWidth={3}
+      strokeLinecap="round"
+    />
+    <line
+      x1={102}
+      x2={176}
+      y1={129}
+      y2={129}
+      stroke={INK}
+      strokeWidth={3}
+      strokeLinecap="round"
+    />
+    <rect x={102} y={140} width={40} height={11} rx={5.5} fill={INK} />
+    {[BLOCKS[2], BLOCKS[3], BLOCKS[4], BLOCKS[5]].map(
+      (block) =>
+        block && (
+          <g key={`${block.x}-${block.y}`}>
+            <line
+              x1={block.x + 10}
+              x2={block.x + block.w - 24}
+              y1={block.y + block.h - 20}
+              y2={block.y + block.h - 20}
+              stroke={RIM}
+              strokeWidth={2}
+              strokeLinecap="round"
+            />
+            <line
+              x1={block.x + 10}
+              x2={block.x + block.w - 44}
+              y1={block.y + block.h - 12}
+              y2={block.y + block.h - 12}
+              stroke={LINE}
+              strokeWidth={2}
+              strokeLinecap="round"
+            />
+          </g>
+        ),
+    )}
+  </motion.g>
+);
+
 /** Website, step 2: a first design as outlines. */
 const Wireframe: React.FC = () => (
  <g>
@@ -662,10 +748,14 @@ const Built: React.FC = () => (
          height={b.h}
          rx={5}
          initial={{ fill: PAPER, stroke: LINE }}
-          animate={{ fill: i === 1 ? INK : SOFT, stroke: i === 1 ? INK : LINE }}
+          animate={{
+            fill: i === 1 ? TINT : SOFT,
+            stroke: i === 1 ? INK : LINE,
+          }}
          transition={{ duration: 0.35, delay: 0.2 + i * 0.18 }}
        />
      ))}
+      <PageDetail delay={1.3} />
    </Browser>
    <motion.text
      x={240}
@@ -691,10 +781,11 @@ const ChangeByEmail: React.FC = () => (
          width={b.w}
          height={b.h}
          rx={5}
-          fill={i === 1 ? INK : SOFT}
+          fill={i === 1 ? TINT : SOFT}
          stroke={i === 1 ? INK : LINE}
        />
      ))}
+      <PageDetail delay={0} />
      <motion.rect
        x={BLOCKS[4]!.x}
        y={BLOCKS[4]!.y}
@@ -702,8 +793,6 @@ const ChangeByEmail: React.FC = () => (
        height={BLOCKS[4]!.h}
        rx={5}
        fill={MARK}
-        stroke={INK}
-        strokeWidth={1.5}
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 0.4, delay: 1.3 }}
@@ -718,20 +807,20 @@ const ChangeByEmail: React.FC = () => (
        rx={5}
        fill={PAPER}
        stroke={INK}
-        strokeWidth={1.5}
+        strokeWidth={FINE}
      />
      <path
        d="M 16 190 l 23 16 l 23 -16"
        fill="none"
        stroke={INK}
-        strokeWidth={1.5}
+        strokeWidth={FINE}
      />
    </motion.g>
    <motion.path
      d="M 66 202 C 120 202 150 205 188 205"
      fill="none"
      stroke={INK}
-      strokeWidth={1.5}
+      strokeWidth={FINE}
      markerEnd="url(#arrow)"
      {...draw(0.6)}
    />
@@ -766,9 +855,9 @@ const Tool: React.FC<{ x: number; y: number; label: string }> = ({
      width={112}
      height={44}
      rx={10}
-      fill={PAPER}
-      stroke={INK}
-      strokeWidth={1.5}
+      fill={SOFT}
+      stroke={RIM}
+      strokeWidth={FINE}
    />
    <text x={x} y={y + 4} textAnchor="middle" style={{ ...MONO, fill: INK }}>
      {label}
@@ -788,7 +877,7 @@ const ByHand: React.FC = () => (
        d={`M ${tool.x + (tool.x < 240 ? 56 : -56)} ${tool.y} L ${tool.x < 240 ? 214 : 266} ${140 + (tool.y < 140 ? -12 : 12)}`}
        fill="none"
        stroke="#f59e0b"
-        strokeWidth={1.5}
+        strokeWidth={FINE}
        strokeDasharray="3 5"
        {...draw(0.3 + i * 0.25)}
      />
@@ -800,13 +889,13 @@ const ByHand: React.FC = () => (
        r={13}
        fill={PAPER}
        stroke={INK}
-        strokeWidth={1.5}
+        strokeWidth={FINE}
      />
      <path
        d="M 218 172 Q 218 146 240 146 Q 262 146 262 172"
        fill={PAPER}
        stroke={INK}
-        strokeWidth={1.5}
+        strokeWidth={FINE}
      />
    </motion.g>
    <motion.text
@@ -837,7 +926,7 @@ const Wiring: React.FC = () => (
        d={d}
        fill="none"
        stroke={INK}
-        strokeWidth={2}
+        strokeWidth={1.5}
        {...draw(0.3 + i * 0.4)}
      />
    ))}
@@ -860,7 +949,7 @@ const Wiring: React.FC = () => (
 const Running: React.FC = () => (
  <g>
    {WIRES.map((d) => (
-      <path key={d} d={d} fill="none" stroke={INK} strokeWidth={2} />
+      <path key={d} d={d} fill="none" stroke={INK} strokeWidth={1.5} />
    ))}
    {[
      { from: [146, 80], to: [334, 80], delay: 0 },
@@ -870,10 +959,11 @@ const Running: React.FC = () => (
    ].map((dot) => (
      <motion.circle
        key={dot.delay}
-        r={6}
+        r={3.5}
        fill={MARK}
-        stroke={INK}
-        strokeWidth={1.5}
+        stroke={MARK}
+        strokeOpacity={0.28}
+        strokeWidth={6}
        initial={{ cx: dot.from[0], cy: dot.from[1], opacity: 0 }}
        animate={{
          cx: [dot.from[0]!, dot.to[0]!],
@@ -932,8 +1022,8 @@ export const PathScene: React.FC<{
          viewBox="0 0 10 10"
          refX="8"
          refY="5"
-          markerWidth="7"
-          markerHeight="7"
+          markerWidth="5"
+          markerHeight="5"
          orient="auto-start-reverse"
        >
          <path d="M 0 0 L 10 5 L 0 10 z" fill={INK} />
@@ -1,5 +1,6 @@
 "use client";

+import { BitAura } from "@/src/components/bits/BitAura";
 import * as React from "react";

 /**
@@ -285,125 +286,127 @@ export const PipelineRun: React.FC = () => {
      </div>

      <div className="md:col-span-8">
-        <div className="overflow-hidden rounded-3xl bg-slate-900 font-mono text-[12px] leading-relaxed text-slate-300 md:text-[13px]">
-          {/* Run header */}
-          <div className="flex flex-wrap items-center justify-between gap-3 border-b border-slate-800 px-5 py-4 md:px-7">
-            <div className="flex items-center gap-3">
-              <span className="flex gap-1.5" aria-hidden="true">
-                <span className="h-2.5 w-2.5 rounded-full bg-slate-700" />
-                <span className="h-2.5 w-2.5 rounded-full bg-slate-700" />
-                <span className="h-2.5 w-2.5 rounded-full bg-slate-700" />
-              </span>
-              <span className="text-slate-400">
-                {scenario.branch}
-                <span className="text-slate-600"> → </span>main
+        <BitAura source="right" tone="light">
+          <div className="overflow-hidden rounded-3xl bg-slate-900 font-mono text-[12px] leading-relaxed text-slate-300 md:text-[13px]">
+            {/* Run header */}
+            <div className="flex flex-wrap items-center justify-between gap-3 border-b border-slate-800 px-5 py-4 md:px-7">
+              <div className="flex items-center gap-3">
+                <span className="flex gap-1.5" aria-hidden="true">
+                  <span className="h-2.5 w-2.5 rounded-full bg-slate-700" />
+                  <span className="h-2.5 w-2.5 rounded-full bg-slate-700" />
+                  <span className="h-2.5 w-2.5 rounded-full bg-slate-700" />
+                </span>
+                <span className="text-slate-400">
+                  {scenario.branch}
+                  <span className="text-slate-600"> → </span>main
+                </span>
+              </div>
+              <span className="text-slate-500">
+                run #{frame.attempt === 1 ? 481 : 482}
+                {frame.attempt === 2 && (
+                  <span className="text-slate-400"> · fix pushed</span>
+                )}
              </span>
            </div>
-            <span className="text-slate-500">
-              run #{frame.attempt === 1 ? 481 : 482}
-              {frame.attempt === 2 && (
-                <span className="text-slate-400"> · fix pushed</span>
-              )}
-            </span>
-          </div>

-          {/* Stages */}
-          <div className="grid grid-cols-2 gap-2 border-b border-slate-800 px-5 py-4 sm:grid-cols-4 md:px-7">
-            {STAGES.map((stage, index) => {
-              const state = stageState(index);
-              return (
-                <div
-                  key={stage}
-                  className={`flex items-center justify-between rounded-xl border px-3 py-2.5 transition-colors duration-200 ${STAGE_STYLE[state]}`}
-                >
-                  <span>{stage}</span>
-                  <span aria-hidden="true">{STAGE_MARK[state]}</span>
-                </div>
-              );
-            })}
-          </div>
-
-          {/* Test output */}
-          <div className="min-h-[21rem] px-5 py-5 md:px-7 md:py-6">
-            {frame.stagesDone < 2 && (
-              <p className="m-0 text-[12px] leading-relaxed text-slate-500 md:text-[13px]">
-                {frame.stagesDone === 0
-                  ? "$ lint: checking the code style…"
-                  : "$ types: checking that the parts fit together…"}
-              </p>
-            )}
-            {SUITES.slice(0, frame.suitesDone).map((suite, index) => {
-              const failed = firstAttempt && index === failingIndex;
-              return (
-                <div key={suite.file}>
-                  <div className="flex items-baseline gap-3">
-                    <span
-                      className={`w-10 shrink-0 font-bold ${failed ? "text-rose-400" : "text-emerald-400"}`}
-                    >
-                      {failed ? "FAIL" : "PASS"}
-                    </span>
-                    <span className="min-w-0 flex-1 truncate text-slate-200">
-                      {suite.file}
-                    </span>
-                    <span className="hidden text-slate-500 sm:inline">
-                      {suite.tests} tests
-                    </span>
-                    <span className="w-14 shrink-0 text-right text-slate-600">
-                      {suite.ms} ms
-                    </span>
+            {/* Stages */}
+            <div className="grid grid-cols-2 gap-2 border-b border-slate-800 px-5 py-4 sm:grid-cols-4 md:px-7">
+              {STAGES.map((stage, index) => {
+                const state = stageState(index);
+                return (
+                  <div
+                    key={stage}
+                    className={`flex items-center justify-between rounded-xl border px-3 py-2.5 transition-colors duration-200 ${STAGE_STYLE[state]}`}
+                  >
+                    <span>{stage}</span>
+                    <span aria-hidden="true">{STAGE_MARK[state]}</span>
                  </div>
-                  {failed && (
-                    <div className="my-2 ml-[3.25rem] border-l border-rose-500/50 pl-4">
-                      <p className="m-0 text-[12px] leading-relaxed text-slate-200 md:text-[13px]">
-                        ● {scenario.testName}
-                      </p>
-                      <p className="m-0 text-[12px] leading-relaxed text-emerald-400 md:text-[13px]">
-                        expected&nbsp; {scenario.expected}
-                      </p>
-                      <p className="m-0 text-[12px] leading-relaxed text-rose-400 md:text-[13px]">
-                        received&nbsp; {scenario.received}
-                      </p>
-                    </div>
-                  )}
-                </div>
-              );
-            })}
-            {frame.stagesDone === 2 && frame.suitesDone < SUITES.length && (
-              <p className="m-0 text-[12px] leading-relaxed text-slate-500 md:text-[13px]">
-                running {SUITES[frame.suitesDone]?.file}…
-              </p>
-            )}
-          </div>
+                );
+              })}
+            </div>

-          {/* Summary */}
-          <div className="flex flex-wrap items-center justify-between gap-3 border-t border-slate-800 px-5 py-4 md:px-7">
-            <span>
-              <span className="text-slate-500">Tests </span>
-              {failedCount > 0 && (
-                <span className="text-rose-400">{failedCount} failed, </span>
+            {/* Test output */}
+            <div className="min-h-[21rem] px-5 py-5 md:px-7 md:py-6">
+              {frame.stagesDone < 2 && (
+                <p className="m-0 text-[12px] leading-relaxed text-slate-500 md:text-[13px]">
+                  {frame.stagesDone === 0
+                    ? "$ lint: checking the code style…"
+                    : "$ types: checking that the parts fit together…"}
+                </p>
              )}
-              <span className="text-emerald-400">
-                {reportedTests - failedCount} passed
+              {SUITES.slice(0, frame.suitesDone).map((suite, index) => {
+                const failed = firstAttempt && index === failingIndex;
+                return (
+                  <div key={suite.file}>
+                    <div className="flex items-baseline gap-3">
+                      <span
+                        className={`w-10 shrink-0 font-bold ${failed ? "text-rose-400" : "text-emerald-400"}`}
+                      >
+                        {failed ? "FAIL" : "PASS"}
+                      </span>
+                      <span className="min-w-0 flex-1 truncate text-slate-200">
+                        {suite.file}
+                      </span>
+                      <span className="hidden text-slate-500 sm:inline">
+                        {suite.tests} tests
+                      </span>
+                      <span className="w-14 shrink-0 text-right text-slate-600">
+                        {suite.ms} ms
+                      </span>
+                    </div>
+                    {failed && (
+                      <div className="my-2 ml-[3.25rem] border-l border-rose-500/50 pl-4">
+                        <p className="m-0 text-[12px] leading-relaxed text-slate-200 md:text-[13px]">
+                          ● {scenario.testName}
+                        </p>
+                        <p className="m-0 text-[12px] leading-relaxed text-emerald-400 md:text-[13px]">
+                          expected&nbsp; {scenario.expected}
+                        </p>
+                        <p className="m-0 text-[12px] leading-relaxed text-rose-400 md:text-[13px]">
+                          received&nbsp; {scenario.received}
+                        </p>
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+              {frame.stagesDone === 2 && frame.suitesDone < SUITES.length && (
+                <p className="m-0 text-[12px] leading-relaxed text-slate-500 md:text-[13px]">
+                  running {SUITES[frame.suitesDone]?.file}…
+                </p>
+              )}
+            </div>
+
+            {/* Summary */}
+            <div className="flex flex-wrap items-center justify-between gap-3 border-t border-slate-800 px-5 py-4 md:px-7">
+              <span>
+                <span className="text-slate-500">Tests </span>
+                {failedCount > 0 && (
+                  <span className="text-rose-400">{failedCount} failed, </span>
+                )}
+                <span className="text-emerald-400">
+                  {reportedTests - failedCount} passed
+                </span>
+                <span className="text-slate-500"> of {TOTAL_TESTS}</span>
              </span>
-              <span className="text-slate-500"> of {TOTAL_TESTS}</span>
-            </span>
-            <span
-              className={`rounded-full px-3 py-1 font-bold uppercase tracking-[0.15em] ${
-                !finished
-                  ? "bg-slate-800 text-slate-400"
+              <span
+                className={`rounded-full px-3 py-1 font-bold uppercase tracking-[0.15em] ${
+                  !finished
+                    ? "bg-slate-800 text-slate-400"
+                    : firstAttempt
+                      ? "bg-rose-500/15 text-rose-400"
+                      : "bg-emerald-500/15 text-emerald-400"
+                }`}
+              >
+                {!finished
+                  ? "release pending"
                  : firstAttempt
-                    ? "bg-rose-500/15 text-rose-400"
-                    : "bg-emerald-500/15 text-emerald-400"
-              }`}
-            >
-              {!finished
-                ? "release pending"
-                : firstAttempt
-                  ? "release blocked"
-                  : "released"}
-            </span>
+                    ? "release blocked"
+                    : "released"}
+              </span>
+            </div>
          </div>
-        </div>
+        </BitAura>
        <p className="m-0 mt-4 font-sans text-sm leading-relaxed text-slate-400">
          An illustration with made-up file names and numbers, modelled on a
          real test run. Tests do not catch every mistake, but they do catch
@@ -3,6 +3,7 @@
 import * as React from "react";
 import Image from "next/image";
 import { motion, useMotionValue, useSpring } from "framer-motion";
+import { BitAura } from "@/src/components/bits/BitAura";

 export type WorkItem = {
  readonly name: string;
@@ -107,7 +108,7 @@ const WorkStage: React.FC<{ item: WorkItem }> = ({ item }) => {
      ref={ref}
      onPointerMove={onPointerMove}
      onPointerLeave={onPointerLeave}
-      className="relative overflow-hidden rounded-3xl bg-slate-900 px-5 pb-0 pt-8 [perspective:1400px] md:px-12 md:pt-14"
+      className="relative overflow-hidden rounded-3xl border border-slate-700 bg-slate-950 px-5 pb-0 pt-8 [perspective:1400px] md:px-12 md:pt-14"
    >
      <div
        className="pointer-events-none absolute inset-0 opacity-60"
@@ -179,7 +180,7 @@ const WorkStage: React.FC<{ item: WorkItem }> = ({ item }) => {
 };

 /**
- * WorkShowcase: each live site on a dark stage, as a desktop and a phone view
+ * WorkShowcase: for a dark section. Each live site on a lit stage, as a desktop and a phone view
 * that scroll through the real pages.
 */
 export const WorkShowcase: React.FC<{ items: readonly WorkItem[] }> = ({
@@ -192,17 +193,23 @@ export const WorkShowcase: React.FC<{ items: readonly WorkItem[] }> = ({
        className="grid grid-cols-1 gap-10 md:grid-cols-12 md:items-center md:gap-12"
      >
        <div className={`md:col-span-8 ${index % 2 === 1 ? "md:order-2" : ""}`}>
-          <WorkStage item={item} />
+          <BitAura
+            source={index % 2 === 0 ? "bottom" : "top"}
+            tone="dark"
+            motion={index % 2 === 0 ? "sparks" : "rain"}
+          >
+            <WorkStage item={item} />
+          </BitAura>
        </div>

        <div className="md:col-span-4">
-          <p className={`${MONO} m-0 text-slate-500`}>
+          <p className={`${MONO} m-0 text-slate-400`}>
            0{index + 1} · {item.client}
          </p>
-          <h3 className="m-0 mt-4 font-sans text-3xl font-bold tracking-tighter text-slate-900 md:text-5xl">
+          <h3 className="m-0 mt-4 font-sans text-3xl font-bold tracking-tighter text-white md:text-5xl">
            {item.name}
          </h3>
-          <p className="m-0 mt-5 font-sans text-lg leading-relaxed text-slate-500 md:text-xl">
+          <p className="m-0 mt-5 font-sans text-lg leading-relaxed text-slate-300 md:text-xl">
            {item.text}
          </p>

@@ -210,7 +217,7 @@ export const WorkShowcase: React.FC<{ items: readonly WorkItem[] }> = ({
            {item.did.map((line) => (
              <li
                key={line}
-                className="border-t border-slate-200 py-3 font-sans text-base text-slate-900 md:text-lg"
+                className="border-t border-slate-800 py-3 font-sans text-base text-slate-100 md:text-lg"
              >
                {line}
              </li>
@@ -221,7 +228,7 @@ export const WorkShowcase: React.FC<{ items: readonly WorkItem[] }> = ({
            {item.tech.map((tech) => (
              <li
                key={tech}
-                className="rounded-full border border-slate-200 px-3 py-1.5 font-mono text-[10px] uppercase tracking-[0.12em] text-slate-600"
+                className="rounded-full border border-slate-700 px-3 py-1.5 font-mono text-[10px] uppercase tracking-[0.12em] text-slate-300"
              >
                {tech}
              </li>
@@ -232,7 +239,7 @@ export const WorkShowcase: React.FC<{ items: readonly WorkItem[] }> = ({
            href={item.href}
            target="_blank"
            rel="noopener noreferrer"
-            className="mt-8 inline-flex items-center gap-3 rounded-full bg-slate-900 px-6 py-3 font-sans text-[11px] font-bold uppercase tracking-[0.15em] text-white no-underline transition-transform duration-300 hover:-translate-y-0.5"
+            className="bit-cta bit-cta-light mt-8 inline-flex items-center gap-3 rounded-full bg-white px-6 py-3 font-sans text-[11px] font-bold uppercase tracking-[0.15em] text-slate-900 no-underline transition-transform duration-300 hover:-translate-y-0.5"
          >
            Open the live site <span aria-hidden="true">↗</span>
          </a>
@@ -2,6 +2,8 @@ import typography from "@tailwindcss/typography";

 /** @type {import('tailwindcss').Config} */
 export default {
+  // Hover styles only where a pointer can hover, so they do not stick after a tap.
+  future: { hoverOnlyWhenSupported: true },
  content: ["./app/**/*.{js,ts,jsx,tsx,mdx}", "./src/**/*.{js,ts,jsx,tsx,mdx}"],
  theme: {
    extend: {