TITLE The Slide Rule PROMPT A fully working, accurate ten-inch logarithmic slide rule, drawn in SVG, presented like a prized engineering instrument on a drafting table. Concept: a tool that computes by sliding lengths; the page teaches the viewer to multiply with it in under a minute. Palette: ivory celluloid #F4EBD3, engraved black #1C1B19, red scale numerals #B3261E, blueprint blue accent #2B5C8A, aged edge/brass and table tones #C9B98F; the surface behind is a pale drafting-paper green-grey (#DCE3DA) with a faint 5mm grid and a few pencil construction marks. Light page. The instrument: a body (stock) with fixed scales, a central sliding strip, and a glass cursor with a red hairline. Scales, all computed from logarithms and engraved with correctly graded tick marks (long/medium/short ticks, finer subdivisions between 1 and 2 than between 9 and 10): on the stock A (two decades) and D (one decade), K (three decades) on the top edge, L (linear, for log10) on the bottom; on the slide B, CI (inverted, in red), C. Numerals in a small engineering-style caps face (a monospace or "Gill Sans"-like stack), with "π" gauge marks on C and D. Maker's mark engraved at left: "Halloran & Voss · No. 4081 · Precision Rule". Ends of the stock have small metal braces with screws. The cursor glass has a subtle highlight and magnifies nothing but casts a faint shadow. Interaction: drag the slide left/right (pointer or touch, with momentum and soft end stops); drag the cursor independently; arrow keys nudge the focused part (Shift for fine). A live readout panel styled as a strip of engineer's notepaper shows the values under the hairline on every scale to 3 significant figures, and states in words what the current setting computes: "C index over 2.00 on D. Cursor at 3.00 on C reads 6.00 on D → 2 × 3 = 6". Because the SVG is wide, on phones the rule is shown zoomed with horizontal panning inside its own frame (no page overflow), and a mini-map of the whole rule above. Signature moment: guided demonstrations. Three buttons styled as index tabs, "Multiply 2 × 3", "Divide 8.4 ÷ 2.1", "√ of 49 (A and D)", and a free "Try your own: a × b" input, animate the slide and cursor with eased, mechanical motion (cubic-bezier(.3,.0,.2,1) with a tiny overshoot and settle) while dotted blue annotation arrows and handwritten-style notes draw themselves on to explain each step, ending with the answer circled in red pencil. If a product runs off the scale, the demo correctly uses the other index. Typography: headline "The Slide Rule" small and confident in a slab or Georgia bold, with a subhead "Addition of lengths is multiplication of numbers", and a short, well-written three-paragraph explanation set in a narrow column like an instruction leaflet (log a + log b = log ab), plus a small "How to read a scale" inset. Entrance: the rule slides in from the left as if pushed across the table, the cursor glides to 1, the scales engrave themselves with a quick left-to-right wipe. Detail: a pencil and eraser crumbs lie on the table; hovering (or focusing, or tapping) scale letters shows what each scale is for. Beside the pencil, a live pencil sketch drawn on the drafting paper lays the two lengths currently set on the rule end to end along a two-decade logarithmic line (log a + log b = log ab, with the actual values), updating as the slide and cursor move. Reduced motion: demos jump stepwise with highlights instead of sliding. DESCRIPTION A ten-inch ivory celluloid slide rule by the fictional makers Halloran & Voss lies on pale green-grey drafting paper, pushed in from the left before its scales engrave themselves in a left-to-right wipe and the glass cursor glides to 1. Every tick on K, A, B, CI, C, D and L is placed by logarithm, so the instrument genuinely computes: drag the slide and cursor and a strip of ruled notepaper reports the seven values under the red hairline and says in plain words what the setting works out. Index tabs on the notepaper run guided lessons in which the parts move with mechanical ease while blue pencil notes and dotted arrows write themselves on and the answer is ringed in red pencil. Below, a pencil sketch on the table restates the same setting as two hatched lengths added along a logarithmic line, next to a folded instruction leaflet that explains why it works and how to read a scale. VISUAL TECHNIQUES - Inline SVG instrument with all tick marks and numerals generated from log10, graded long/medium/short with finer subdivisions near 1 than near 10 - Stock, slide, cursor and scale engraving split into stacked SVG layers moved by GPU-composited transforms for smooth dragging - Engraving wipe done with paired counter-translating clip wrappers; entrance push with a custom deceleration curve - Custom motion engine: cubic-bezier(.3,0,.2,1) tweens with a small overshoot and damped settle, drag momentum with exponential friction and sprung soft end stops - Procedural celluloid grain streaks, brass braces with slotted screws, glass cursor with highlight streaks, tinted edges and a soft shadow - Self-drawing annotations: dotted arrows popping in dot by dot, notes revealed with a writing wipe, hand-wobbled red pencil loops drawn by stroke-dashoffset - Drafting-table surface from layered CSS gradients (5 mm and 25 mm grid), pencilled centre line, dimension line and construction marks - Notepaper readout with ruled lines, margin line and punched holes; brass index tabs; folded leaflet with a crease, drop cap and computed "how to read a scale" inset - Live hatched-bar pencil diagram of log a + log b = log ab on a two-decade line - Phone layout with a zoomed, horizontally panning rule and a draggable mini-map of the whole instrument - Reduced-motion mode: no entrance, stepwise jumps with highlighted parts, notes appear without animation INTERACTION MODEL Drag the slide left or right with mouse or touch; it carries momentum and springs softly back at its end stops. Drag the glass cursor independently. Both parts are keyboard focusable: arrow keys nudge, Shift nudges finely, Home returns the part to its starting position. The notepaper readout continuously shows the value under the hairline on each scale to three significant figures and a sentence stating the multiplication (and the equivalent division or square) that the setting performs, and the pencil sketch below redraws the two lengths. The three index tabs (Multiply 2 × 3, Divide 8.4 ÷ 2.1, √ of 49) and the "Try your own a × b" fields run guided demonstrations: the cursor and slide travel to each setting, numbered notes and arrows explain the step, and the answer on D is circled in red; products that would run off the scale are worked from the right-hand index and the notes say so. Touching the rule clears the annotations and hands control back. Hovering, focusing or tapping a scale letter shows a label explaining that scale. On narrow screens the rule is shown enlarged in a horizontally panning frame that follows the demonstrations, with a mini-map above that can be dragged to move the view.