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>
This commit is contained in:
2026-10-04 00:14:22 +02:00
co-authored by Claude Opus 5.5
parent 123ab8e354
commit dc4a01cbe4
17 changed files with 556 additions and 33 deletions
+13 -10
View File
@@ -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>