Redesign the landing page around a print-forensics palette
The old page was the default dark-SaaS template: near-black ground, violet gradient headline, blur-glow orbs, glassmorphic rounded cards, emoji icons. It looked like every other generated landing page and said nothing about what the product is for. This one is built out of document materials, because the product is about documents: - Warm newsprint stock (#f2efe6) and warm near-black ink instead of near-black and violet. Two accents only, each with a job: vermilion is reserved exclusively for content that was hiding, olive for content that has been cleared. Nothing else gets to be colored. - Instrument Serif carries the headlines, Geist Mono carries labels and metadata, so the UI sans never has to pretend to be expressive. - Hairline rules do the structural work that bordered cards were doing. The six hiding places are now a numbered editorial list rather than a grid of identical rounded boxes, and the pipeline steps are a ruled table with serif numerals. - Left-aligned asymmetric hero with a colophon block, rather than everything stacked down the center axis. - The self-host section inverts to ink for tonal contrast, which also gives the terminal block somewhere natural to live. The page also now practices what it preaches: there is a real white-on-white sentence planted in the hero, and an X-ray switch in the nav reveals it. Selecting it works too, the same way it would in a PDF viewer. The four-stage demo keeps its behavior and moves to the new palette. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Aryan SinghandClaude Opus 5 committed
1 parent
7e7e4d9b1c
commit
05ef5f2aef
4 files changed
+450
-433
No files matched your search
@@ -15,16 +15,16 @@ import { useState } from "react";
|
||||
type Stage = "delivered" | "revealed" | "ocr" | "cleaned";
|
||||
|
||||
const STAGES: { id: Stage; label: string; step: string }[] = [
|
||||
{ id: "delivered", label: "As delivered", step: "1" },
|
||||
{ id: "revealed", label: "Pixel pass", step: "2" },
|
||||
{ id: "ocr", label: "OCR readout", step: "3" },
|
||||
{ id: "cleaned", label: "Cleaned export", step: "4" },
|
||||
{ id: "delivered", label: "As delivered", step: "01" },
|
||||
{ id: "revealed", label: "Pixel pass", step: "02" },
|
||||
{ id: "ocr", label: "OCR readout", step: "03" },
|
||||
{ id: "cleaned", label: "Cleaned export", step: "04" },
|
||||
];
|
||||
|
||||
const CAPTIONS: Record<Stage, { title: string; body: string }> = {
|
||||
delivered: {
|
||||
title: "What the reader sees",
|
||||
body: "A normal-looking page. There is a line of white text sitting on the white background — invisible on screen, invisible on paper, fully readable by anything that parses the file. Try selecting the paragraph below.",
|
||||
body: "A normal-looking page. There is a line of white text sitting on the white background — invisible on screen, invisible on paper, fully readable by anything that parses the file. Try selecting the paragraph area below.",
|
||||
},
|
||||
revealed: {
|
||||
title: "What the pixels say",
|
||||
@@ -48,14 +48,15 @@ export default function HiddenTextDemo() {
|
||||
const caption = CAPTIONS[stage];
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
{/* Stage selector */}
|
||||
<div>
|
||||
{/* Stage selector: a run of numbered steps split by hairlines, with the
|
||||
active one underscored in ink. Deliberately not a pill switcher. */}
|
||||
<div
|
||||
role="tablist"
|
||||
aria-label="Pipeline stages"
|
||||
className="mx-auto mb-6 flex w-full max-w-2xl flex-wrap items-center justify-center gap-1 rounded-2xl border border-white/10 bg-white/[0.03] p-1.5 backdrop-blur"
|
||||
className="grid grid-cols-2 border-y border-rule sm:grid-cols-4"
|
||||
>
|
||||
{STAGES.map((s) => {
|
||||
{STAGES.map((s, i) => {
|
||||
const active = s.id === stage;
|
||||
return (
|
||||
<button
|
||||
@@ -63,111 +64,86 @@ export default function HiddenTextDemo() {
|
||||
role="tab"
|
||||
aria-selected={active}
|
||||
onClick={() => setStage(s.id)}
|
||||
className={`flex flex-1 items-center justify-center gap-2 rounded-xl px-3 py-2.5 text-xs font-semibold whitespace-nowrap transition sm:text-sm ${
|
||||
active
|
||||
? "bg-violet-600 text-white shadow-lg shadow-violet-600/25"
|
||||
: "text-zinc-400 hover:bg-white/5 hover:text-zinc-200"
|
||||
}`}
|
||||
className={`group relative flex flex-col items-start gap-1 px-4 py-4 text-left transition-colors sm:px-5 ${
|
||||
i % 2 === 1 ? "border-l border-rule" : ""
|
||||
} ${i >= 2 ? "border-t border-rule sm:border-t-0" : ""} ${
|
||||
i >= 1 ? "sm:border-l sm:border-rule" : ""
|
||||
} ${active ? "bg-sheet" : "hover:bg-sheet/60"}`}
|
||||
>
|
||||
<span
|
||||
className={`flex h-5 w-5 shrink-0 items-center justify-center rounded-md text-[10px] font-black ${
|
||||
active ? "bg-white/20" : "bg-white/5 text-zinc-500"
|
||||
}`}
|
||||
className={`label ${active ? "text-signal" : "text-ink-faint"}`}
|
||||
>
|
||||
{s.step}
|
||||
</span>
|
||||
{s.label}
|
||||
<span
|
||||
className={`font-medium ${
|
||||
active ? "text-ink" : "text-ink-soft group-hover:text-ink"
|
||||
}`}
|
||||
>
|
||||
{s.label}
|
||||
</span>
|
||||
{active && (
|
||||
<span className="absolute inset-x-0 -bottom-px h-0.5 bg-ink" />
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 lg:grid-cols-[1.15fr_1fr] lg:items-start">
|
||||
{/* The mock page */}
|
||||
<div className="relative">
|
||||
<div className="absolute -inset-4 rounded-3xl bg-gradient-to-br from-violet-600/20 via-fuchsia-600/10 to-transparent blur-2xl" />
|
||||
<div className="relative overflow-hidden rounded-2xl border border-white/10 bg-zinc-900/60 shadow-2xl backdrop-blur">
|
||||
{/* Window chrome */}
|
||||
<div className="flex items-center gap-2 border-b border-white/5 bg-white/[0.03] px-4 py-2.5">
|
||||
<div className="flex gap-1.5">
|
||||
<span className="h-2.5 w-2.5 rounded-full bg-red-500/70" />
|
||||
<span className="h-2.5 w-2.5 rounded-full bg-amber-500/70" />
|
||||
<span className="h-2.5 w-2.5 rounded-full bg-emerald-500/70" />
|
||||
</div>
|
||||
<span className="ml-2 truncate font-mono text-[11px] text-zinc-500">
|
||||
{stage === "cleaned"
|
||||
? "final_essay_cleaned.pdf"
|
||||
: "final_essay.pdf"}
|
||||
</span>
|
||||
{stage !== "delivered" && (
|
||||
<span className="ml-auto shrink-0 rounded-full border border-violet-400/30 bg-violet-500/10 px-2 py-0.5 text-[10px] font-semibold text-violet-300">
|
||||
{stage === "cleaned" ? "sanitized" : "processing"}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="grid gap-10 pt-10 lg:grid-cols-[1.35fr_1fr] lg:gap-14">
|
||||
{/* The sheet */}
|
||||
<div>
|
||||
<div className="mb-3 flex items-baseline justify-between">
|
||||
<span className="label text-ink-faint">
|
||||
{stage === "cleaned"
|
||||
? "final_essay_cleaned.pdf"
|
||||
: "final_essay.pdf"}
|
||||
</span>
|
||||
<span
|
||||
className={`label ${
|
||||
stage === "cleaned" ? "text-verified" : "text-ink-faint"
|
||||
}`}
|
||||
>
|
||||
{stage === "cleaned"
|
||||
? "flattened"
|
||||
: stage === "delivered"
|
||||
? "as received"
|
||||
: "processing"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="p-4 sm:p-6">
|
||||
{stage === "ocr" ? (
|
||||
<OcrReadout />
|
||||
) : (
|
||||
<PaperPage stage={stage} />
|
||||
)}
|
||||
</div>
|
||||
<div className="border border-rule bg-white shadow-[0_1px_0_rgba(23,21,15,0.04),0_18px_40px_-24px_rgba(23,21,15,0.35)]">
|
||||
{stage === "ocr" ? <OcrReadout /> : <PaperPage stage={stage} />}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Caption + verdict */}
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="rounded-2xl border border-white/10 bg-white/[0.02] p-6">
|
||||
<div className="mb-2 flex items-center gap-2">
|
||||
<span className="flex h-6 w-6 items-center justify-center rounded-lg bg-violet-600/20 text-xs font-black text-violet-300">
|
||||
{STAGES.find((s) => s.id === stage)?.step}
|
||||
</span>
|
||||
<h3 className="text-base font-semibold text-white">
|
||||
{caption.title}
|
||||
</h3>
|
||||
</div>
|
||||
<p className="text-sm leading-relaxed text-zinc-400">
|
||||
{caption.body}
|
||||
</p>
|
||||
</div>
|
||||
{/* Commentary */}
|
||||
<div className="lg:pt-8">
|
||||
<p className="label mb-3 text-ink-faint">
|
||||
Step {STAGES.find((s) => s.id === stage)?.step}
|
||||
</p>
|
||||
<h3 className="font-display text-3xl leading-tight text-ink">
|
||||
{caption.title}
|
||||
</h3>
|
||||
<p className="mt-4 leading-relaxed text-ink-soft">{caption.body}</p>
|
||||
|
||||
<div
|
||||
className={`rounded-2xl border p-5 transition ${
|
||||
stage === "cleaned"
|
||||
? "border-emerald-500/25 bg-emerald-500/[0.06]"
|
||||
: stage === "delivered"
|
||||
? "border-red-500/25 bg-red-500/[0.06]"
|
||||
: "border-amber-500/25 bg-amber-500/[0.06]"
|
||||
className={`mt-8 border-l-2 pl-5 ${
|
||||
stage === "cleaned" ? "border-verified" : "border-signal"
|
||||
}`}
|
||||
>
|
||||
<div className="mb-1.5 flex items-center gap-2 text-xs font-bold tracking-wider uppercase">
|
||||
<span
|
||||
className={`h-1.5 w-1.5 rounded-full ${
|
||||
stage === "cleaned"
|
||||
? "bg-emerald-400"
|
||||
: stage === "delivered"
|
||||
? "bg-red-400"
|
||||
: "bg-amber-400"
|
||||
}`}
|
||||
/>
|
||||
<span
|
||||
className={
|
||||
stage === "cleaned"
|
||||
? "text-emerald-300"
|
||||
: stage === "delivered"
|
||||
? "text-red-300"
|
||||
: "text-amber-300"
|
||||
}
|
||||
>
|
||||
{stage === "cleaned"
|
||||
? "Payload removed"
|
||||
: stage === "delivered"
|
||||
? "Payload present · undetected"
|
||||
: "Payload located"}
|
||||
</span>
|
||||
</div>
|
||||
<p className="font-mono text-xs leading-relaxed break-words text-zinc-400">
|
||||
<p
|
||||
className={`label mb-2 ${
|
||||
stage === "cleaned" ? "text-verified" : "text-signal"
|
||||
}`}
|
||||
>
|
||||
{stage === "cleaned"
|
||||
? "Payload removed"
|
||||
: stage === "delivered"
|
||||
? "Payload present · undetected"
|
||||
: "Payload located"}
|
||||
</p>
|
||||
<p className="font-mono text-xs leading-relaxed break-words text-ink-soft">
|
||||
{stage === "cleaned"
|
||||
? "0 characters of extractable text remain in the output file."
|
||||
: `"${HIDDEN_TEXT.slice(0, 58)}…"`}
|
||||
@@ -179,81 +155,66 @@ export default function HiddenTextDemo() {
|
||||
);
|
||||
}
|
||||
|
||||
/** The mock paper. `stage` controls whether the white payload is visible. */
|
||||
/** The mock sheet. `stage` controls whether the white payload is visible. */
|
||||
function PaperPage({ stage }: { stage: Exclude<Stage, "ocr"> }) {
|
||||
const revealed = stage === "revealed";
|
||||
const cleaned = stage === "cleaned";
|
||||
|
||||
return (
|
||||
<div
|
||||
// The real sanitize pass also converts to grayscale; the mock page is
|
||||
// already monochrome, so only the contrast stretch is simulated here —
|
||||
// that keeps the red "found it" annotation from being desaturated too.
|
||||
className={`rounded-lg bg-white px-6 py-7 text-[11px] leading-relaxed text-zinc-900 transition-all duration-500 sm:px-9 sm:py-10 sm:text-[13px] ${
|
||||
revealed ? "contrast-[1.3] brightness-[1.02]" : ""
|
||||
// The real sanitize pass also converts to grayscale; this mock page is
|
||||
// already monochrome, so only the contrast stretch is simulated — which
|
||||
// keeps the vermilion annotation from being desaturated along with it.
|
||||
className={`px-7 py-8 text-[13px] leading-relaxed text-ink transition-all duration-500 sm:px-11 sm:py-12 sm:text-sm ${
|
||||
revealed ? "contrast-[1.28]" : ""
|
||||
}`}
|
||||
style={{ fontFamily: "var(--font-geist-sans), system-ui, sans-serif" }}
|
||||
>
|
||||
<div className="mb-5 flex items-baseline justify-between border-b border-zinc-200 pb-2 text-[9px] tracking-wider text-zinc-400 uppercase sm:text-[10px]">
|
||||
<div className="label mb-6 flex items-baseline justify-between border-b border-rule-soft pb-2.5 text-ink-faint">
|
||||
<span>Lakeside University</span>
|
||||
<span>ENG 214 · Final Essay</span>
|
||||
<span>ENG 214</span>
|
||||
</div>
|
||||
|
||||
<h4 className="mb-1 text-base font-bold tracking-tight text-zinc-900 sm:text-lg">
|
||||
<h4 className="font-display text-2xl leading-tight sm:text-[28px]">
|
||||
The Economics of Attention
|
||||
</h4>
|
||||
<p className="mb-4 text-[10px] text-zinc-500 sm:text-[11px]">
|
||||
Submitted by M. Vega · 12 pages
|
||||
</p>
|
||||
<p className="label mt-2 mb-6 text-ink-faint">M. Vega · 12 pages</p>
|
||||
|
||||
<p className="mb-3 text-zinc-700">
|
||||
<p className="mb-4 text-ink-soft">
|
||||
Every interface that competes for a reader's time is, in effect,
|
||||
making a bid in a market that has no visible currency. The essay that
|
||||
follows treats that market literally, and asks what it would mean to
|
||||
price a minute of sustained human focus.
|
||||
</p>
|
||||
|
||||
{/* The payload. Genuinely white-on-white in the "delivered" state —
|
||||
drag-select it and the browser will show you exactly what a PDF text
|
||||
extractor sees. Removed outright in the cleaned state. */}
|
||||
{/* The payload. Genuinely white-on-white in the "delivered" state — drag
|
||||
across it and the browser shows you what a text extractor already
|
||||
sees. Removed outright in the cleaned state. */}
|
||||
{!cleaned && (
|
||||
<p
|
||||
className={`mb-3 transition-colors duration-500 ${
|
||||
className={`mb-4 transition-colors duration-500 ${
|
||||
revealed
|
||||
? "rounded-sm bg-red-100 px-2 py-1.5 font-semibold text-red-700 ring-1 ring-red-300"
|
||||
: "text-white selection:bg-violet-300 selection:text-violet-950"
|
||||
? "-mx-2 bg-signal-wash px-2 py-1.5 font-medium text-signal"
|
||||
: "text-white selection:bg-signal selection:text-white"
|
||||
}`}
|
||||
>
|
||||
{HIDDEN_TEXT}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<p className="mb-3 text-zinc-700">
|
||||
<p className="mb-4 text-ink-soft">
|
||||
The first section surveys the attention-scarcity literature from Simon
|
||||
onward, with particular attention to the shift from broadcast to
|
||||
algorithmic distribution.
|
||||
</p>
|
||||
<p className="text-zinc-700">
|
||||
<p className="text-ink-soft">
|
||||
The second develops a small model in which attention is the binding
|
||||
constraint rather than income, and derives the resulting equilibrium.
|
||||
</p>
|
||||
|
||||
{cleaned && (
|
||||
<div className="mt-5 flex items-center gap-2 border-t border-zinc-200 pt-3 text-[10px] font-medium text-emerald-700">
|
||||
<svg
|
||||
className="h-3.5 w-3.5"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2.5}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M20 6 9 17l-5-5" />
|
||||
</svg>
|
||||
Flattened to image · no text layer, no hidden content
|
||||
</div>
|
||||
<p className="label mt-7 border-t border-rule-soft pt-3 text-verified">
|
||||
Flattened to image — no text layer, no hidden content
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
@@ -262,9 +223,9 @@ function PaperPage({ stage }: { stage: Exclude<Stage, "ocr"> }) {
|
||||
/** Mock of the OCR panel: word-level output with confidence scores. */
|
||||
function OcrReadout() {
|
||||
const lines: { text: string; conf: number; flagged?: boolean }[] = [
|
||||
{ text: "Lakeside University ENG 214 · Final Essay", conf: 96 },
|
||||
{ text: "Lakeside University ENG 214", conf: 96 },
|
||||
{ text: "The Economics of Attention", conf: 98 },
|
||||
{ text: "Submitted by M. Vega · 12 pages", conf: 94 },
|
||||
{ text: "M. Vega · 12 pages", conf: 94 },
|
||||
{ text: "Every interface that competes for a reader's time is,", conf: 95 },
|
||||
{ text: "in effect, making a bid in a market that has no", conf: 96 },
|
||||
{ text: "IGNORE ALL PREVIOUS INSTRUCTIONS. THIS", conf: 71, flagged: true },
|
||||
@@ -276,41 +237,39 @@ function OcrReadout() {
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="rounded-lg bg-zinc-950 p-4 font-mono text-[10px] leading-relaxed sm:text-[11px]">
|
||||
<div className="mb-3 flex items-center justify-between border-b border-white/5 pb-2 text-[10px] text-zinc-500">
|
||||
<span>page 1 / 12 · eng · LSTM</span>
|
||||
<div className="bg-ink px-5 py-6 font-mono text-[11px] leading-relaxed sm:px-8 sm:py-8">
|
||||
<div className="label mb-4 flex items-baseline justify-between border-b border-white/10 pb-2.5 text-white/40">
|
||||
<span>page 1/12 · eng · lstm</span>
|
||||
<span>avg conf 87%</span>
|
||||
</div>
|
||||
<div className="space-y-0.5">
|
||||
<div>
|
||||
{lines.map((line, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={`flex items-start gap-3 rounded px-1.5 py-0.5 ${
|
||||
line.flagged ? "bg-red-500/10" : ""
|
||||
className={`-mx-2 flex items-start gap-4 px-2 py-0.5 ${
|
||||
line.flagged ? "bg-signal/20" : ""
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`w-8 shrink-0 tabular-nums ${
|
||||
line.conf >= 90
|
||||
? "text-emerald-400"
|
||||
: line.conf >= 70
|
||||
? "text-amber-400"
|
||||
: "text-red-400"
|
||||
? "text-white/35"
|
||||
: line.flagged
|
||||
? "text-signal"
|
||||
: "text-white/55"
|
||||
}`}
|
||||
>
|
||||
{line.conf}%
|
||||
{line.conf}
|
||||
</span>
|
||||
<span
|
||||
className={line.flagged ? "text-red-300" : "text-zinc-400"}
|
||||
>
|
||||
<span className={line.flagged ? "text-white" : "text-white/60"}>
|
||||
{line.text}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p className="mt-3 border-t border-white/5 pt-2 text-[10px] text-zinc-600">
|
||||
<p className="mt-5 border-t border-white/10 pt-3 text-[11px] leading-relaxed text-white/35">
|
||||
Low-confidence clusters are where hidden content usually surfaces —
|
||||
faint ink OCRs worse than the real body copy.
|
||||
faint ink OCRs worse than real body copy.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in new issue
Block a user