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>

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>