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>

apps/web/src/components/home/Block.tsx

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