mmintelandClaude Opus 5.5
dc4a01cbe4
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>
58 lines
1.8 KiB
TypeScript
58 lines
1.8 KiB
TypeScript
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 {
|
|
/** Two-digit section index, shown with its binary form. */
|
|
index: string;
|
|
label: string;
|
|
title: React.ReactNode;
|
|
id?: string;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
/**
|
|
* Block: one section of the homepage. A single left axis, one kicker line,
|
|
* one oversized headline, then the content. No sidebars.
|
|
*/
|
|
export const Block: React.FC<BlockProps> = ({
|
|
index,
|
|
label,
|
|
title,
|
|
id,
|
|
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>
|
|
);
|