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>
   );
 };