Design guide: The Reaping Line

This page documents how the concept was made: direction, implementation, tooling, the three iteration passes, and how to reproduce the workflow.

Creative direction

WebReaper's library is a fluent builder: .Crawl(url).AsMarkdown().WriteToConsole() reads like parts clicking onto a chassis. The site takes that literally: a bright workshop bench where you assemble a reaping line from four stations (scope, transport, extraction, destination) and watch the CLI command and the C# write themselves. The aesthetic lane is "technical toy": warm-white canvas with a dot grid, hard 2 px ink borders, offset block shadows, one role color per station (blue transport, violet extraction, teal destination). The configurator is the hero; everything below it annotates what you just built: the seams behind each station, the escalation ladder, the agent surfaces.

What's real

• Every option maps to a real flag or builder call, cross-checked against the release binary's webreaper help (v11.3.x) and the repository README, not against memory.
• The configurator encodes real constraints: --schema / --prompt / --infer are mutually exclusive; LLM modes read the key from WEBREAPER_LLM_API_KEY, never a flag; MongoDB is a library sink, so the CLI pane honestly falls back to a stdout pipe and says why.
• The subtlest accuracy catch: crawl has no start-tier flag. The real CLI only accepts --browser / --stealth on scrape; a whole-site crawl always starts each page at HTTP and auto-climbs on a block (ADR-0083), host-sticky. The first draft emitted crawl --stealth; verification against the binary's help text caught it, and the fix became a teaching moment in the UI note.

Implementation

• One static HTML file, no framework, no build. The configurator is ~120 lines of vanilla JS: a state object, a cliText() / csLines() pair that regenerate both panes, and a token-level highlighter.
• The conveyor belt is an inline SVG line with role-colored station nodes; the "pucks" are CSS offset-path page icons riding it on an infinite linear animation. prefers-reduced-motion parks them at rest positions.
• Typography: Schibsted Grotesk (voice: precise, friendly, a little Nordic workshop) + Fira Code for everything the user might copy.
• Palette is OKLCH throughout; the four role colors are the only saturation on the page, so the configurator reads as the subject.

Accessibility & performance

• Stations are native radio groups inside <fieldset>s: arrow-key navigation and screen-reader semantics for free; the CLI pane is aria-live so changes are announced.
• Copy buttons are real buttons with visible text; focus outlines are 3 px solid; body text sits at ≥7:1 contrast, secondary at ≥4.5:1.
• Two font families, one inline SVG, zero images, zero libraries. The page is a single request plus fonts.

Iteration log

• Pass 1: structure & first screenshot review. Fixed the CLI highlighter wrapping its own inserted class="…" attributes (regex ran over the HTML it had just produced: rewritten as a token-level pass with a quote-state machine); the fourth seam card orphaned on its own row (grid minmax 270→245 px); belt station nodes were all-gray (now role-colored with a soft halo).
• Pass 2: behavior verification. Drove all four stations programmatically through an 8-combination matrix in the browser and asserted the generated CLI string and C# markers for each. Caught and fixed the crawl --stealth inaccuracy (see "What's real"); added --max-pages 500 to site-scope commands to mirror the C# pane's PageCrawlLimit(500).
• Pass 3: responsive & polish. 375 px pass: stations collapse to a 2×2 then 1-column grid, panes stack, code pres scroll internally with no page overflow; verified copy buttons, focus order, and the reduced-motion belt; tightened the ladder chips ("403 challenge / still blocked / 200 OK") so the escalation reads at a glance.

Reproduce this workflow

1. ground truth first: run the real binary (`webreaper help`, real
   scrapes) and save transcripts; write FACTS.md every claim links to
2. design the interaction before the skin: the config matrix is the
   product story (what's a flag, what's library-only, what's automatic)
3. build static: one file, vanilla JS, OKLCH tokens, two fonts
4. iterate with full-page screenshots at 1440px and 375px; fix, repeat ×3
5. verify behavior programmatically (drive the radios, assert the output)
6. deploy the directory: `vercel deploy --prod`

Built with Claude (Fable 5). No image-generation tools were needed for this concept: the visual system is pure CSS/SVG.