TITLE
Kestrel Frameworks — Bicycles Drawn to Measure

PROMPT
A landing page for an invented one-person bicycle frame builder, "Kestrel Frameworks" of Hebden-like invented town "Marrowdale, Yorkshire", designed entirely as a cyanotype blueprint: white line work on a deep blue field. The centrepiece is a live technical drawing of a steel bicycle frame that re-drafts itself as the viewer changes the rider's measurements. Concept: the brand is the drawing; ordering a bicycle is watching your own geometry appear.

Palette: blueprint blue #1B4F9C as the full-page colour field, with a darker fold/shadow blue #0E2F66, line white #F2F6FA, and a single marking-out yellow #FFD23F for dimensions being changed and for the one call-to-action. Texture: cyanotype unevenness (subtle large-scale blotching and paper fibre via SVG turbulence at low opacity), fold creases crossing each sheet, a slightly lighter border where the "print" was masked (with zone letters and numbers in the margin), and a drawn title block. Blue colour-field page (neither dark-mode nor white).

Typography: engineering lettering: uppercase, single-stroke feel using a condensed or monospace stack ("Arial Narrow", "DIN Alternate", "Roboto Mono", Menlo, Consolas, monospace) with wide tracking; dimension numerals in tabular mono; one handwritten-style italic serif for the builder's margin notes (Georgia italic) as if pencilled in white. Title block in the lower right of every sheet with boxes: TITLE, DRAWN BY (the invented builder, Wren Achterberg), SCALE 1:5, SHEET n OF 4, DATE (today's real date), DRG No. (whose suffix follows the current revision letter).

Structure: Sheet 1 (hero): the side elevation of a road/touring frame and fork with wheels drawn as thin circles with spoke hints, saddle, bars and drivetrain in lighter line weight; centre lines (dash-dot), dimension lines with arrowheads and values lettered A to J (seat tube, top tube effective, head angle, seat angle, chainstay, BB drop, wheelbase, stack and reach), a small rider stick-figure in dotted line, a hatched ground line, and a schedule of dimensions beside the drawing. Headline lettered across the full width of the top: "BICYCLES DRAWN TO MEASURE" and "One builder. One torch. Twenty-two frames a year." Sheet 2: "MEASURE": the configurator. Sheet 3: "JOINERY": three detail drawings in circles (a lugged head tube joint with a kestrel-feather lug cut-out, a fillet-brazed bottom bracket, a dropout) with numbered callouts, a small key showing where each detail sits on the frame, and short notes on why each is done that way. Sheet 4: "THE ORDER OF WORK": a horizontal process timeline drawn as a Gantt-like bar chart over 14 weeks (measure, draw, mitre, braze, align, paint, build, ride) with a pencilled note per stage, then prices in a plain table (frame and fork from £2,400; waiting list currently "about a year, sorry"), and a request form whose submit stamps "RECEIVED — W.A." with the date on the title block (no network).

Signature moment: the configurator on Sheet 2. Custom-drawn sliders (thin white rules with a yellow index mark and tick scales, like scale rules) for rider height (150–198 cm), inseam (68–94 cm), reach preference (upright ↔ long and low), and intended use (audax / touring / gravel: changes tyre clearance, chainstay length, angles, fork). As a slider moves, the frame is recalculated with real plausible geometry (seat tube from inseam × 0.65, top tube from trunk length and reach, angles and chainstays by use, head tube from stack and fork length, trail derived, standover clearance checked; if clearance is short the top tube is sloped, and below a 76 cm inseam the wheels change from 700C to 650B) and the drawing re-drafts itself: tube lines chase their new positions with eased interpolation, the changing dimensions flash yellow and their numbers roll, construction arcs sweep where angles and lengths change, and the dotted rider figure adjusts posture. A faint dashed ghost of the first issue (REV A) stays under the live drawing for comparison. A standover check box ticks or unticks itself with a pencilled remark. On first load the whole drawing is drafted in sequence over about 2.5–3 s: centre lines first, then tubes stroke by stroke (stroke-dashoffset), wheels compass-swept, dimension lines last (appearing in yellow and cooling to white); the headline letters are stroked in the same way. The Sheet 2 drawing drafts itself when first scrolled into view.

Details: hovering, focusing or tapping any tube names it and its tubing spec in a yellow leader-line callout ("DOWN TUBE — 31.8 mm, 0.8/0.5/0.8 butted, air-hardening steel"); a crosshair with X/Y coordinates in millimetres from the bottom bracket follows the mouse over the drawing; hovering a row of the schedule highlights its dimension on the drawing; a "revisions" table that logs each change the viewer makes ("REV C — seat tube +12 mm", with the cause pencilled beneath, revision letters skipping I, O and Q); a small drawn kestrel hovering as the logo, wings flickering as kestrels do when the page is idle. Buttons are drawn as stamped boxes; focus states are yellow dashed outlines. Responsive: drawing scales to width with line weights and lettering held at a constant visual size; on phones the drawing sits above the copy on Sheet 1 and stays pinned to the top of Sheet 2 while the sliders stack under it. Reduced motion: drawing appears complete; changes apply instantly with a yellow highlight; the kestrel holds still.

DESCRIPTION
The page is four folded cyanotype sheets from the drawing office of a one-woman frame shop in an invented Calder-valley town. Sheet 1 opens by drafting a fully dimensioned side elevation of a lugged steel touring frame, fork, wheels and a dotted rider under a headline lettered across the whole width of the sheet, with a schedule of dimensions and a pencilled margin note from the builder. Sheet 2 hands the viewer four scale rules; moving any of them recalculates a real frame geometry and the drawing redraws itself tube by tube, numbers rolling and flashing marking-out yellow, construction arcs swinging through the tube ends, the rider leaning further forward or sitting up, the wheels shrinking to 650B for short legs, while every change is logged as a lettered revision that also updates the drawing number in each title block. Sheet 3 shows three circular detail views of the joinery with numbered balloons and the builder's reasons in her own hand. Sheet 4 sets out fourteen weeks of work as a hatched bar chart, plain prices, an apologetic waiting list, and a request form that carries the viewer's figures and ends with a yellow RECEIVED stamp slammed onto the title block. Everything is line work in four colours on blotchy blue paper with fold creases, masked borders and zone marks.

VISUAL TECHNIQUES
- Parametric bicycle geometry solver (seat tube, effective top tube, stack, reach, head tube, fork, wheelbase, trail, standover) driving two live inline-SVG drawings from one shared state
- Tubes drawn as double strokes (white outer, field-blue inner) so joints occlude correctly and each tube can be drafted with stroke-dashoffset
- Staged draft-in choreography with per-element delays and a custom cubic-bezier: centre lines, tubes, compass-swept wheels, components, rider, dimensions
- Exponential-chase interpolation of rider parameters each frame, so every line, arrowhead, angle arc and numeral moves and rolls continuously
- Two-link inverse kinematics for the dotted rider's legs, torso and arms
- Aligned, rotated dimension lines with computed arrowheads, extension lines, angle arcs and halo-knocked-out mono numerals
- Yellow construction arcs swept through tube ends with the Web Animations API when a length or angle changes
- Line weights, dash patterns and lettering sized through CSS custom properties recomputed from the drawing's on-screen width
- Cyanotype texture from four layered SVG feTurbulence filters (dark blotching, pale bloom, paper fibre, fine grain) on a fixed overlay
- CSS fold creases, lighter masked border, zone letters and numbers, and a CSS-grid title block on every sheet
- Headline set as SVG text with textLength so it spans the sheet exactly, stroked in on load
- Custom scale-rule sliders built from generated tick marks with a yellow index, ARIA slider semantics and pointer capture
- Hand-plotted circular detail drawings (head lug with feather window, fillet-brazed bottom bracket, dropout) with clip paths, hidden-line and centre-line styles, and stroke-drawn reveal on scroll
- CSS-grid Gantt chart with hatched bars growing from the left on entry
- Hovering kestrel logo with rapid alternating wing rotation triggered only when the page is idle
- Rubber-stamp animation with an overshoot easing for the RECEIVED mark

INTERACTION MODEL
Scrolling moves through the four sheets; the numbered boxes in the header and the stamped button on Sheet 1 jump between them. On Sheet 2 the four scale rules are dragged with mouse or finger (vertical page scrolling still works over them) or stepped with the arrow, Page Up/Down, Home and End keys; the intended-use rule slides continuously and snaps to audax, touring or gravel on release. Every movement re-solves the frame and both drawings ease to the new geometry, with the affected dimensions and schedule rows flashing yellow, the standover box re-checking itself, the builder's note changing with the intended use, and, a moment after the viewer stops, a new lettered line appearing in the revisions table and in every title block's drawing number. Hovering, keyboard-focusing or tapping a tube on either drawing turns it yellow and draws a leader line to its name and tubing specification; moving a mouse over a drawing shows a crosshair and coordinates measured from the bottom bracket; hovering a row in the Sheet 1 schedule lights the matching dimension on the drawing. The kestrel in the header and title blocks flickers its wings whenever the viewer has been still for a couple of seconds and glides when they move. On Sheet 4, hovering a programme row fills its bar; submitting the request form validates name and address with pencilled yellow remarks, then replaces the form with a handwritten reply and stamps RECEIVED — W.A. on the title blocks. Nothing is sent anywhere. With reduced motion the drawings appear complete, changes apply at once with a yellow highlight, and the kestrel stays still.