Vector — Protocol Landing Page
A protocol page for an audience that reads the docs before the hero: scroll-scrubbed film behind a spec sheet, live-looking throughput figures, and an integration block that shows the call rather than describing it.
The prompt — 4 sections
Film Foundation
Build a landing page for **Vector**, a settlement protocol. The audience is engineers, so the page has to survive being read by someone who is already sceptical.
- **Stack:** React + Tailwind, the film on a WebGL quad, no chart library.
- **Palette:** page `#06070a`, ink `#E6E9F0`, muted `#767D8C`, hairline `rgba(230,233,240,0.10)`, accent `#7DD3FC` — cold, so the glass in the footage reads as glass.
- **Type:** neutral sans for prose, mono for every number and every identifier without exception. If a figure appears in prose, it is still mono.
The rule this page is built on: **no adjective that a number could replace.** "Fast" is a claim; "84ms p95, 30-day median" is a fact. Every section below either states a measured figure with its window, or shows the code.
Four viewports of scroll track — shorter than a story page, because this audience scrolls fast and resents being slowed down.
Chapters
Three acts over the film, separated by a beat of bare footage.
1. **Thesis** (0.00–0.28) — the name, one line stating what settles and how fast, and a mono line with the chain count and the audit date. No call to action yet.
2. **Numbers** (0.34–0.62) — four figures in a row: p95 settlement, throughput, chains, uptime. Each with its measurement window underneath in mono, because a figure without a window is marketing.
3. **Failure** (0.68–1.00) — what happens when it breaks. State the actual behaviour: reorg handling, the refund path, and the one case that still requires manual intervention. A protocol page that will not discuss failure is not read as confident, it is read as evasive.
Drift each chapter −70px and zoom 4%.
Pin a scrubber to the bottom edge with a tick per chapter and the percentage in mono at the right.
Integration
Below the film, the part that converts: the call itself.
A two-column block. Left (5 of 12) holds a mono label, a headline, and three sentences on what integration actually costs — one dependency, no chain-specific branches, and the migration path from the thing they are already using.
Right (7 of 12) holds a terminal panel with a tab strip: three languages, switchable, the active tab underlined in accent. Inside, a real request and its response, syntax-coloured by token type rather than by regex guessing — keywords, strings, and numbers each get their own colour, everything else takes the ink colour.
A copy button sits at the top right of the panel and swaps to "Copied" for 1.5 seconds. Never animate the code block itself; developers reading code do not want it moving.
Close
A single centred block over a faint accent radial glow: a headline at `clamp(2rem, 5vw, 3.5rem)`, one line, and two controls — a solid accent "Read the spec" and a ghost "Open the testnet".
Beneath, a mono line answering what this audience actually asks first: the licence, the audit firm, and whether the contracts are upgradeable. Say if they are — an evasive answer here loses the reader permanently.
Footer: four link columns, a status dot with a live indicator, and the commit hash the docs were built from, in mono.
