From dc4a01cbe4efece03a187b331645a6389363f7db Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Sun, 4 Oct 2026 00:14:22 +0200
Subject: [PATCH] feat: binary micro-interactions across the page

Section headlines are written out behind a column of digits, mono labels
resolve from binary, the portrait assembles itself from bits, section indexes
rattle and keep one bit alive, cards get corner marks, the header shows the
scroll position as an eight-bit number, pressed links and buttons shed a few
digits, and the work stage leans towards the pointer. All effects respect
reduced motion and leave the content readable without JavaScript.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 CLAUDE.md                                     | 10 +++
 apps/web/app/(site)/globals.css               | 84 +++++++++++++++++
 apps/web/app/(site)/layout.tsx                |  2 +
 apps/web/app/(site)/page.tsx                  |  3 +-
 apps/web/src/components/Footer.tsx            | 10 +--
 apps/web/src/components/Header.tsx            |  6 +-
 apps/web/src/components/bits/BinaryTicker.tsx | 63 +++++++++++++
 apps/web/src/components/bits/BitBurst.tsx     | 44 +++++++++
 apps/web/src/components/bits/BitReveal.tsx    | 89 +++++++++++++++++++
 apps/web/src/components/bits/BitWipe.tsx      | 66 ++++++++++++++
 apps/web/src/components/bits/DecodeText.tsx   | 63 +++++++++++++
 apps/web/src/components/bits/ScrollBits.tsx   | 29 ++++++
 apps/web/src/components/bits/useInViewOnce.ts | 31 +++++++
 apps/web/src/components/home/Block.tsx        | 23 ++---
 apps/web/src/components/home/PathPicker.tsx   | 11 ++-
 .../src/components/home/PortraitSection.tsx   | 24 +++--
 .../components/illustrations/WorkShowcase.tsx | 31 ++++++-
 17 files changed, 556 insertions(+), 33 deletions(-)
 create mode 100644 apps/web/src/components/bits/BinaryTicker.tsx
 create mode 100644 apps/web/src/components/bits/BitBurst.tsx
 create mode 100644 apps/web/src/components/bits/BitReveal.tsx
 create mode 100644 apps/web/src/components/bits/BitWipe.tsx
 create mode 100644 apps/web/src/components/bits/DecodeText.tsx
 create mode 100644 apps/web/src/components/bits/ScrollBits.tsx
 create mode 100644 apps/web/src/components/bits/useInViewOnce.ts

diff --git a/CLAUDE.md b/CLAUDE.md
index a531183..3852442 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -36,6 +36,16 @@ App lives in `apps/web`. Concept and scope: `apps/web/plans/freelance-relaunch.m
 - The hero design (binary-digit headline) is approved: do not change its design.
 - Look at the result before reporting: take screenshots (desktop and mobile), do not ship blind.
 
+## Motion (binary micro-interactions)
+
+- Building blocks live in `apps/web/src/components/bits/`: `DecodeText` (mono labels resolving from digits),
+  `BitWipe` (headline revealed behind a column of digits), `BitReveal` (picture assembling from bits),
+  `BinaryTicker`, `ScrollBits`, `BitBurst`. Reuse them instead of inventing new effects.
+- `DecodeText` is for monospaced text only; in proportional type the changing glyph widths make text jump.
+- Never put an in-view trigger on an element that clips itself away (clip-path): a fully clipped element
+  never counts as visible. Observe an unclipped wrapper (see `BitWipe`).
+- Every effect must respect `prefers-reduced-motion` and leave content readable without JavaScript.
+
 ## Architecture rules
 
 - Functional core, imperative shell. Pure logic goes in `apps/web/src/domain/` (no I/O, no clock, no
diff --git a/apps/web/app/(site)/globals.css b/apps/web/app/(site)/globals.css
index 670000e..7bb419f 100644
--- a/apps/web/app/(site)/globals.css
+++ b/apps/web/app/(site)/globals.css
@@ -1004,3 +1004,87 @@ pre:has(code[class*="language-"]) {
     opacity: 0.4;
   }
 }
+
+/* ── Binary micro-interactions ─────────────────────────────────────────────── */
+
+/* Digits that fly out from a pressed link or button (see BitBurst). */
+.bit-burst {
+  position: fixed;
+  z-index: 200;
+  pointer-events: none;
+  /* On the layer, not the digits: a fixed layer blends as a whole with the page. */
+  mix-blend-mode: difference;
+}
+.bit-burst span {
+  position: absolute;
+  left: 0;
+  top: 0;
+  font-family: var(--font-jetbrains-mono), ui-monospace, monospace;
+  font-size: 13px;
+  font-weight: 700;
+  color: #ffffff;
+  opacity: 0;
+  animation: bit-burst-fly 620ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+@keyframes bit-burst-fly {
+  0% {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy)))
+      scale(0.6);
+  }
+}
+
+/* Corner marks that snap onto a card on hover or focus. */
+.bit-card {
+  position: relative;
+}
+.bit-card::before,
+.bit-card::after {
+  content: "";
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  border: 1.5px solid currentColor;
+  opacity: 0;
+  transition:
+    opacity 250ms ease,
+    transform 350ms cubic-bezier(0.16, 1, 0.3, 1);
+  pointer-events: none;
+}
+.bit-card::before {
+  top: 12px;
+  right: 12px;
+  border-left: 0;
+  border-bottom: 0;
+  transform: translate(-6px, 6px);
+}
+.bit-card::after {
+  bottom: 12px;
+  left: 12px;
+  border-right: 0;
+  border-top: 0;
+  transform: translate(6px, -6px);
+}
+.bit-card:hover::before,
+.bit-card:hover::after,
+.bit-card:focus-visible::before,
+.bit-card:focus-visible::after,
+.bit-card[aria-selected="true"]::before,
+.bit-card[aria-selected="true"]::after {
+  opacity: 0.55;
+  transform: translate(0, 0);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bit-burst {
+    display: none;
+  }
+  .bit-card::before,
+  .bit-card::after {
+    transition: none;
+  }
+}
diff --git a/apps/web/app/(site)/layout.tsx b/apps/web/app/(site)/layout.tsx
index 8a71f3c..3ff5e85 100644
--- a/apps/web/app/(site)/layout.tsx
+++ b/apps/web/app/(site)/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } 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 { Footer } from "@/src/components/Footer";
 import { Header } from "@/src/components/Header";
 import { InteractiveElements } from "@/src/components/InteractiveElements";
@@ -70,6 +71,7 @@ export default function RootLayout({
         <main>{children}</main>
         <Footer />
         <InteractiveElements />
+        <BitBurst />
         <Analytics />
       </body>
     </html>
diff --git a/apps/web/app/(site)/page.tsx b/apps/web/app/(site)/page.tsx
index 22c00f7..dc61634 100644
--- a/apps/web/app/(site)/page.tsx
+++ b/apps/web/app/(site)/page.tsx
@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import { DecodeText } from "@/src/components/bits/DecodeText";
 import { Block } from "@/src/components/home/Block";
 import { ClosingCta } from "@/src/components/home/ClosingCta";
 import { Faq } from "@/src/components/home/Faq";
@@ -218,7 +219,7 @@ export default function LandingPage() {
                         key={item}
                         className="rounded-full border border-slate-200 bg-white px-4 py-2 font-mono text-[11px] uppercase tracking-[0.12em] text-slate-700"
                       >
-                        {item}
+                        <DecodeText text={item} trigger="both" />
                       </li>
                     ))}
                   </ul>
diff --git a/apps/web/src/components/Footer.tsx b/apps/web/src/components/Footer.tsx
index 8be63f4..5dbba68 100644
--- a/apps/web/src/components/Footer.tsx
+++ b/apps/web/src/components/Footer.tsx
@@ -3,6 +3,7 @@ import Link from "next/link";
 import * as React from "react";
 
 import LogoBlack from "../assets/logo/Logo-Black-Transparent.svg";
+import { BinaryTicker } from "./bits/BinaryTicker";
 
 export const Footer: React.FC = () => {
   const currentYear = new Date().getFullYear();
@@ -56,11 +57,10 @@ export const Footer: React.FC = () => {
               </Link>
             </div>
             {/* Subtle binary decoration */}
-            <span
-              className="text-[8px] text-slate-200 tracking-[0.5em] select-none font-mono"
-              aria-hidden="true"
-            >
-              01001101 01001001 01001110
+            <span className="flex gap-3 text-[8px] text-slate-300 tracking-[0.5em] select-none font-mono">
+              {[77, 73, 78].map((code) => (
+                <BinaryTicker key={code} value={code} alive />
+              ))}
             </span>
           </div>
         </div>
diff --git a/apps/web/src/components/Header.tsx b/apps/web/src/components/Header.tsx
index 750ab1b..c27e21f 100644
--- a/apps/web/src/components/Header.tsx
+++ b/apps/web/src/components/Header.tsx
@@ -4,6 +4,8 @@ import Link from "next/link";
 import * as React from "react";
 
 import IconWhite from "../assets/logo/Icon-White-Transparent.svg";
+import { DecodeText } from "./bits/DecodeText";
+import { ScrollBits } from "./bits/ScrollBits";
 
 /** Header: the logo and one action. Everything else lives on the homepage. */
 export const Header: React.FC = () => {
@@ -52,6 +54,8 @@ export const Header: React.FC = () => {
           </div>
         </Link>
 
+        <ScrollBits className="hidden font-mono text-[10px] tracking-[0.3em] text-slate-400 md:block" />
+
         <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"
@@ -59,7 +63,7 @@ export const Header: React.FC = () => {
             transitionTimingFunction: "cubic-bezier(0.23, 1, 0.32, 1)",
           }}
         >
-          Get in touch
+          <DecodeText text="Get in touch" trigger="hover" />
         </Link>
       </div>
     </header>
diff --git a/apps/web/src/components/bits/BinaryTicker.tsx b/apps/web/src/components/bits/BinaryTicker.tsx
new file mode 100644
index 0000000..d43b6f1
--- /dev/null
+++ b/apps/web/src/components/bits/BinaryTicker.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import * as React from "react";
+import { useInViewOnce } from "./useInViewOnce";
+
+const toBits = (value: number, width: number): string =>
+  value.toString(2).padStart(width, "0").slice(-width);
+
+/**
+ * BinaryTicker: a number shown in binary. The bits rattle when it scrolls into
+ * view and then settle on the value; with `alive` a single bit keeps flipping.
+ */
+export const BinaryTicker: React.FC<{
+  value: number;
+  width?: number;
+  className?: string;
+  alive?: boolean;
+}> = ({ value, width = 8, className = "", alive = false }) => {
+  const settled = toBits(value, width);
+  const { ref, seen, still } = useInViewOnce<HTMLSpanElement>(0.6);
+  const [shown, setShown] = React.useState(settled);
+
+  React.useEffect(() => {
+    if (!seen || still) return;
+    let tick = 0;
+    const timer = window.setInterval(() => {
+      tick += 1;
+      if (tick > 14) {
+        window.clearInterval(timer);
+        setShown(settled);
+        return;
+      }
+      setShown(
+        Array.from(settled)
+          .map((bit, i) =>
+            i < tick - 6 ? bit : Math.random() < 0.5 ? "0" : "1",
+          )
+          .join(""),
+      );
+    }, 45);
+    return () => window.clearInterval(timer);
+  }, [seen, still, settled]);
+
+  React.useEffect(() => {
+    if (!alive || !seen || still) return;
+    const timer = window.setInterval(() => {
+      const index = Math.floor(Math.random() * width);
+      setShown((current) =>
+        Array.from(current)
+          .map((bit, i) => (i === index ? (bit === "0" ? "1" : "0") : bit))
+          .join(""),
+      );
+      window.setTimeout(() => setShown(settled), 260);
+    }, 2400);
+    return () => window.clearInterval(timer);
+  }, [alive, seen, still, width, settled]);
+
+  return (
+    <span ref={ref} className={className} aria-hidden="true">
+      {shown}
+    </span>
+  );
+};
diff --git a/apps/web/src/components/bits/BitBurst.tsx b/apps/web/src/components/bits/BitBurst.tsx
new file mode 100644
index 0000000..6c5caaa
--- /dev/null
+++ b/apps/web/src/components/bits/BitBurst.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import * as React from "react";
+
+const COUNT = 10;
+const LIFE_MS = 620;
+
+/**
+ * BitBurst: a handful of binary digits fly out from the point where a link or
+ * button is pressed. Purely decorative, and off when reduced motion is requested.
+ */
+export const BitBurst: React.FC = () => {
+  React.useEffect(() => {
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+
+    const onPointerDown = (event: PointerEvent) => {
+      const target = event.target as Element | null;
+      if (!target?.closest("a, button")) return;
+
+      const layer = document.createElement("div");
+      layer.setAttribute("aria-hidden", "true");
+      layer.className = "bit-burst";
+      layer.style.left = `${event.clientX}px`;
+      layer.style.top = `${event.clientY}px`;
+      for (let i = 0; i < COUNT; i++) {
+        const angle = (i / COUNT) * Math.PI * 2 + Math.random() * 0.5;
+        const distance = 26 + Math.random() * 34;
+        const digit = document.createElement("span");
+        digit.textContent = Math.random() < 0.5 ? "0" : "1";
+        digit.style.setProperty("--dx", `${Math.cos(angle) * distance}px`);
+        digit.style.setProperty("--dy", `${Math.sin(angle) * distance}px`);
+        digit.style.animationDelay = `${Math.random() * 60}ms`;
+        layer.appendChild(digit);
+      }
+      document.body.appendChild(layer);
+      window.setTimeout(() => layer.remove(), LIFE_MS + 120);
+    };
+
+    window.addEventListener("pointerdown", onPointerDown);
+    return () => window.removeEventListener("pointerdown", onPointerDown);
+  }, []);
+
+  return null;
+};
diff --git a/apps/web/src/components/bits/BitReveal.tsx b/apps/web/src/components/bits/BitReveal.tsx
new file mode 100644
index 0000000..7c27735
--- /dev/null
+++ b/apps/web/src/components/bits/BitReveal.tsx
@@ -0,0 +1,89 @@
+"use client";
+
+import * as React from "react";
+import { useInViewOnce } from "./useInViewOnce";
+
+const CELL = 16;
+const DURATION_MS = 1700;
+
+/**
+ * BitReveal: covers whatever lies beneath it with a field of binary digits that
+ * dissolves cell by cell once it scrolls into view, so the picture underneath
+ * appears to assemble itself out of bits. Without JavaScript nothing is covered.
+ */
+export const BitReveal: React.FC<{
+  /** Colour of the covering cells; should match the surface behind the picture. */
+  surface?: string;
+}> = ({ surface = "#0f172a" }) => {
+  const { ref, seen, still } = useInViewOnce<HTMLCanvasElement>(0.25);
+  const [done, setDone] = React.useState(false);
+
+  // Cover the picture as soon as the script runs, before it is scrolled into view.
+  React.useEffect(() => {
+    const canvas = ref.current;
+    const ctx = canvas?.getContext("2d");
+    if (!canvas || !ctx) return;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      setDone(true);
+      return;
+    }
+    canvas.width = canvas.offsetWidth;
+    canvas.height = canvas.offsetHeight;
+    ctx.fillStyle = surface;
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+  }, [ref, surface]);
+
+  React.useEffect(() => {
+    const canvas = ref.current;
+    const ctx = canvas?.getContext("2d");
+    if (!seen || still || !canvas || !ctx) return;
+
+    const width = (canvas.width = canvas.offsetWidth);
+    const height = (canvas.height = canvas.offsetHeight);
+    const cols = Math.ceil(width / CELL);
+    const rows = Math.ceil(height / CELL);
+    // Each cell disappears at its own moment; cells further right go a little later.
+    const when = new Float32Array(cols * rows);
+    const bit = new Uint8Array(cols * rows);
+    for (let i = 0; i < when.length; i++) {
+      const col = i % cols;
+      when[i] = Math.random() * 0.7 + (col / cols) * 0.3;
+      bit[i] = Math.random() < 0.5 ? 0 : 1;
+    }
+    ctx.font = `11px ui-monospace, Menlo, monospace`;
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+
+    let raf = 0;
+    const start = performance.now();
+    const frame = (now: number) => {
+      const progress = Math.min(1, (now - start) / DURATION_MS);
+      ctx.clearRect(0, 0, width, height);
+      for (let i = 0; i < when.length; i++) {
+        const left = (when[i] ?? 0) - progress;
+        if (left <= 0) continue;
+        const x = (i % cols) * CELL;
+        const y = Math.floor(i / cols) * CELL;
+        ctx.fillStyle = surface;
+        ctx.fillRect(x, y, CELL, CELL);
+        // Cells about to vanish light up first.
+        ctx.fillStyle = left < 0.08 ? "#f8fafc" : "#475569";
+        if (Math.random() < 0.02) bit[i] = bit[i] === 1 ? 0 : 1;
+        ctx.fillText(String(bit[i] ?? 0), x + CELL / 2, y + CELL / 2);
+      }
+      if (progress < 1) raf = requestAnimationFrame(frame);
+      else setDone(true);
+    };
+    raf = requestAnimationFrame(frame);
+    return () => cancelAnimationFrame(raf);
+  }, [ref, seen, still, surface]);
+
+  if (done) return null;
+  return (
+    <canvas
+      ref={ref}
+      aria-hidden="true"
+      className="pointer-events-none absolute inset-0 h-full w-full"
+    />
+  );
+};
diff --git a/apps/web/src/components/bits/BitWipe.tsx b/apps/web/src/components/bits/BitWipe.tsx
new file mode 100644
index 0000000..cd6c472
--- /dev/null
+++ b/apps/web/src/components/bits/BitWipe.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import * as React from "react";
+import { motion } from "framer-motion";
+import { useInViewOnce } from "./useInViewOnce";
+
+const DIGITS = "0110100110010110011010011001011001101001";
+const DURATION = 0.95;
+const EASE = [0.65, 0, 0.35, 1] as const;
+
+/**
+ * BitWipe: reveals its content from left to right behind a narrow column of
+ * binary digits, as if the text were being written out bit by bit. The content
+ * keeps its place the whole time, so nothing reflows.
+ *
+ * Visibility is observed on the outer wrapper: the inner element is clipped away
+ * completely at first, and a fully clipped element never counts as "in view".
+ */
+export const BitWipe: React.FC<{
+  children: React.ReactNode;
+  className?: string;
+  delay?: number;
+  /** Colour of the digit column: dark on light surfaces, light on dark ones. */
+  tone?: "dark" | "light";
+}> = ({ children, className = "", delay = 0, tone = "dark" }) => {
+  const { ref, seen, still } = useInViewOnce<HTMLDivElement>(0.35);
+  const open = seen || still;
+
+  return (
+    <div ref={ref} className={`relative ${className}`}>
+      <motion.div
+        initial={false}
+        animate={{
+          clipPath: open
+            ? "inset(-12% -2% -12% -2%)"
+            : "inset(-12% 100% -12% -2%)",
+        }}
+        transition={
+          still ? { duration: 0 } : { duration: DURATION, delay, ease: EASE }
+        }
+        // Server render and no-JS: content is simply visible.
+        style={{ clipPath: "none" }}
+      >
+        {children}
+      </motion.div>
+      {seen && !still && (
+        <motion.span
+          aria-hidden="true"
+          className={`pointer-events-none absolute inset-y-0 w-[1.1em] overflow-hidden break-all font-mono text-[11px] leading-[1.05] tracking-normal [writing-mode:vertical-rl] md:text-[13px] ${
+            tone === "light" ? "text-white" : "text-slate-900"
+          }`}
+          initial={{ left: "0%", opacity: 0 }}
+          animate={{ left: ["0%", "100%"], opacity: [0, 1, 1, 0] }}
+          transition={{
+            duration: DURATION,
+            delay,
+            ease: EASE,
+            opacity: { duration: DURATION, delay, times: [0, 0.08, 0.86, 1] },
+          }}
+        >
+          {DIGITS}
+        </motion.span>
+      )}
+    </div>
+  );
+};
diff --git a/apps/web/src/components/bits/DecodeText.tsx b/apps/web/src/components/bits/DecodeText.tsx
new file mode 100644
index 0000000..d12f348
--- /dev/null
+++ b/apps/web/src/components/bits/DecodeText.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import * as React from "react";
+import { useInViewOnce } from "./useInViewOnce";
+
+const FRAME_MS = 32;
+
+const scramble = (text: string, revealed: number): string =>
+  Array.from(text)
+    .map((char, index) => {
+      if (index < revealed || !/[A-Za-z0-9]/.test(char)) return char;
+      return Math.random() < 0.5 ? "0" : "1";
+    })
+    .join("");
+
+/**
+ * DecodeText: text that resolves from binary digits, left to right. Meant for
+ * monospaced labels, where digits and letters have the same width and nothing shifts.
+ * Screen readers and no-JS visitors get the plain text.
+ */
+export const DecodeText: React.FC<{
+  text: string;
+  className?: string;
+  /** Run when scrolled into view, on hover, or both. */
+  trigger?: "view" | "hover" | "both";
+}> = ({ text, className = "", trigger = "view" }) => {
+  const { ref, seen, still } = useInViewOnce<HTMLSpanElement>(0.6);
+  const [shown, setShown] = React.useState(text);
+  const timer = React.useRef(0);
+
+  const run = React.useCallback(() => {
+    if (still) return;
+    window.clearInterval(timer.current);
+    const length = Array.from(text).length;
+    const frames = Math.min(26, Math.max(12, length));
+    let frame = 0;
+    timer.current = window.setInterval(() => {
+      frame += 1;
+      if (frame >= frames) {
+        window.clearInterval(timer.current);
+        setShown(text);
+        return;
+      }
+      setShown(scramble(text, Math.floor((frame / frames) * length)));
+    }, FRAME_MS);
+  }, [still, text]);
+
+  React.useEffect(() => {
+    if (seen && trigger !== "hover") run();
+    return () => window.clearInterval(timer.current);
+  }, [seen, trigger, run]);
+
+  return (
+    <span
+      ref={ref}
+      className={className}
+      onPointerEnter={trigger === "view" ? undefined : run}
+    >
+      <span className="sr-only">{text}</span>
+      <span aria-hidden="true">{shown}</span>
+    </span>
+  );
+};
diff --git a/apps/web/src/components/bits/ScrollBits.tsx b/apps/web/src/components/bits/ScrollBits.tsx
new file mode 100644
index 0000000..a29ac66
--- /dev/null
+++ b/apps/web/src/components/bits/ScrollBits.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import * as React from "react";
+
+/** ScrollBits: how far the page is scrolled, as an eight-bit binary number. */
+export const ScrollBits: React.FC<{ className?: string }> = ({
+  className = "",
+}) => {
+  const [percent, setPercent] = React.useState(0);
+
+  React.useEffect(() => {
+    const update = () => {
+      const max = document.documentElement.scrollHeight - window.innerHeight;
+      setPercent(max > 0 ? Math.round((window.scrollY / max) * 100) : 0);
+    };
+    update();
+    window.addEventListener("scroll", update, { passive: true });
+    return () => window.removeEventListener("scroll", update);
+  }, []);
+
+  return (
+    <span className={className} aria-hidden="true">
+      {percent.toString(2).padStart(8, "0")}
+      <span className="ml-3 text-slate-300">
+        {String(percent).padStart(3, "0")}%
+      </span>
+    </span>
+  );
+};
diff --git a/apps/web/src/components/bits/useInViewOnce.ts b/apps/web/src/components/bits/useInViewOnce.ts
new file mode 100644
index 0000000..2d028f1
--- /dev/null
+++ b/apps/web/src/components/bits/useInViewOnce.ts
@@ -0,0 +1,31 @@
+"use client";
+
+import * as React from "react";
+
+/** True once the element has entered the viewport. Also reports reduced-motion preference. */
+export const useInViewOnce = <T extends Element>(
+  threshold = 0.4,
+): { ref: React.RefObject<T | null>; seen: boolean; still: boolean } => {
+  const ref = React.useRef<T | null>(null);
+  const [seen, setSeen] = React.useState(false);
+  const [still, setStill] = React.useState(false);
+
+  React.useEffect(() => {
+    setStill(window.matchMedia("(prefers-reduced-motion: reduce)").matches);
+    const node = ref.current;
+    if (!node) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry?.isIntersecting) {
+          setSeen(true);
+          observer.disconnect();
+        }
+      },
+      { threshold },
+    );
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [threshold]);
+
+  return { ref, seen, still };
+};
diff --git a/apps/web/src/components/home/Block.tsx b/apps/web/src/components/home/Block.tsx
index 40a7a46..7d056bd 100644
--- a/apps/web/src/components/home/Block.tsx
+++ b/apps/web/src/components/home/Block.tsx
@@ -1,4 +1,7 @@
 import * as React from "react";
+import { BinaryTicker } from "@/src/components/bits/BinaryTicker";
+import { BitWipe } from "@/src/components/bits/BitWipe";
+import { DecodeText } from "@/src/components/bits/DecodeText";
 import { Reveal } from "@/src/components/Reveal";
 
 interface BlockProps {
@@ -32,22 +35,22 @@ export const Block: React.FC<BlockProps> = ({
             {index}
           </span>
           <span className="h-px w-10 bg-slate-300" />
-          <span className="font-mono text-[11px] uppercase tracking-[0.25em] text-slate-500">
-            {label}
-          </span>
-          <span
+          <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"
-            aria-hidden="true"
-          >
-            {parseInt(index, 10).toString(2).padStart(8, "0")}
-          </span>
+          />
         </div>
       </Reveal>
-      <Reveal delay={0.1}>
+      <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>
-      </Reveal>
+      </BitWipe>
       <div className="mt-14 md:mt-24">{children}</div>
     </div>
   </section>
diff --git a/apps/web/src/components/home/PathPicker.tsx b/apps/web/src/components/home/PathPicker.tsx
index 93f7236..1c37e0b 100644
--- a/apps/web/src/components/home/PathPicker.tsx
+++ b/apps/web/src/components/home/PathPicker.tsx
@@ -3,6 +3,7 @@
 import * as React from "react";
 import { motion } from "framer-motion";
 import { Button } from "@/src/components/Button";
+import { DecodeText } from "@/src/components/bits/DecodeText";
 import { PathScene } from "@/src/components/illustrations/PathScenes";
 import { SERVICE_PATHS, type ServicePath } from "@/src/content/paths";
 
@@ -50,9 +51,11 @@ const PathStory: React.FC<{ path: ServicePath; active: boolean }> = ({
       <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">
-            <span className="font-mono text-[11px] uppercase tracking-[0.2em] text-slate-300">
-              {current?.title}
-            </span>
+            <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>
@@ -151,7 +154,7 @@ export const PathPicker: React.FC = () => {
               aria-selected={selected}
               aria-controls={`path-panel-${path.id}`}
               onClick={() => setActiveId(path.id)}
-              className={`group flex h-full flex-col justify-between rounded-3xl border p-5 text-left transition-all duration-300 md:p-7 ${
+              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"
diff --git a/apps/web/src/components/home/PortraitSection.tsx b/apps/web/src/components/home/PortraitSection.tsx
index ca4f560..06dc83e 100644
--- a/apps/web/src/components/home/PortraitSection.tsx
+++ b/apps/web/src/components/home/PortraitSection.tsx
@@ -3,6 +3,9 @@
 import * as React from "react";
 import Image from "next/image";
 import { motion } from "framer-motion";
+import { BitReveal } from "@/src/components/bits/BitReveal";
+import { BitWipe } from "@/src/components/bits/BitWipe";
+import { DecodeText } from "@/src/components/bits/DecodeText";
 
 /**
  * PortraitSection: the introduction, with the portrait fading out of a dark surface
@@ -22,8 +25,8 @@ export const PortraitSection: React.FC<{
     {/* Portrait: right side on wide screens, top on small ones. */}
     <motion.div
       className="relative h-[110vw] w-full md:absolute md:inset-y-0 md:right-0 md:h-auto md:w-[62%]"
-      initial={{ opacity: 0, scale: 1.06 }}
-      whileInView={{ opacity: 1, scale: 1 }}
+      initial={{ scale: 1.06 }}
+      whileInView={{ scale: 1 }}
       viewport={{ once: true, margin: "-10%" }}
       transition={{ duration: 1.4, ease: [0.16, 1, 0.3, 1] }}
     >
@@ -39,6 +42,8 @@ export const PortraitSection: React.FC<{
       <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" />
       <div className="absolute inset-x-0 top-0 h-24 bg-gradient-to-b from-slate-900 to-transparent" />
+      {/* The portrait assembles itself out of binary digits. */}
+      <BitReveal />
     </motion.div>
 
     <div className="relative z-10 mx-auto w-full max-w-[1400px] px-5 pb-20 md:px-12 md:py-40">
@@ -54,13 +59,16 @@ export const PortraitSection: React.FC<{
             {index}
           </span>
           <span className="h-px w-10 bg-slate-600" />
-          <span className="font-mono text-[11px] uppercase tracking-[0.25em] text-slate-400">
-            {label}
-          </span>
+          <DecodeText
+            text={label}
+            className="font-mono text-[11px] uppercase tracking-[0.25em] text-slate-400"
+          />
         </div>
-        <h2 className="m-0 text-5xl font-bold leading-[0.95] tracking-tighter text-white md:text-7xl lg:text-[6.5rem]">
-          {title}
-        </h2>
+        <BitWipe tone="light" delay={0.35}>
+          <h2 className="m-0 text-5xl font-bold leading-[0.95] tracking-tighter text-white md:text-7xl lg:text-[6.5rem]">
+            {title}
+          </h2>
+        </BitWipe>
         <div className="mt-10 md:mt-14">{children}</div>
       </motion.div>
     </div>
diff --git a/apps/web/src/components/illustrations/WorkShowcase.tsx b/apps/web/src/components/illustrations/WorkShowcase.tsx
index 53f9c5e..3f3bf3a 100644
--- a/apps/web/src/components/illustrations/WorkShowcase.tsx
+++ b/apps/web/src/components/illustrations/WorkShowcase.tsx
@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import Image from "next/image";
-import { motion } from "framer-motion";
+import { motion, useMotionValue, useSpring } from "framer-motion";
 
 export type WorkItem = {
   readonly name: string;
@@ -88,10 +88,26 @@ const WorkStage: React.FC<{ item: WorkItem }> = ({ item }) => {
 
   const active = inView && !still;
 
+  // The frames lean a few degrees towards the pointer.
+  const tiltX = useSpring(useMotionValue(0), { stiffness: 120, damping: 18 });
+  const tiltY = useSpring(useMotionValue(0), { stiffness: 120, damping: 18 });
+  const onPointerMove = (event: React.PointerEvent<HTMLDivElement>) => {
+    if (still || event.pointerType !== "mouse") return;
+    const box = event.currentTarget.getBoundingClientRect();
+    tiltY.set(((event.clientX - box.left) / box.width - 0.5) * 7);
+    tiltX.set(-((event.clientY - box.top) / box.height - 0.5) * 5);
+  };
+  const onPointerLeave = () => {
+    tiltX.set(0);
+    tiltY.set(0);
+  };
+
   return (
     <div
       ref={ref}
-      className="relative overflow-hidden rounded-3xl bg-slate-900 px-5 pb-0 pt-8 md:px-12 md:pt-14"
+      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"
     >
       <div
         className="pointer-events-none absolute inset-0 opacity-60"
@@ -102,7 +118,14 @@ const WorkStage: React.FC<{ item: WorkItem }> = ({ item }) => {
         aria-hidden="true"
       />
 
-      <div className="relative mx-auto max-w-4xl">
+      <motion.div
+        className="relative mx-auto max-w-4xl"
+        style={{
+          rotateX: tiltX,
+          rotateY: tiltY,
+          transformStyle: "preserve-3d",
+        }}
+      >
         {/* Desktop */}
         <motion.div
           initial={{ opacity: 0, y: 40 }}
@@ -150,7 +173,7 @@ const WorkStage: React.FC<{ item: WorkItem }> = ({ item }) => {
             />
           </div>
         </motion.div>
-      </div>
+      </motion.div>
     </div>
   );
 };